Beyond'jQuery It all started so quietly ... Nathaniel T. Schutta @ntschutta One line at a time . No avoiding it now ... JavaScript is a fi rst What does that mean? class citizen .
How do we create modern Applications are changing . web applications? How do we embrace that? How ’ d we get here? “I think there is a world market for maybe five computers.” In the beginning ... — Thomas J. Watson (attributed)
Computers were monsters . Expensive . Centrally managed . Looked like this: Marc%Smith
And we programmed using something like this: Anyone remember those days? Marc%Smith How did we access Good times . all that power?
Everyone ’ s favorite UI , the green screen . The dumb terminal . If you ’ ve ever traveled ... Some advantages to this model though .
Terminals were cheap . Easy to maintain . Didn ’ t have But it was lacking something . “ compatibility ” issues . Beyond taste . The UIs weren ’ t exactly rich .
Not user friendly . Eventually ... Computers got smaller . Marc%Smith “First they ignore you, then they laugh at you, then they fight you, then you win.” They were dismissed as toys . — Mahatma Gandhi (attributed)
And they weren ’ t But the future was here . very powerful . And we started to create ... Client server apps . VB , PowerBuilder , Access . Richer UIs!
Take advantage of But there were downsides . all that *power* . DLLs . Distribution . Compatibility issues ...
Ever experience that? But , change was afoot . In the 90 s , we discovered ... The Internet . And a revolution was born . We created thin clients ...
That , ah , talked to Hmm . powerful servers . We even kept the Remind you of anything? submit button ... But they were better than And , we didn ’ t have client a green screen right? side issues to deal with .
Other than IE at least . # winning But , the UIs Again . weren ’ t very rich . Forms with holes . Request / response paradigm .
And many people had Sorry . experienced rich UIs . Good for us ... But then what happened? less good for users . And of course ...
Ajax . Enter the era of RIA . The “ husky ” client . Easy distribution , rich Best of both worlds? ( enough ) interfaces .
Sensing a theme here ... sylvar And we ’ re heading Back and forth . there again . They ’ re getting Now browsers are the PC . more powerful .
And we ’ re asking V 8, Nitro , J ä gerMonkey . them to do more . Web Workers , Web HTML 5. Sockets , O ffl ine . REST . JavaScript .
First class citizen . We ’ re writing more of it too! New possibilities . And we have options . We can break out of the Click and wait? request / response approach . http: // alexmaccaw . co . uk / posts / async_ui
Enter asynchronous UIs . Why? Well , perceived Performance matters . performance at least . Amazon: 100 ms delay Milliseconds matter . reduces sales by 1%.
400 ms on Yahoo!? 5-9% drop in tra ffi c . 500 ms extra on Google? Drops tra ffi c by 20%. http: // www . slideshare . net / stubbornella / designing - fast - websites - presentation It matters . Embraces what we ’ re doing .
Provide structure to all I know what some of that JavaScript . you are thinking ... “Bad developers will move heaven and earth to do the wrong thing.” Anything but JavaScript . — Glenn Vanderburg Partial refreshes , Embrace it . JSON , services .
Takes it a step further . MVC . Decouple requests Non - blocking UI . from the UI . Render view on client . Push state to client .
Talk to server Update the UI , then tell asynchronously . the server about it . Wait . What? Things will go wrong! Yep . What about validation?
Server could reject Client side validation . the change . Need to validate on What if the server pukes? the server too ... Error handling . Parallel requests?
Try to navigate o ff gmail Pipeline ajax requests . with update pending ... But there are answers It isn ’ t perfect! to many issues . Why should we do this? Better user experience .
Uh no . Some things should Need *some* feedback . be synchronous! Gives us another tool .
How do we do it? The server . REST . FTW . Not request / response ... Finer grained .
May need support Jetty , Node , Socket . IO ... for web sockets . The client . State and view . Server communication Preload data . is asynchronous .
Update the client then tell Opposite of what we ’ ve the server what happened . done for years . Hmm , managing state on Can be . the client sounds hard . JavaScript is o 8 en ... Probably want to lacking in structure . use a library!
Typically built around Backbone . js , Spine . js , MVC or MVP . Sammy . js , KnockoutJS ... How do I know List grows daily . which one to use? Play with them . Compare them . https: // github . com / addyosmani / todomvc
So what does this look like? Let ’ s look at Backbone . js . Backbone . js Very lightweight . As in ~5 KB compressed . ~1300 lines .
Fully documented . Isn ’ t a “ UI ” framework . Built for MVC Models , events , JavaScript applications . collections , views . Controllers , persistence . In fl uenced by Ruby on Rails .
Data lives in models . Not the DOM . Changes to models trigger Views are noti fi ed of said change events . changes to the model . No more fi nd stu ff and Update accordingly . change it - it just updates .
You ’ ll be coding to events . Backbone . Model Create models that extend Add properties and methods . Backbone . Model . get / set has clear toJSON Your models inherit a ton save of behavior . validate clone changedAttributes previous ...
Provides an empty And much more! validate method . You provide set () and save () halt on implementation . invalid data . Provides a way of setting Backbone . Collection default values .
Includes some fancy Sets of models . collection magic . Usually of a single Events fi re when items in model type . the collection change . Also when items are Borrows from added or removed . Underscore . js as well .
add / remove get Gain some ni 8 y sort iteration functions . pluck parse fetch Retrieve models via client And more . IDs or model ’ s ID . Provides a richer Collections can be ordered . comparotor concept .
Also adds a fetch to retrieve Provide a URL endpoint . collections from server . Backbone . View Convention . O 8 en used with a Not templates . template library .
Such as Mustache . js , Handle presentation . Haml - js , or Eco . this.el Linked to a DOM element . Can bind directly to an Defaults to an empty div . existing element .
Bind a view ’ s render object Instead of a series of to the change in a model . queries and DOM updates . Extend Backbone . View . Implement render . Return the right HTML . Update el with said HTML .
Model has toJSON() to Again , probably using a template library . feed data to template . Easy way to bind to Also gives an event hash . interesting events . {“eventType selector”: Selector is optional . “callback”}
Leave it o ff ? Binds to el . Backbone . Router Web apps should be The controller . linkable & bookmarkable . Connects state to Backbone . Router helps . URL hashes .
History API can handle Backbone fi lls in where much of what we ’ d want . browsers fall down . Connects and routes pages . Shocking . Works in conjunction with routes Backbone . history . navigate
saveLocation() Backbone . sync Model updates need to get When a model changes , to the server . Backbone informs server . sync(method, model, By default , makes a [options]) RESTful JSON request .
If call succeeds , client side Based on jQuery . model is updated . CRUD HTTP create POST method - CRUD . read GET update PUT delete DELETE model - the thing options - additional that changed . callbacks , ajax options .
Expects server to return Save is asynchronous . updated attributes as JSON . Free to bind to any of the Can override to use local ajax callbacks . storage , WebSockets , etc . There ’ s an existing local The server side . storage adapter . https: // github . com / jeromegn / Backbone . localStorage
POST / collection GET / collection Expects certain RESTful GET / collection / id endpoints to exist . PUT / collection / id DELETE / collection / id Backbone handles Endpoints should return model serialization . model as JSON . Putting it all together . Several sample apps .
todos . js http: // documentcloud . github . com / backbone / docs / todos . html Works like this:
Also an “ app ” level view . Notice it uses some jQuery! Not so hard! Wine Cellar . But we use jQuery . http: // coenraets . org / blog /2011/12/ backbone - js - wine - cellar - tutorial - part -1- getting - started /
How many of you You bet! use jQuery today? So do we . Rocking good library . Some would say it ’ s a bit heavyweight . Bob%Jagendorf
Like , say , the 1.7 deprecated a lot . jQuery core team . https: // groups . google . com / forum /# !topic / jquery - bugs - team /17 rGK 6 eAAxI / discussion http: // blog . jquery . com /2011/11/08/ building - a - slimmer - jquery / Are you using all of it? Probably not . Dragging along a lot of Is that an issue? excess baggage .
Recommend
More recommend
