Notes on Ractive JS

Ractive JS

Ractive JS - it has the combination of both angular & react great features
Mustach Templates - Partial Templates
Events & Method Calls -Proxy Events, Method Calls
LifeCycle Events - Render
2 Way Data Binding
Observers
Transitions & Animations
Project with Ractive & NodeJs (WebPack & Babel)
It is UI library. It is like Reactive.
 Ractive.js is a template driven, UI and DOM manipulation library that transforms templates into blueprints for interactive applications.
 Originally created for the interactive news-based applications at theguardian.com
 Aims to keep things simple and lightweight but also powerful.
 Ractive.js is for Reactive Programming - A programming paradigm that is oriented around data flows and propagation of change.
 Reactive - You do something and you get a reaction
 A:=B+C (primitive program vs reactive programming)
 Dynamic HTML - Ractive takes mustach based template and uses templates that allow us to add dynamic elements/properties to the UI.
 Ractive uses a virtual DOM which can be updated without reloading the page.
 Mustaches - It is a template enigine and very light weight and user friendly syntax.
 {{myvariable}} - Mustach syntax has variables, sections, comments, partials, custom delimiters, array and object literation, conditions, expressions, aliasing, escaping
 Advanced Template of Ractive
    -- Reactive Templating
    -- Two way databinding - this can be disabled by easily if needed.
    -- Animations & Transitions
    -- SVG Support - Scalable Vector Graphics, Charts & Graphs
    -- Event System - Mouse, Keyboard, Forms -
    -- Components - Used to encapsulate behavior
    -- Observers - Publish and Subscribe mechanism
    -- Keypaths - Which is used to interact with Ractive Instances.
    -- Works well with Other Libraries
 Virtual DOM - When certain part of the application gets updated, the webpage doesn't get reloaded.
 Change Tracking - It rerender the entire app if the state got changed. It uses the diff algorithm to check the previous state and current state
 There is no external dependency to install Ractive.
 $npm install ractive