React বা Vue থেকে এসেছেন আর কিছুই মাথায় ঢুকছে না? আগে মানসিক মডেল পড়ুন: computed, watch, লাইফসাইকেল হুক আর ডেটা লোডিং কোথায় গেল, তার পাঁচ মিনিটের হিসাব।
$mol একটি রিঅ্যাকটিভ UI ফ্রেমওয়ার্ক: আপনি বর্ণনা করেন ইন্টারফেসটি কী, আর ফ্রেমওয়ার্ক ঠিক করে কীভাবে এবং কখন সেটি হালনাগাদ করতে হবে। কোনো ভার্চুয়াল DOM নেই, হাতে করা সাবস্ক্রিপশন নেই, useEffect নেই। আপনি কম্পোনেন্টগুলো একটি ট্রি হিসেবে লেখেন; $mol কেবল যা দৃশ্যমান তা-ই রেন্ডার করে এবং কেবল যা সত্যিই বদলেছে তা-ই পুনরায় হিসাব করে।একটি কম্পোনেন্টে তিনটি ফাইল থাকে:name.view.tree — ঘোষণামূলক লেআউট (একটি সংক্ষিপ্ত ট্রি ভাষা)name.view.ts — আচরণ (সাধারণ TypeScript ক্লাস)name.view.css.ts — টাইপযুক্ত স্টাইল (কম্পাইলার দ্বারা যাচাই করা)এই বিভাজনটাই মূল ভাবনা: লেআউট পঠনযোগ্য থাকে, লজিক পরীক্ষাযোগ্য থাকে, স্টাইল টাইপ-নিরাপদ থাকে।তিনটির কোনোটিই একা বাধ্যতামূলক নয়। ট্রি হলো কাঠামোর একটি সংক্ষেপ, যা আপনি হাতেও লিখতে পারেন: TypeScript থেকে view.tree একই কম্পোনেন্ট দুভাবেই বানায় আর ট্রি যে কোডে কম্পাইল হয় তা দেখায়।
আপনি এমন একটি ছোট অ্যাপ চান যা বড় হওয়ার সাথে সাথেও ছোট থাকে — রানটাইম সংক্ষিপ্ত এবং রেন্ডারিং ডিফল্টভাবে ভার্চুয়ালাইজড।আপনি সর্বত্র টাইপ পছন্দ করেন — এমনকি স্টাইলও TypeScript যাচাই করে।হাতে করে রিঅ্যাকটিভিটি জোড়া লাগাতে আপনি ক্লান্ত — $mol-এ স্টেট একটি স্প্রেডশিটের মতো স্বয়ংক্রিয়ভাবে রিঅ্যাকটিভ।
একটি কাউন্টার, সম্পূর্ণ:1$my_counter$mol_view2 sub /3<= Count $mol_view4 sub /<= count \5<= Increment $mol_button6 click?<=> increment?7 sub /<= label \+1namespace $.$${2export class $my_counterextends$.$my_counter{3@ $mol_memcount(){return 0}4@ $mol_actionincrement(){this.count(this.count()+1)}5}6}count রিঅ্যাকটিভ: যা কিছু এটি পড়ে, এটি বদলালে তা স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার হয়। কোনো setState নেই, কোনো ডিপেন্ডেন্সি অ্যারে নেই, নিবন্ধন করার কোনো store নেই।
