Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying Modern Javascript

Demystifying Modern Javascript

Presentation from Laracon 2014

Tim Griesser

May 15, 2014
Tweet

More Decks by Tim Griesser

Other Decks in Programming

Transcript

  1. SPA Architecture SOLID Services REST Routes A̩̱̞ ̥͈͓̱͇̫̗ m͎ e̶̠̻s̨s͙̖

    ̵͍͈̖ o͙͚̫͙͖̯ͅ f̧̤ͅ ̯ j̨̩͔͓̠͎ Q̜u̳̞é̫͇r̮̙y̼̩̘̤͕̕ͅ ̖̩̦ ̹̺͚ ̹ ̰ ̱a̴̟n ͜ d ̪͜ ̘͓͍ j̷̗̦ a͟ ͈̙̗ v̙͖ͅ a̹̤̦s̵̹̙̱̘ c͏̰̱͖r͕͍͇̤̻̣ i ̯̩̹̮̻ p̮͖̤̭ t̻̭͓̫ ̩̬̙͜
  2. • Library, not a framework. 6.5k (min/gzip) ! • Minimal

    Set of data-structuring (models, collections) and UI (views, urls) primitives for web applications ! • Very opinionated regarding REST-ful Models & Syncing ! • Not-so-much on Views, UI, Project Structure ! • Awesome “real world apps” list
  3. • Framework for Building “Ambitious Web Applications” ! • Most

    similar to Laravel, batteries included approach making decisions for you, so you’re left implementing what makes your app different ! • More of a community ! • Larger footprint (71k min/gzip)
  4. • HTML, “enhanced” for modern browsers ! • Inline declarations

    in HTML, encapsulating style & behavior in custom elements (directives) ! • Dependency Injection / Inversion of Control, Promises ! • Lots of resources, quickly gaining momentum ! • 2.0 will be more “Web Component” based
  5. • Focus on Immutability: state is the root of all

    evil in web applications ! • JSX (compile to javascript HTML) ! • Virtual DOM ! • Comparable to angular, less conceptual overhead ! • Production use by Facebook, Instagram
  6. “left of the dot” user.sayName() / / this === user

    user.friends.add() / / this === user.friends console.log('Hi.') / / this === console someFunction() / / global
  7. “left of the dot” Passing a function as an argument

    loses its value of "this" user.create(name, callback);
  8. functions are constructors var  User  =  function(name)  {    

     this.name  =  name;   };   User.prototype.sayName  =  function()  {      alert("Hello  "  +  this.name);   };   ! var  user  =  new  User("Tim");
  9. functions are constructors class  User  {   !    public

     function  __construct($name)  {          $this-­‐>name  =  $name;      }   !    public  function  sayName()  {          echo("Hello  "  .  $this-­‐>name);      }   }   ! var  user  =  new  User("Tim");
  10. functions are also objects User.name  =  "Not  Tim";   !

    console.log(User.name)  //  "Not  Tim"   ! var  user  =  new  User("Tim");   ! console.log(user.name)  //  "Tim"
  11. If you’re ever confused about what’s what… ! Remember: Just

    throw a debugger in there and take a look around
  12. var  User  =  function(name)  {      this.name  =  name;

      };   ! User.prototype.nicknames  =  [];   ! User.prototype.sayName  =  function()  {      alert("Hello  "  +  this.name);   };   !
  13. var  user  =  new  User("Timothy");   ! user.nicknames.push("Tim");   !

    console.log(user.nicknames);  //  ['Tim']   ! var  otherUser  =  new  User("Joseph");   ! otherUser.nicknames.push("Joe");   ! console.log(otherUser.nicknames);  //  ['Tim',  'Joe']
  14. var  Account  =  Ember.Object.extend({      users:  []   });

    var  Account  =  Backbone.Model.extend({      users:  []   });
  15. var  account  =  new  Account();   ! account.users.push('Name');   !

    var  anotherAccount  =  new  Account();   ! anotherAccount.users  //  ['Name'];
  16. Always create objects & arrays inside a constructor, almost never

    put them on a prototype ! Again, use the debugger!
  17. Avoid throwing JS in your view partials ! Single JS

    file, split up functionality based on URL MVC + JS
  18. Photos & Links • Links: • https://developer.chrome.com/devtools/docs/authoring-development-workflow • https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks •

    http://superherojs.org • http://browserify.org/ • https://github.com/aaronlord/laroute • https://github.com/node-inspector/node-inspector • Photos: • https://www.flickr.com/photos/xjrlokix/8192703395/in/photostream/ • http://www.fastcolabs.com/3015764/sticker-styling-14-laptop-covers-from-tech-innovators