This slide covers the basic fundamental to start with RactiveJs, All the Practise links as well as the source and reference links are given in the slide.

1. Ractive.jsRactive.js
Nikhil Kumar
Trainee Software Consultant
Knoldus Software LLP
Nikhil Kumar
Trainee Software Consultant
Knoldus Software LLP

2. 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

3. 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.

4. 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

5. 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.

6. 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

7. 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.

8. 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);

9. 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.

10. Enter Ractive Js
Case :
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>

11. 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.

12. with Ractive
The 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.

13. 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...

14. References
● https://docs.ractivejs.org
● http://www.theguardian.com/info/developer-blog
● http://blog.ractivejs.org
● http://modernweb.com

15. Thank You !!