-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathractive-js.html
164 lines (128 loc) · 7.28 KB
/
ractive-js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/images/favicon.png" rel="icon">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trvrm.github.io</title>
<link rel="stylesheet" type="text/css" href="/theme/css/flatly.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/css/style.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="/theme/css/pygments/tango.css" rel="stylesheet">
<meta name="tags" content="javascript" />
<meta name="tags" content="ractive" />
</head>
<body>
<section class="hero is-primary">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<nav class="navbar ">
<div class="navbar-menu is-active">
<div class="navbar-end">
<a class="navbar-item" href="https://twitter.com/trvrm">
<span class="icon"> <i class="fa fa-twitter"></i> </span>
twitter
</a>
<a class="navbar-item" href="https://github.com/trvrm">
<span class="icon"> <i class="fa fa-github"></i> </span>
github
</a>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<p class="title is-1">trvrm.github.io</p>
</div>
</div>
<div class="hero-foot">
<nav class="navbar ">
<div class="navbar-brand is-active">
<a href="/" class="navbar-item" >
trvrm.github.io
</a>
</div>
<div class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item " href="/category/database.html">Database</a>
<a class="navbar-item is-active " href="/category/software.html">Software</a>
<a class="navbar-item " href="/category/systems.html">Systems</a>
</div>
</div>
</nav>
</div>
</section>
<section class="section">
<div class="container has-text-centered">
<p class="title is-3">
<a href="/ractive-js.html" rel="bookmark" title="Permalink to Ractive.js">
Ractive.js
</a>
</p>
<p class="subtitle is-5">
Wed 01 January 2014
</p>
</div>
<hr>
<div class="content ">
<p><a class="reference external" href="http://www.ractivejs.org/">Ractive.js</a> caught my eye this week. I've been using <a class="reference external" href="http://backbonejs.org/">Backbone</a> for the last couple
of years to develop single page client-side applications, and I've liked how
it doesn't get in your way, but simply allows you to get on with your work.</p>
<p>When I noticed that three of the tools I was using: Coffeescript, Underscore, and
<a class="reference external" href="http://backbonejs.org/">Backbone</a> were all written by the same guy, I realised that Jeremy Ashkenas
is a seriously genius level developer. I've loved working with his tools; and I
love the fact that the code that he produces is so readable. I'm always more comfortable
working with a library when I can read through the entire source code if I run
into problems. Check out the nicely annotated source code for Backbone, for example,
here: <a class="reference external" href="http://backbonejs.org/docs/backbone.html">http://backbonejs.org/docs/backbone.html</a></p>
<p>(On that note, I love working with <a class="reference external" href="http://bottlepy.org/docs/dev/_modules/bottle.html">Bottle</a> for exactly the same reason - the entire
framework is contained in a single, very readable, Python file.)</p>
<p>But one problem that comes up time and time again, no matter what library or framework
you're using, is the problem of binding data to controls. Currently in my Backbone-based
code I have event handling code that reacts to user input and updates the model, and
I have more code that reacts to changes in the data model and updates the UI. Wouldn't
it be nice if this two-way data binding could happen automatically? Wouldn't it be
nice, for example, if you could do something like this:</p>
<p>Imagine having a user interface like this:</p>
<div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">label</span><span class="p">></span>
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">'checkbox'</span> <span class="na">checked</span><span class="o">=</span><span class="s">'{{visible}}'</span><span class="p">></span> visible?
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
</pre></div>
<p>And underlying data like this:</p>
<div class="highlight"><pre><span></span><span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"visible"</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">}</span>
</pre></div>
<p>And imagine if all the data binding was handled for you, so that clicking on the checkbox
will automatically change the value of the underlying javascript object, and changing
the value of the object via <code class="code">
ractive.set('visible',true)</code>
updated the interface.</p>
<p>That is exactly what Ractive does. I haven't tried using it in production yet, but
at the moment it feels like the next logical iteration in javascript frameworks.</p>
<p>I was busy using Backbone heavily when Angular and Knockout came out, so I don't have
much experience with them, but asking around the shop the consensus seems to be that
Ractive looks significantly nicer to use than Knockout.</p>
<p>And the best feature so far is their <em>awesome</em> <a class="reference external" href="http://learn.ractivejs.org/hello-world/1/">tutorial</a>. This is, apparently, entirely
written in Ractive, and guides you step by step through all the basic concepts of
the library in an elegant, interactive fashion. No more jumping through package installations
and dependency hell before you can try out a new framework. <em>This</em> is the way to
introduce people to your work. I'm very impressed.</p>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Powered by <a href="http://getpelican.com/">Pelican</a>, <a href="http://python.org">Python</a>,
and <a href="http://bulma.io/">Bulma</a>
</p>
<p class="subtitle is-6">Ubi Caritas et Amor, Deus Ibi Est</p>
</div>
</div>
</footer>
</body>
</html>