Ractive.jsRactive.js

Nikhil KumarTrainee Software Consultant

Knoldus Software LLP

Nikhil KumarTrainee Software Consultant

Knoldus Software LLP

AgendaAgenda● What is Ractive Js

● And what is Reactive

● “WHY Ractive” A comparison [Angular, Jquery, Target Specific Elements]

● Entering Ractive Js

● Samples & demos

● References

● What is Ractive Js

● And what is Reactive

● “WHY Ractive” A comparison [Angular, Jquery, Target Specific Elements]

● Entering Ractive Js

● Samples & demos

● References

What is Ractive JsWhat is Ractive Js

Ractive was originally created at theguardian.com to produce news applications. A typical news app is heavily interactive, combines HTML and SVG, and is developed under extreme deadline pressure. It has to work reliably across browsers, and perform well even on mobile devices.

Ractive.Js

Its features include...

● Data-binding, with a beautiful declarative syntax ● Event handling ● Flexible and performant animations and transitions

Its features include...

● Data-binding, with a beautiful declarative syntax ● Event handling ● Flexible and performant animations and transitions

Reactive ?

In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change.

For example, in an imperative programming setting, a:=b+c would mean that “a” is being assigned the result of “b+c” in the instant the expression is evaluated. Later, the values of “b” and “c” can be changed with no effect on the value of “a”.

In reactive programming, the value of “a” would be automatically updated based on the new values.

Example

We don't assign variables, we express them..."and they don't represent discrete values, they represent a value that changes over time"

var a = $R.state(1);

var b = $R.state(2);

var c = $R(function (v1, v2) { return v1 + v2 }); // C = A + B

c.bindTo(a, b); // Tell C it depends on A and B

c() // -> 3

a.set(5) // Set A to 5

b.set(10) // Set B to 10

c() // -> 15

Comparison

<p>Hello Dave! You have 4 new messages.</p>

Ractive => Here it is...

1. Just use jQuery

var p = $('p');

updateView = function (username, msgCount) {

p.text('Hello ' + username + '!

You have ' + msgCount + ' new messages.');

};

This is generally agreed to be a Bad Idea - mixing your templates and your logic will end in tears. What if a non-programmer needs to change the wording? They'll probably break something, that's what.

2. Target specific elements

<p>Hello <span id='username'></span>!

          You have <span id='msgCount'></span> new messages.</p>

          var usernameSpan = $('#username'), 

          msgCountSpan = $('#msgCount');

           updateUsername = function (username) {

          usernameSpan.text(username);

           };

          updateMsgCount = function (msgCount) {

          msgCountSpan.text(msgCount);

          };

     // initialize our view

                updateUsername(model.username);

                updateMsgCount(model.msgCount);

3. Angular

Firstly, Angular isn't just about your user interface – it has opinions on routing, validation, server communication, testing, and so on. In other words it's a framework rather than a library.

Ractive only really cares about UI. Use any router / backend / whatever you want – that's your responsibility.

Enter Ractive JsCase :

Ractive was initially created to tackle the data binding problem in a more elegant way. We on the Guardian interactive team are acutely aware of the challenges of creating app-like experiences on the web; interactives, by their nature, require a huge amount of DOM manipulation, and as slaves to the editorial agenda we typically have tight deadlines.

<script>

var ractive = new Ractive({

// The `el` option can be a node, an ID, or a CSS selector.

el: '#container',

// We could pass in a string, but for the sake of convenience

// we're passing the ID of the <script> tag above.

template: '#template',

// Here, we're passing in some initial data

data: { name: 'world' }

});

</script>

Core Elements

While there are no required options, the three shown above - element, template and data - are the most common. They specify what data to bind to what template and where it should be placed in the html document.

with RactiveThe above example, with Ractive, would go something like this:

<p>Hello {{username}}! You have {{msgCount}} new messages.</p>

var view = new Ractive({

el: document.body,

template: templateStr,

data: model

// contains our username and msgCount properties

});

updateView = function (model) {

view.set(model);

};

Initially, Ractive parses the template and determines that '{{msgCount}}' should be treated as a separate text node, which depends on the 'msgCount' property of our model.

When you call 'view.set()', Ractive compares the new data against its current state, and scans its internal dependency graph to see if any part of the DOM needs to be updated. If so, it only touches those parts - which means no DOM nodes will be created or destroyed.

I Want more...To get a feel for how it will make your life as a web developer  easier,  visit  ractivejs.org,  follow  the interactive tutorials,  or  try  the  60 second setup.

Learn http://learn.ractivejs.org/hello­world/1/

DOC http://docs.ractivejs.org/latest/get­started

I Want more...

References

● https://docs.ractivejs.org

● http://www.theguardian.com/info/developer-blog

● http://blog.ractivejs.org

● http://modernweb.com

Thank You !!