Upload
knoldus-software-llp
View
1.034
Download
0
Embed Size (px)
Citation preview
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/helloworld/1/
DOC http://docs.ractivejs.org/latest/getstarted
I Want more...
References
● https://docs.ractivejs.org
● http://www.theguardian.com/info/developer-blog
● http://blog.ractivejs.org
● http://modernweb.com