ajax $intro$to$clientside$ templang - mit...
TRANSCRIPT
![Page 1: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/1.jpg)
AJAX +
Intro to client-‐side templa5ng
6470 IAP 2014
![Page 2: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/2.jpg)
This week…
• Today – AJAX & Handlebars – Facebook and Parse
• Tomorrow – Something fun TBD – Appian
• Thursday – Vecna – Yext
• All in 34-‐101, 11AM
![Page 3: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/3.jpg)
So far…
• Server-‐side technologies – PHP, Rails, node.js, etc. – Handles request from browser
![Page 4: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/4.jpg)
So far…
• Server-‐side technologies – PHP, Rails, node.js, etc. – Handles request from browser
• Client-‐side technologies – HTML, CSS, Javascript – Interpreted on browser
![Page 5: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/5.jpg)
So far…
• Server-‐side technologies – PHP, Rails, node.js, etc. – Handles request from browser
• Client-‐side technologies – HTML, CSS, Javascript – Interpreted on browser
generates
![Page 6: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/6.jpg)
CLIENT
SERVER
Request: GET mysite.com/id/1
Response: <html>…</html>
![Page 7: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/7.jpg)
CLIENT
SERVER
Request: GET mysite.com/id/1
Response: <html>…</html>
Page refresh
![Page 8: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/8.jpg)
No page refresh?
![Page 9: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/9.jpg)
CLIENT
SERVER
Request: GET mysite.com/id/1
Response: <html>…</html>
Page refresh
![Page 10: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/10.jpg)
AJAX Asynchronous Javascript and XML
(but not really XML)
![Page 11: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/11.jpg)
Asynchronous? setTimeout(function() {!
!alert(‘hello’);!}, 3000);!!!helloServer = http.createServer(function (req, res){ !
!res.writeHead(200, {'Content-Type': ! !'text/plain'}); !!res.end('Hello World'); !
}).listen(8000)!!!
![Page 12: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/12.jpg)
Listeners and callbacks
• When something happens (listen for it), execute the callback func*on
$(‘#element’).click(function() { … });!
![Page 13: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/13.jpg)
Listeners and callbacks
• Make the request • When something happens (listen for it), execute the callback func*on
• Con5nue to do whatever else
![Page 14: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/14.jpg)
Listeners and callbacks
• Make the request • When something happens (listen for it), execute the callback func*on
• Con5nue to do whatever else
the server’s response comes back
![Page 15: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/15.jpg)
function loadXMLDoc() {! var xmlhttp;!! if (window.XMLHttpRequest) {! // code for IE7+, Firefox, Chrome, Opera, Safari! xmlhttp = new XMLHttpRequest();! } else {! // code for IE6, IE5! xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");! }!! xmlhttp.onreadystatechange = function() {! if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {! document.getElementById("myDiv").innerHTML = xmlhttp.responseText;! }! } ! !// this is the callback function!
! xmlhttp.open("GET", "ajax_info.txt", true);! xmlhttp.send();!}!
![Page 16: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/16.jpg)
AJAX without jQuery
• Lots of code • Not cross-‐browser compa5ble!
![Page 17: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/17.jpg)
jQuery $.get and $.post $.get(url, {param1: val1 …}, function(data){!
!// callback function!}, datatype);!!!$.post(url, {param1: val1 …}, function(data){!
!// callback function!}, datatype);!
![Page 18: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/18.jpg)
1. Send the request -‐ immediately when $.get or $.post is called
2. When response comes back
-‐ execute callback func5on -‐ datatype parameter: xml, html, json, script, text
![Page 19: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/19.jpg)
The AJAX response
• Don’t need to send huge HTML files around
• JSON (most common) – {‘name’ : ‘Charles’, ‘email’ : ‘6.470-‐[email protected]’} – Interpreted into Javascript object
![Page 20: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/20.jpg)
AJAX server-‐side
• Response is json-‐encoded object or array
• PHP: echo json_encode($obj)!!
• Rails – render json: @obj!– render { key1 : val1 …}.to_json!– Render different formats in same controller
![Page 21: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/21.jpg)
Example – a simple messageboard
• hqps://github.com/kongming92/6470_ajax
• hqp://cliu2014.scripts.mit.edu/message/
![Page 22: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/22.jpg)
Handlebars.js
![Page 23: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/23.jpg)
What is Handlebars?
• Client side templa5ng
• An HTML “template” <li>{{name}}: {{message}}</li>!
• Fill in the placeholders {name: ‘Charles’, message: ‘hello there’}!
![Page 24: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/24.jpg)
Why Handlebars?
From earlier example… !function(data) {!
!if (data.success) {!! !var item = $('<li />').html('<span ! ! !class="name">' + data.name + ! ! !'</span>: ' + data.message + ! ! !'</li>');!! !$('#messages').prepend(item);!!!}!
}!
![Page 25: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/25.jpg)
Why Handlebars?
• HTML strings in Javascript à messy JS – Even worse with nested elements
• Bad code: data and its presenta5on are intermingled
![Page 26: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/26.jpg)
Using Handlebars
• Add it to your Javascript – Download Handlebars.js file, include as a script <script src=“handlebars-v1.3.0.js” type=“text/javascript></script>!
![Page 27: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/27.jpg)
Using Handlebars
• Compile a template – returns a func*on !var template = Handlebars.compile($(‘#template’).html());!
![Page 28: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/28.jpg)
Using Handlebars
• Run the template on data !var data = {name: ‘Charles’, message: ‘Hello there’};!!template(data); // returns HTML with data inserted!!
![Page 29: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/29.jpg)
Handlebars templates
• Add it as a script in your HTML!<script id="msg-template" type="text/x-handlebars-template">!!<li>{{name}}: {{message}}</li>!
</script>!
• Get the template using jQuery
$(‘#msg-template’).html();!
![Page 30: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/30.jpg)
Some built-‐in helpers
• The each helper: runs on each element of an array: var data = { people: [!! ! ! !{name : ‘person1’},!! ! ! !{name : ‘person2’} …!! ! !]!! !};!
!{{#each people}}!!<li>{{name}}</li> !!
{{/each}}!
![Page 31: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/31.jpg)
Some built-‐in helpers
• The if helper – Output if value is not null/false/0/undefined – Can’t use condi5onals – only test a single variable’s value
{{#if arr.length}}!!…output…!
{{else}}!!…else output…!
{{/if}}!
![Page 32: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/32.jpg)
Some built-‐in helpers
• The unless helper – Opposite of if
![Page 33: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/33.jpg)
Par5als
• Make a template out of other templates • In the template!
!{{#each messages}}!! !{{> message}}!!{{/each}}!
• In the Javascript Handlebars.registerPartial(“message”, $(‘#msg-template’).html());!
![Page 34: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/34.jpg)
Example
• hqps://github.com/kongming92/6470_hbs
• hqp://cliu2014.scripts.mit.edu/message_hbs/
![Page 35: AJAX $Intro$to$clientside$ templang - MIT 6.4706.470.scripts.mit.edu/2014/slides/ajax-handlebars.pdf · So$far…$ • Server/side$technologies$ – PHP,$Rails,$node.js,$etc.$ –](https://reader033.vdocuments.net/reader033/viewer/2022041806/5e54b771ad377e59c2514ba2/html5/thumbnails/35.jpg)
More cool things
• Custom helpers
• Precompiling – templates in their own files
• “More black magic” – client side MVC – Backbone.js – Ember.js – Angular.js