JavaScript Libs Very Quick Guide

Simple introduce JavaScript libs and frameworks.

Transcript

1. Albert Shih
2.  jQuery  jQuery UI  YUI  NodeJS  Mojito  CoffeeScript  Underscore.js  RequireJS  Backbone.js  Knockout.js  Ember.js  Angular.js
5. Size 92.6 KB
6. What is jQuery?
7. A fast and concise Javascript Library.
8. Easier to write jQuery than pure JavaScript
9. divs = document.getElementByTagName(‘div’); for(int i = 0; I < divs.length; i++){ div[i].style.display = ‘none’; } JavaScript $(“div”).hide(); jQuery
10. 1. Find some HTML 2. Do something to it jQuery Philosophy
11. Find $(“div”) Let’s find some element
12. Give $() a Selector $(“#myId”) $(“.myClass”) $(“table”)
13. Do .addClass(“redbox”); Find $(“div”)
15. HTML <div id="notMe" class="default"><p>id="notMe"</p></div> <div id="myDiv" class="default"> id="myDiv" </div> jQuery $("#myDiv").css("border","3px solid yellow");
16. Chain Method
17. $(“div”).addClass(“redbox”) .fadeOut();
18. Events
19. When a button is clicked, do something. $(“button”).click(function(){ something(); });
20. Setup a custom event and trigger it. $(“button”).bind(“expand”, function(){ something(); }); $(“button:first”).trigger(“expand”);
22. HTML <p>Click or double click here</p> jQuery $("p").bind("click", function(event){ var str = "(" + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happend: " + str);}); $("p").bind("dblclick", function(){ $("span").text("Double-click happend: " + this.nodeName); }); Demo
24. Effects Type: 1. Hide and Show 2. Fade In and Out 3. Slide Up and Down
26. HTML <p>If you click on this paragraph, you'll see it just fade away.</p> jQuery $("p").click(function(){ $("p").fadeOut("slow"); }); Demo
28. The functions and methods therein allow us to load data from the server without a browser page refresh.
30. HTML <button type="button" name="toggle">Get Image</button> <div id="images"></div>
31. jQuery $('button[name="getImage"]').click(function(){ $.getJSON("http://api.flickr.com/services/feeds /photos_public.gne?jsoncallback=?", { tags: "cat", tagmode: "any", format: "json" }, function(data){ $.each(data.items, function(i, item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if(i == 3) return false; });}); }); Demo
32. More Demos
33. Selector http://happybean.null.tw/JSLibDemos/jQuery/Selector/Selectors.html Effect http://happybean.null.tw/JSLibDemos/jQuery/Effect/Effect.html Event http://happybean.null.tw/JSLibDemos/jQuery/Events/EventHandling.html Ajax http://happybean.null.tw/JSLibDemos/jQuery/Ajax/Ajax.html
34. Reference
35. jQuery http://jquery.com/ “jQuery Essentials” Slide http://www.slideshare.net/1Marc/jquery-essentials
37. Size 202 KB
39. jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header .ui-widget-content
40. Add hover by grabing buttons with .ui-state-default and attach hover class. UI Classes Quick Tip $(“.ui-state-default”).hover( function(){ $(this).addClass(“ui-state-hover”);}, function(){ $(this).removeClass(“ui-state-hover”);} );
41. Customize your CSS with ThemeRoller
43.  Draggable  Droppable  Sortable  Resizeable  Selectable
44. $(function() { $( "#draggable" ).draggable(); }); Draggable Demo
46.  Color animations  Animated add/remove class  Effects like shake and drop  Easing
47. Color animations $(…).animate({ backgroundColor: “#68BFEF” }, 500); Demo
49. HTML <p>Date: <input type="text" id="datepicker"></p> jQuery $(function() { $( "#datepicker" ). datepicker(); }); Demo
50. HTML <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> ... <li><a href="#tabs-3">Aenean lacinia</a></li>... </ul> <div id="#tabs-1"> ...</div> ... <div id="#tabs-1"> ...</div>... </div> jQuery $(function() { $( "#tabs" ). tabs(); }); Demo
51. Reference
52. jQuery UI http://jqueryui.com/ “jQuery UI and Plugins” Slide http://www.slideshare.net/1Marc/jquery-ui-and-plugins
54. Size 79 KB
56. <script src="jquery-1.7.2.js"></sript> //Core Module <script src="jquery.ui.core.js"></script> //Module 1 <script src="jquery.ui.widget.js"></script> //Module 2 <script src="jquery.ui.accordion.js"></script> //Module 3 Simple JS Modularize
57. Big problems  Global variable  Maintainability  Dependencies load order  Module Efficiency
59. YUI.add (“editor”, function(Y) { }, require: [“ModuleNeed 1”, “ModuleNeed 2”]); //Y means YUI instance function Editor() { //Object constructor } //Push constructor to global Y.Editor = Editor;
61. Code will execute when called, not executed when push into pages. Isolate codes, ignore dependencies order
63. Just assign the module name then use it. YUI().use (“editor”, function(Y){ //This callback means all modules is loaded //Can create Y.editor object }); var editor = new Y.Editor();
65. Get YUI modules loaded in one HTTP request from Yahoo!'s CDN <script src="http://yui.yahooapis.com/combo? <Module1 File Path> & <Module2 File Path> & <Module3 File Path> & … </script>
67. In very short code to load module YUI.use(‘datatable’, function(Y) { alert(Y.Datatable); }); Disperse modules into three request and download parallel:  YUI Seed  CSS  Javasceipt Modules
68. 323MS YUI.use(‘datatable’)
69. Reference
70. YUI http://yuilibrary.com/ “YUI IS SEXY” Slide http://www.slideshare.net/josephj/yui-is-sexy-for-jsdctw
73. Server-side JavaScript Built on top of Chrome V8
75. Not a web framework Non blocking I/O Not written in JavaScipt itself. It’s in C
77. Node’s goal is to provide an easy way to build scalable network programs. -nodejs.org
79. Keep slow operations from blocking other operations.
81.  JSON APIs  AJAX Sigle Page Application (Gmail etc.)  Unix Tool  Streaming Data  Real Time Application (Twitter etc.)
82. var data = file.read(‘file.txt’); doSomethingWith(data); Traditional I/O Something is not right here
83. var data = file.read(‘file.txt’); //zzZZzzZZ doSomethingWith(data); Fail!! Don’t waste those cycles!
84. File.read(‘file.txt’, function(data) { doSomethingWith(data); }); doSomethingElse(); Async I/O No need to wait for the disk, Do something else meanwhile
85. Common JS Modules
86.  Server-side JavaScript applications  Command line tools  Desktop GUI-based applications  Hybrid applications (Titanium, Adobe AIR)
87. hello.js exports.world = function(){ return ‘Hello World’; }; main.js var hello = require(‘./hello’); var sys = require(‘sys’); sys.puts(hello.world()); Command $node main.js Hello World
89. Browser JS: XMLHttpRequest CommonJS: Telnet FTP NTP SMTP Sockets …
91. var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/'); Command % node example.js Server running at http://127.0.0.1:1337/
93. Reference
94. Node.js http://nodejs.org/ “Node.js A Quick Tour” Slide http://www.slideshare.net/the_undefined/nodejs-a-quick-tour-ii
97. Now, we as developers need to support multiple devices such as Tablets, Smartphone etc…
99. 1 application requires = Objective C Java C .NET C++ This is slow, time consuming and expensive!!
101. Mix HTML5, NodeJS, CSS3, JavaScript
103.  One type of cocktails  An environment agnostic, MVC web framework
105. 1 Language / Codebase for all devices. Optimized high quality experience views for any device with any screen size
107. PHP etc. Server JS Client
109. JS Client Server JS Common JS
111. Mojito Express Connect Mustache YUI3 JavaScript Runtime (NodeJS or Browser)
113. A Mojit is an independent unit of execution that can be used inside a Mojito application. Controller Model View [HTML] Binder [JS] MVC
114. Reference
115. Mojito http://developer.yahoo.com/cocktails/mojito/ “Mojito and Cocktails” Slide https://speakerdeck.com/u/ddsakura/p/mojito-and-cocktails “Yahoo Mojito” Slide http://www.slideshare.net/davidshariff/mojito-12990395
119. “It’s just Javascript”
120. Just written in different syntax
121. borrowed from Python, Ruby and Haskell
122. would be compiled into JavaScript code
123. JSLint Compatible
124. So, it’s still JavaScript
125. What can you do with CoffeeScript?
126. Anything which JavaScript can do.
127. front-end, back-end, mobile… etc..
128. but with less line of code ~30% off
130. NPM, the “Node package manager” > curl http://npmjs.org/install.sh | sh
132. > npm install coffee-script > coffee - v CoffeeScript version 1.1.3
134. Compile .coffee into .js > coffee ––watch ––compile app.coffee
136. No { } Indentations rule! whitespace matters!
137. ( ) is not necessary.
138. No trailing semicolon.
139. Return is not necessary. everything is an expression
140. No { }, ( ), and ; If(age > 20){ vote(); } //JavaScript If age > 20 vote() //CoffeeScript
141. var say_hello; say_hello = function(guest1, guest2){ if(guest2 == null){ guest2 = “Mary” } return “Hello” + guest1 + “and” + guest2; }; say_hello(“happybean”); //JavaScript say_hello = (guest1, guest2 = “Mary”) -> “Hello #{guest1} and #{guest2} say_hello “happybean” //CoffeeScript Function
142. Reference
143. CoffeeScript http://coffeescript.org/ Happy Programming with CoffeeScript https://speakerdeck.com/u/eddie/p/happy-programming- with-coffeescript
145. Size 12.5 KB
147. Over 70 Functions…
148. Collections- each - map - reduce - reduceRight - find - filter - reject - all - any - include - invoke - pluck - max - min - sortBy - groupBy - sortedIndex - shuffle - toArray - size Arrays - first - initial - last - rest - compact - flatten - without - union - intersection - difference - uniq - zip - indexOf - lastIndexOf - range Functions - bind - bindAll - memoize - delay - defer - throttle - debounce - once - after - wrap - compose Objects - keys - values - functions - extend - pick - defaults - clone - tap - has - isEqual - isEmpty - isElement - isArray - isObject - isArguments - isFunction - isString - isNumber - isFinite - isBoolean - isDate - isRegExp - isNaN - isNull - isUndefined Utility - noConflict - identity - times - mixin - uniqueId - escape - result - template Chaining - chain - value
149. JavaScript Utility Library  Complementary  Unobtrusive  Flexible
150. Complementary
151. Functional Support  Collections  Arrays  Functions
152. Unobtrusive
153. Plays nice with others  Does not modify built-in object  Delegates to built-in functions if present
154. Flexible
155.  Functional or Object-oriented style  Chainable
157. Object-Oriented Style: _(stooges).pluck(‘name’) Functional Style: _.pluck(stooges , ‘name’) var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}]; => ["moe", "larry", "curly"]
158. What does it do?
159.  Fills in holes in the language  Provides functional support  Makes you happier writing JavaScript
161.  Functions are objects  Functions are values  Can be assigned to a variable  Can be passed to another function as an argument  Can be returned by a function
163. Using functions as a mapping from one value to another value
164. Reference
165. Underscore.js http://underscorejs.org/ “Underscore.js an introduction” Slide http://www.slideshare.net/seb_m/underscorejs-10282848 “Introduction to Underscore.js” Slide http://www.slideshare.net/MetaThis/introduction-to- underscorejs-11622531
167. Size 14 KB
169.  AMD Implementation  Asynchronous resource loader
171. Define(id?, dependencies?, factory);
173. define( ‘account’, [‘service’, ‘pubsub’], function (service, pubsub){ //do something //export public APIs return{ signin: function() { /*… */ }, signout: function() { /*… */ }, … }; } };
175. <script data-main= “scripts/main” src=“scripts/require.js”></script>
176. require([“app”], function(app) { app.init(); });
177. define([“lib/account”, “lib/session”], function (account, session) { //do something return { init: function() { //init the application } }; } };
179. Main.js App.js Account.js Session.js Storage.js Crypt.js Xhr.js
181.  AMD  Path alias  Circular dependency  Plugins
183. require( [ ‘order! lib/jQuery/jquery-min’ , ‘order! lib/underscore/underscore-min’ , ], function () { //This callback is called after the two libs finish loading. }
185.  No pollution to global scope  Everything is organized in module  Compile CoffeeScript on the fly  … etc
187.  Lots of modules  Lots of files  Lots of requests  Low performance
188. r.js
189.  Optimization tool  Pack all modules into one file  Minimize the JavaScript file
190. node r.js –o build.js
191. Reference
192. Require.js http://requirejs.org/ “Backbone.js X RequireJS Quick Guide” Slide https://speakerdeck.com/u/jaceju/p/backbonejs-x-requirejs- quick-guide “Module, AMD, RequireJS” Slide http://www.slideshare.net/othree/module-amd-requirejs
193. Frameworks
195. Size 16 KB
197. jQuery is cool but…
198. We have to store object information into the DOM
199. var list = “”; $.each(data, function (index, value){ list += “<li id=“\”item – “ + value.Id +”\”>” + value.Name + “</li>”; }); $(“ul”).append(list);
200. jQuery is cool but…
201. jQuery callback hell…
202. $getJSON(“/Items”, function(data) { ... $(“li”).click(function(){ … $post(“/Items”, (id:id), function(){ $this.fadeOut(function(){ $this.remove(); } } } }
203. “It’s all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks.”
204. So, what do we need?
205.  Abstraction  Decoupling UI from Data  No more callbacks
206. It exists and it’s called Backbone.js
208.  jQuery or Zepto  Underscore.js  Json2.js
210.  Model providing key-value binding, custom events  Connects Model and Collection over a RESTful JSON interface  Views providing declarative event handling  Collection with a rich API of enumerable function
211. MVC Model / Collection Template (View) View (Controller) Router
212. Model  Representing data (auto-generated)  Handling persistence  Throws events  Reusable
213. Model  Fetch  HTTP GET /url  Save(new)  HTTP POST /url  Save  HTTP PUT /url/id  Destroy  HTTP DELETE /url/id
214. var Item = Backbone.Model.extend({ idAttribute: “Id”, urlRoot: “/Items” }); var item = new Item() item.set([ Name: “happybean” ]); //trigger change Item.save(); //trigger sync
215. Collection A list of models Underscore Methods
216. var Items = Backbone.Collection.extend({ model:Item, url: “/Items” });
217. View  Manipulates the DOM  Delegates DOM events  Has a Model / Collection
218. View View (Model) View (Collection)
219. var Items = new Items(); var listView = new ListView({ collection:items }); Items.fetch();
220. Template (Underscore.js)
221. Compiles JavaScript templates into functions that can be evaluated for rendering.  Mustache  jQuery-tmpl
222. <script type=“text/template” id=“item-template”> <li> <%= Name %> </li> </script>
223. var ItemView = Backbone.View.extend({ … templates: _.template($(“#item-templates).html()), … render:function(){ this.$el.html(this.templates(this.model.toJSON())); } … });
224. Router Maps urls to function Enable history/bookmarking
225. varAppRouter = Backbone.Router.extend({ routes:{ "":"initialize“ }, initialize:function(){ … } });
226. Utilities History Sync Utility
227. Router View Templates Model/Collection Data Source
228. Pros & Cons
229. Pros  Strong community and lots of momentum.  Underscore.js (which it uses heavily) is also a great framework.
230. Cons  Lacks strong abstractions and leaves something to be desired.  The entire framework is surprisingly lightweight and results in lots of boilerplate.  The larger an application becomes, the more this becomes apparent.
231. Reference
232. Backbone.js http://documentcloud.github.com/backbone/ “Client Side MVC with Backbone.js” Slide http://www.slideshare.net/iloveigloo/clientside-mvc-with- backbonejs
234. Size 41 KB
235. Key Concepts
236.  Declarative Binding  Automatic UI Refresh  Dependency Tracking  Templating  MVVM-pattern
237. Decorative Bindings
238. Easily associate DOM elements with model data using a concise, readable syntax
239. Automatic UI Refresh
240. When your data model's state changes, your UI updates automatically
241. Dependency Tracking
242. Implicitly set up chains of relationships between model data, to transform and combine it
243. Templating
244. Quickly generate sophisticated, nested UIs as a function of your model data
245. MVVM Pattern
246.  Model Defines the data structure  ViewModel Adapts the model for presentation  View Presents the data in the UI
247. ViewModel View Model Commands Binding
249.  Initialization of observable properties name = ko.observable(“Jon”); age = ko.observable(24);  Getter and setter are automatically generated for the properties name() //print “Jon” name(“Robert”) //sets name to “Robert”
251. View <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
252. View Model var ViewModel = function(first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); , this); }; ko.applyBindings(new ViewModel("Planet", "Earth"));
253. Pros & Cons
254. Pros  Binding support  Great documentation and amazing tutorial system.
255. Cons  Awkward binding syntax and lacks a solid view component hierarchy.
256. Reference
257. Knockout.js http://knockoutjs.com/ “Knockout” Slide http://www.slideshare.net/jmkristiansen/knockout-9018652
258. ember
259. Size 154 KB
260. Write dramatically less code with Handlebars templates that update automatically when the underlying data changes.
261. Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.
262. Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done— fast.
263. Key Concepts
264.  Flexible, observable, extensible objects  No routing mechanism  Unified App namespace  No explicit Models and Controllers
265. Features
266.  Data bindings  Computed properties  Auto-updated templates
267. Data Bindings
268. MyApp.president = Ember.Object.create({ name: “Barack Obama” }); MyApp.country = Ember.Object.create({ presidentNameBinding: 'MyApp.president.name' }); // Later, after Ember has resolved bindings... MyApp.country.get('presidentName'); // "Barack Obama"
269. Computed Properties
270. MyApp.president = Ember.Object.create({ firstName: “Barack”, lastName: “Obama”, fullName: function() { return this.get(‘firstName’) + ‘ ‘ + this.get(‘lastName’); //Call this flag to mark the function as a properties }.property() }); MyApp.president.get(‘fullName’); //Barack Obama
271. Auto-updating Templating
272. <script type="text/x-handlebars"> The President of the United States is {{MyApp.president.fullName}}. </script>
273. Pros & Cons
274. Pros  Extremely rich templating system with composed views and UI bindings
275. Cons  Relatively new. Documentation leaves lots to be desired.
276. Reference
277. Ember.js http://emberjs.com/ “Ember.js” Slide https://speakerdeck.com/u/galfert/p/emberjs
279. Size 74.2 KB
280. Why Angular?
281. Increase the level of abstraction Helps to write less code Make your app testable Works well together with other libs Helps to design and maintain big apps
282. What is Angular?
283. It’s not a library –no DOM manipulation, no widgets
284. It’s not a framework
285. Angular is to dynamic documents What HTML is to static documents
286. Angular is what HTML would have been if it was designed for building web - applications
287. What is Angular ? – with respect to jQuery?
288. Angular and jQuery are made for each other
289. jQuery is for manipulation DOM and Angular is more for web-app frameworks with data binding
290. Angular uses jQuery internally to manipulate the DOM
291. Angular: high level app flow
292. jQuery: low level DOM manipulation
293. How Angular?
294. Template View Model Compile Continuous Updates Model is Single-Source-of-Truth View updates Models Models updates View
295. Demo
296. Pros & Cons
297. Pros  Very well thought out with respect to template scoping and controller design  Has a dependency injection system (IOC)  Supports a rich UI-Binding syntax to make things like filtering and transforming values a breeze
298. Cons  Codebase appears to be fairly sprawling and not very modular.  Views are not modular enough
299. Reference
300. Angular.js http://angularjs.org/ “Angularjs Talk” Slide http://www.slideshare.net/manuelkiessling/angularjs-talk-at- the-november-meetup-of-the-berlinjs-user-group
301. JS MVC Frameworks Compare
302. Framework UI Bindings Composed Views Web Presentation Layer Plays Nicely With Others Backbone.js ✗ ✗ ✓ ✓ Knockout.js ✓ ✗ ✓ ✓ Ember.js ✓ ✓ ✓ ✓ Angular.js ✓ ✗ ✓ ✓
303. Reference
304. The Top 10 Javascript MVC Frameworks Reviewed http://codebrief.com/2012/01/the-top-10-javascript-mvc- frameworks-reviewed/
305. Thank you