0
JavaScript
HELLO                     my name is              @AARONIUS   · AARONHARDY.COMSoftware Engineer, Adobe Digital Marketing S...
No hidden agenda
Single-Page Apps
TabBar  CurrencyFormatter   EventDispatcher        List     ArrayCollection                 DataGroupDragManager          ...
AccountInfo                                   (Group)                   Header                  (Group)                   ...
?                  Links          ?          Basic Form ElementsDiv          Image      ?               Bulleted Lists    ...
<html>    <head>        <script>            buckets of vomit            buckets of vomit            buckets of vomit      ...
•   IDEs•   MVC•   Widgets/Components•   Dependency management•   DOM manipulation•   Templating•   Testing•   Utilities• ...
Quality ide
Libraries
Rolling your own
jquery    underscore.js     backbone.js      requirejsAll MIT license (+ other options) and on GitHub
Learn Javascript
Never build large apps The secret to building large apps is NEVER build large apps. Break up your applications into small ...
Admit what you      don’t knowThe key is to acknowledge from the start that youhave no idea how this will grow. When you a...
Add "use strict"; before code or at beginning offunction to help decrapify your code.• Eliminates pitfalls by raising erro...
JSLint or JSHint.•   Run in IDE.•   Run on command line.•   Run in build scripts.•   Copy-paste into web interface.•   Use...
General community style:• Names of directories and files shall be lowercase and  hyphens shall be used to separate words.•...
Loose typing == more testing!•   JsTestDriver•   QUnit•   Jasmine•   Vows•   …and bucket-loads more
jquery
• Not an application framework!• Abstracts the DOM    • Style    • Position    • Behavior    • Animation    • Creation/Rem...
Usage by Top Siteshttp://trends.builtwith.com/javascript/jQuery
• Performance-tuned servers• Allows browser to have more concurrent connections• Cross-site caching
Toolbox of array, object, and function manipulationutilities.var names = _.pluck(       [{name: moe, age: 40}, {name: larr...
Old-schoolvar tweetTemplate =  +       <div> +               <div style="float: left"> +                      <img src=" +...
Old-school• HTML buried in logic (hard to re-skin)• Concatenation/escaping takes time and is error-prone• IDE might not co...
New-school<script type="text/template" id="tweet-template">       <div>               <div style="float: left">           ...
•   Mustache.js•   Handlebars.js•   Jade•   Eco•   …and bucket-loads more.Underscore.js templating is one of the best (tho...
backbone
Object A passes a functionto object B and tellsobject B to call thefunction when Xoccurs. When Xoccurs, object B calls the...
backbone.events
Dad:var baby = new Baby();var changeDeuceTrap = function() {       baby.deuces = 0;       baby.cakeHoleShut = true;};baby....
Mix into any object or classvar baby = new Baby();baby = _.extend(baby, Backbone.Events);baby.on(…);baby.trigger(…);
backbone.Model
Plain Old JavaScript Objectvar book = {       title: A Tale of Two Cities,       author: Charles Dickens,       genre: his...
Eventful Backbone.Modelvar book = new Backbone.Model({       title: A Tale of Two Cities,       author: Charles Dickens,  ...
Extending Backbone.Modelvar Book = Backbone.Model.extend({       …custom model logic…});var book = new Book({       title:...
PersistenceHTTP Method   URL         ActionGET           /books      Retrieve all booksGET           /books/10   Retrieve ...
Persistence (save)var Book = Backbone.Model.extend({       urlRoot: /books});var book = new Book({title: The Tragedy of th...
Persistence (fetch)var Book = Backbone.Model.extend({       urlRoot: /books});var book = new Book({id: 2});var fetchSucces...
MODEL   layersOpen characterOpenmagicWandOpen    colorOpen     infoOpen
And more…• Validation• Extracting native object• Determine which attributes have changed• And bucket-loads more…
backbone.collection
Plain Old JavaScript Array:var books = [book1, book2, book3, book4];How can another object know when an item is added orre...
var goodEarth = new Backbone.Model();var books = new Backbone.Collection();books.on(add, function(book, books, options) { ...
Event Pass-throughvar books = new Backbone.Collection([taleOfTwoCities, goodEarth]);books.on(change:title, function(book, ...
Persistence (fetch)var Books = Backbone.Collection.extend({       model: Book,       url: /books});var books = new Books()...
Underscore mix-insvar titles = books.pluck(title);each(), reduce(), find(), filter(), reject(), shuffle(), without()and bu...
And more…• Sorting• Resetting• Retrieving model by id or index• Custom loading and parsing• …and bucket-loads more!
Backbone view
Stats        ModelTweetModel        Tweet        Tweet                 Tweet                Collection        Tweet       ...
var Tweet = Backbone.Model.extend({ …view logic… });var TweetRow = Backbone.View.extend({ …view logic… });var tweet = new ...
<script type="text/template" id="tweet-row-template">       <div style="float: left"><img src="<%= avatar %>"/></div>     ...
Backbone router
backbone extensions
requirejs
Must we be restricted to working inside a few monstrousspaghetti files? NO! Then why are they so prevalent?• “That’s the w...
Old school// What are the dependencies here!?// What if a new employee had to re-order for some reason!?<script   src="scr...
script8.js   script4.js   script3.js    script1.jsscript2.js                script10.js   script7.jsscript9.js   script5.j...
ServerJS       CommonJS            Module                 Async module definition (AMD)                       RequireJS
book.jsdefine({    title: "My Sisters Keeper",    publisher: "Atria"});bookshelf.jsdefine([       book], function(book) { ...
index.html<!DOCTYPE html><html>        <head>                <title>RequireJS Example</title>                <script data-...
templates/book.tpl.html<span class="label">Title:</span><span class="value"><%= title %></span><br/><span class="label">Au...
book-view.jsdefine([       backbone, underscore, text!templates/book.tpl.html], function(Backbone, _, template) {       re...
bookshelf-view.jsdefine([       backbone,       underscore,       book-view], function(Backbone, _, BookView) {       retu...
requirejs optimization
Thank you!  @Aaroniusaaronhardy.com
encore(stuff I fit in if time allows)
Persistence with custom url pattern:var Book = Backbone.Model.extend({       urlRoot: /books,       url: function() {     ...
var App = Backbone.View.extend({       initialize: function() {               this.render();       },       render: functi...
var DocumentView = Backbone.View.extend({       events: {               "dblclick"                : "open",               ...
<script type="text/javascript">       $(function() {               var AppRouter = Backbone.Router.extend({               ...
<script type="text/javascript">$(function() {       var AppRouter = Backbone.Router.extend({               routes: {      ...
var AppRouter = Backbone.Router.extend({       routes: {               ":product/:attribute/:value": "showProduct"       }...
Fragment Identifier• Using URLs in unintended ways• Dependent on JavaScript• Controversial• Used by many popular sitespush...
JavaScript for Flex Devs
JavaScript for Flex Devs
JavaScript for Flex Devs
JavaScript for Flex Devs
Upcoming SlideShare
Loading in...5
×

JavaScript for Flex Devs

9,561

Published on

JavaScript for Flex Devs
Presented by Aaron Hardy (http://aaronhardy.com) at 360|Flex 2012 in Denver, CO.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,561
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
40
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • Is the product part of a larger suite? What is the rest of the suite using?How hard would it be for us to refactor to another library?Is it a fad or popular for good reason?What’s the community like?How open-source is it?What’s the learning curve?How easy is it to hire developers that want to work with it?
  • How to handle many templates.
  • MV* Application FrameworkNon-prescriptive1200 lines of code (with comments)Extensible
  • Like EventDispatcher
  • Like [Bindable] model
  • Like ArrayCollection
  • Similar to PropertyChangeEvent
  • Case Study: Update view when tweet is sent
  • Case Study: Update view when tweet is sent
  • Significance of this.el
  • Kevin Dangoor
  • Transcript of "JavaScript for Flex Devs"

    1. 1. JavaScript
    2. 2. HELLO my name is @AARONIUS · AARONHARDY.COMSoftware Engineer, Adobe Digital Marketing Suite We enable management, measurement, execution, and optimization of digital advertising and marketing.
    3. 3. No hidden agenda
    4. 4. Single-Page Apps
    5. 5. TabBar CurrencyFormatter EventDispatcher List ArrayCollection DataGroupDragManager ToggleButtonBar Panel NumericStepper Slider ViewStack AccordionBindable DataGrid Effects
    6. 6. AccountInfo (Group) Header (Group) Menu (ToggleButtonBar) Main Biography(Application) (Group) Artist (Group) Similar Artists (List) Music Discography (ViewStack) (DataGroup) Discussion (DataGroup)
    7. 7. ? Links ? Basic Form ElementsDiv Image ? Bulleted Lists ? ? Span ?
    8. 8. <html> <head> <script> buckets of vomit buckets of vomit buckets of vomit buckets of vomit buckets of vomit </script> </head> <body> buckets of vomit buckets of vomit buckets of vomit buckets of vomit buckets of vomit </body></html>
    9. 9. • IDEs• MVC• Widgets/Components• Dependency management• DOM manipulation• Templating• Testing• Utilities• JavaScript + HTML + CSS
    10. 10. Quality ide
    11. 11. Libraries
    12. 12. Rolling your own
    13. 13. jquery underscore.js backbone.js requirejsAll MIT license (+ other options) and on GitHub
    14. 14. Learn Javascript
    15. 15. Never build large apps The secret to building large apps is NEVER build large apps. Break up your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application. – Justin Meyer
    16. 16. Admit what you don’t knowThe key is to acknowledge from the start that youhave no idea how this will grow. When you acceptthat you don’t know everything, you begin todesign the system defensively.– Nicholas Zakas
    17. 17. Add "use strict"; before code or at beginning offunction to help decrapify your code.• Eliminates pitfalls by raising errors• Improves JS engine optimization• Prohibits syntax reserved for future JS versions* Won’t be used in examples to save slide space
    18. 18. JSLint or JSHint.• Run in IDE.• Run on command line.• Run in build scripts.• Copy-paste into web interface.• Use flags for configuration.
    19. 19. General community style:• Names of directories and files shall be lowercase and hyphens shall be used to separate words.• Variable names shall be camelCase.• Classes (functions) to be instantiated shall start with a capital letter.• Members intended to be private shall be prefixed with an underscore.
    20. 20. Loose typing == more testing!• JsTestDriver• QUnit• Jasmine• Vows• …and bucket-loads more
    21. 21. jquery
    22. 22. • Not an application framework!• Abstracts the DOM • Style • Position • Behavior • Animation • Creation/Removal• AJAX requests• Utilities for objects, arrays, strings, etc.• “Framework” for UI widgets and utilities
    23. 23. Usage by Top Siteshttp://trends.builtwith.com/javascript/jQuery
    24. 24. • Performance-tuned servers• Allows browser to have more concurrent connections• Cross-site caching
    25. 25. Toolbox of array, object, and function manipulationutilities.var names = _.pluck( [{name: moe, age: 40}, {name: larry, age: 50}], name);var person = _.extend({name: moe}, {age: 50});var uniques = _.union([1, 2, 3], [101, 2, 10], [2, 1]);And bucket-loads more…
    26. 26. Old-schoolvar tweetTemplate = + <div> + <div style="float: left"> + <img src=" + avatar + "/> + </div> + <div style="margin-left: 60px"> + <p> + username + </p> + <p> + text + </p> + </div> + <div>;
    27. 27. Old-school• HTML buried in logic (hard to re-skin)• Concatenation/escaping takes time and is error-prone• IDE might not code-hint or color-code properly• Boring and tedious
    28. 28. New-school<script type="text/template" id="tweet-template"> <div> <div style="float: left"> <img src="<%= avatar %>"/> </div> <div style="margin-left: 60px"> <p><%= username %></p> <p><%= text %></p> </div> </div></script><script> var tweet = {avatar: aaronius.jpg, alias: @Aaronius, text: Honey roasted peanuts rock my sox.}; var template = _.template($(#tweet-template).html()); var html = template(tweet); var element = $(html);</script>
    29. 29. • Mustache.js• Handlebars.js• Jade• Eco• …and bucket-loads more.Underscore.js templating is one of the best (though not asfull-featured) and is a dependency of Backbone.js. You canuse any templating engine.
    30. 30. backbone
    31. 31. Object A passes a functionto object B and tellsobject B to call thefunction when Xoccurs. When Xoccurs, object B calls thefunction.
    32. 32. backbone.events
    33. 33. Dad:var baby = new Baby();var changeDeuceTrap = function() { baby.deuces = 0; baby.cakeHoleShut = true;};baby.on(turdDropped, changeDeuceTrap);Baby:this.trigger(turdDropped);
    34. 34. Mix into any object or classvar baby = new Baby();baby = _.extend(baby, Backbone.Events);baby.on(…);baby.trigger(…);
    35. 35. backbone.Model
    36. 36. Plain Old JavaScript Objectvar book = { title: A Tale of Two Cities, author: Charles Dickens, genre: historical, publisher: Chapman & Hall};How can another object know when one of book’s valueschanges? It can’t!
    37. 37. Eventful Backbone.Modelvar book = new Backbone.Model({ title: A Tale of Two Cities, author: Charles Dickens, genre: historical, publisher: Chapman & Hall});book.on(change:genre, function(model, genre) { alert(genre for + model.get(title) + changed to + genre);});book.set({genre: social criticism});
    38. 38. Extending Backbone.Modelvar Book = Backbone.Model.extend({ …custom model logic…});var book = new Book({ title: A Tale of Two Cities, author: Charles Dickens, publisher: Chapman & Hall});
    39. 39. PersistenceHTTP Method URL ActionGET /books Retrieve all booksGET /books/10 Retrieve book with id == 10POST /books Add a bookPUT /books/10 Update book with id == 10DELETE /books/10 Delete book with id == 10
    40. 40. Persistence (save)var Book = Backbone.Model.extend({ urlRoot: /books});var book = new Book({title: The Tragedy of the Commons});book.save();
    41. 41. Persistence (fetch)var Book = Backbone.Model.extend({ urlRoot: /books});var book = new Book({id: 2});var fetchSuccess = function() { alert(book.get(title));};book.fetch({success: fetchSuccess});
    42. 42. MODEL layersOpen characterOpenmagicWandOpen colorOpen infoOpen
    43. 43. And more…• Validation• Extracting native object• Determine which attributes have changed• And bucket-loads more…
    44. 44. backbone.collection
    45. 45. Plain Old JavaScript Array:var books = [book1, book2, book3, book4];How can another object know when an item is added orremoved from this array? It can’t!
    46. 46. var goodEarth = new Backbone.Model();var books = new Backbone.Collection();books.on(add, function(book, books, options) { alert(Book + book.get(title) + added at index + options.at + . + The collection now contains + books.length + models.);};books.on(remove, function(book, books, options) { alert(Book + book.get(title) + removed from index + options.index);}books.add(goodEarth);books.remove(goodEarth);
    47. 47. Event Pass-throughvar books = new Backbone.Collection([taleOfTwoCities, goodEarth]);books.on(change:title, function(book, title) { alert(Book title changed from + book.previous(title) + to + title);});goodEarth.set({title: Good Earth, The});
    48. 48. Persistence (fetch)var Books = Backbone.Collection.extend({ model: Book, url: /books});var books = new Books();books.fetch();
    49. 49. Underscore mix-insvar titles = books.pluck(title);each(), reduce(), find(), filter(), reject(), shuffle(), without()and bucket-loads more!
    50. 50. And more…• Sorting• Resetting• Retrieving model by id or index• Custom loading and parsing• …and bucket-loads more!
    51. 51. Backbone view
    52. 52. Stats ModelTweetModel Tweet Tweet Tweet Collection Tweet Tweet Tweet Tweet
    53. 53. var Tweet = Backbone.Model.extend({ …view logic… });var TweetRow = Backbone.View.extend({ …view logic… });var tweet = new Tweet({ avatar: aaronius.jpg, alias: @Aaronius, text: Honey roasted peanuts rock my sox.});var row = new TweetRow({ model: tweet});
    54. 54. <script type="text/template" id="tweet-row-template"> <div style="float: left"><img src="<%= avatar %>"/></div> <div style="margin-left: 60px"> <p><%= username %></p> <p><%= text %></p> </div></script>var TweetRow = Backbone.View.extend({ _template: _.template($(#tweet-row-template).html()), initialize: function() { this.render(); }, render: function() { this.$el.html(this._template(this.model.toJSON())); return this; }});
    55. 55. Backbone router
    56. 56. backbone extensions
    57. 57. requirejs
    58. 58. Must we be restricted to working inside a few monstrousspaghetti files? NO! Then why are they so prevalent?• “That’s the way JavaScript has been done in the past.”• “Loading many JavaScript files requires many HTTP requests resulting in longer load times.”• “Dependency management is hard in JavaScript.”We can do better!
    59. 59. Old school// What are the dependencies here!?// What if a new employee had to re-order for some reason!?<script src="script3.js"></script><script src="script1.js"></script><script src="script7.js"></script><script src="script6.js"></script><script src="script4.js"></script><script src="script5.js"></script><script src="script9.js"></script><script src="script8.js"></script><script src="script10.js"></script><script src="script2.js"></script>
    60. 60. script8.js script4.js script3.js script1.jsscript2.js script10.js script7.jsscript9.js script5.js script6.js
    61. 61. ServerJS  CommonJS  Module  Async module definition (AMD)  RequireJS
    62. 62. book.jsdefine({ title: "My Sisters Keeper", publisher: "Atria"});bookshelf.jsdefine([ book], function(book) { return { listBook: function() { alert(book.title); } };});
    63. 63. index.html<!DOCTYPE html><html> <head> <title>RequireJS Example</title> <script data-main="js/main“ src="js/libs/require.js"></script> </head> <body/></html>main.jsrequire([ bookshelf], function(bookshelf) { bookshelf.listBook();});
    64. 64. templates/book.tpl.html<span class="label">Title:</span><span class="value"><%= title %></span><br/><span class="label">Author:</span><span class="value"><%= author %></span><br/><span class="label">Genre:</span><span class="value"><%= genre %></span>
    65. 65. book-view.jsdefine([ backbone, underscore, text!templates/book.tpl.html], function(Backbone, _, template) { return Backbone.View.extend({ _template: _.template(template), initialize: function() { this.render(); }, render: function() { var nativeBook = this.model.toJSON(); var html = this._template(nativeBook); this.$el.html(html); return this; } });});
    66. 66. bookshelf-view.jsdefine([ backbone, underscore, book-view], function(Backbone, _, BookView) { return Backbone.View.extend({ … create child book views as necessary … … new BookView() … });});
    67. 67. requirejs optimization
    68. 68. Thank you! @Aaroniusaaronhardy.com
    69. 69. encore(stuff I fit in if time allows)
    70. 70. Persistence with custom url pattern:var Book = Backbone.Model.extend({ urlRoot: /books, url: function() { return this.urlRoot + ?id= + this.get(id); }})var book = new Book({id: 2});book.fetch();
    71. 71. var App = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { var tweet = new Tweet({ avatar: avatar.jpg, username: @Aaronius, text: Honey roasted peanuts rock my sox. }); var row = new TweetRow({ model: tweet }); this.$el.append(row.$el); return this; }});var app = new App({el: $(body)});
    72. 72. var DocumentView = Backbone.View.extend({ events: { "dblclick" : "open", "click .icon.doc" : "select", "mouseover .title .date" : "showTooltip" }, render: function() { ... }, open: function() { ... }, select: function() { ... }, showTooltip: function() { ... },});
    73. 73. <script type="text/javascript"> $(function() { var AppRouter = Backbone.Router.extend({ routes: { "shirt/id/:id": "showShirt" }, showShirt: function(id) { alert(Show shirt with id + id); } }); var appRouter = new AppRouter(); Backbone.history.start(); });</script><a href="#shirt/id/5">Shirt with id of 5</a><br><a href="#shirt/id/10">Shirt with id of 10</a><br><a href="#shirt/id/15">Shirt with id of 15</a><br>
    74. 74. <script type="text/javascript">$(function() { var AppRouter = Backbone.Router.extend({ routes: { ":product/:attribute/:value": "showProduct" }, showProduct: function(product, attribute, value) { alert(Show + product + where + attribute + = + value + .); } }); var appRouter = new AppRouter(); Backbone.history.start();});</script><a href="#shoe/size/12">Size 12 shoes</a><br><a href="#shirt/id/5">Shirt with id of 5</a><br><a href="#hat/color/black">Black hats</a>
    75. 75. var AppRouter = Backbone.Router.extend({ routes: { ":product/:attribute/:value": "showProduct" }});var MyView = Backbone.View.extend({ initialize: function(options) { options.router.on(route:showProduct, this._showProduct); } _showProduct: function(product, attribute, value) { alert(Update to show + product + where + attribute + = + value + .); }});var appRouter = new AppRouter();var view = new MyView({router: appRouter});Backbone.history.start();
    76. 76. Fragment Identifier• Using URLs in unintended ways• Dependent on JavaScript• Controversial• Used by many popular sitespushState aka HTML5 History• The bee’s knees• Allows changing of core url without changing pages• Long-term solution• Browser support lacking (guess which browser)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×