Demystifying Modern Javascript

Presentation from Laracon 2014

Transcript

2. “Modern”
3. Tim Griesser @tgriesser
4. Tim Griesser @tgriesser
5. Tim Griesser @tgriesser
6. Tim Griesser @tgriesser
8. ? ? ? ? ? ?
13. … but if it’s just JavaScript …
14. Single Page Web Apps
15. Single Page Web Apps
16. SPA Architecture
17. SPA Architecture Routes
18. SPA Architecture REST Routes
19. SPA Architecture SOLID REST Routes
20. SPA Architecture SOLID Services REST Routes
21. SPA Architecture SOLID Services REST Routes
22. SPA Architecture SOLID Services REST Routes
23. SPA Architecture SOLID Services REST Routes A mess of jQuery
24. SPA Architecture SOLID Services REST Routes A mess of jQuery
25. SPA Architecture SOLID Services REST Routes A mess of jQuery and javascript
26. 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̻̭͓̫ ̩̬̙͜
27. SPA Architecture
36. What is wrong with these JS people?
39. JavaScript can be incredibly subjective
40. JavaScript can be incredibly flexible
41. Frameworks
42. • 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
43. • 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)
44. • 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
45. • 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
46. 17,938 10,143 23,641 6,302
47. 17,938 10,143 23,641 6,302 Which should I use?
48. 17,938 10,143 23,641 6,302 Which should I use? (drumroll)
49. …it doesn’t matter
50. 1. Debugging Javascript 2. “this” 3. Other practical tips “The Rest of the Talk”
51. Alert Driven Development
52. console.log()
53. console.dir()
54. console.error() console.log + stack trace
55. debugger
56. breakpoint debugging
57. live editing
58. Backbone Debugger
59. Ember Debugger
60. Angular Debugger
61. React Debugger
63. https://developer.chrome.com/devtools/docs/authoring-development-workflow https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks
64. this
65. $(this)
66. this === context
67. “left of the dot” user.sayName() / / this === user user.friends.add() / / this === user.friends console.log('Hi.') / / this === console someFunction() / / global
68. “left of the dot” Passing a function as an argument loses its value of "this" user.create(name, callback);
69. “left of the dot” user.create("Snappy", user.greet);
70. “left of the dot” user.create("Snappy", usergreet);
71. “left of the dot” user.create("Snappy", function() { user.greet(); });
72. “left of the dot”
73. …except when it’s not fn.bind(context) fn.call(context, arg1, arg2…) fn.apply(context, [array || arguments])
74. arguments fn.apply fn.call call_user_func_array() func_get_args() call_user_func()
75. When would I ever use this?
76. Inheritance
77. Monkey-Patching
78. JavaScript Is Very Object Oriented
79. JavaScript Is Confusingly Object Oriented, with Prototypes
80. $.fn
81. $.fn === $.prototype
82. functions are constructors var  User  =  function(name)  {      this.name  =  name;   };   User.prototype.sayName  =  function()  {      alert("Hello  "  +  this.name);   };   ! var  user  =  new  User("Tim");
83. functions are constructors class  User  {   !    public  function  __construct($name)  {          $this-­‐>name  =  $name;      }   !    public  function  sayName()  {          echo("Hello  "  .  $this-­‐>name);      }   }   ! var  user  =  new  User("Tim");
84. “I can write OO code similar to PHP”
85. functions are also objects User.name  =  "Not  Tim";   ! console.log(User.name)  //  "Not  Tim"   ! var  user  =  new  User("Tim");   ! console.log(user.name)  //  "Tim"
86. If you’re ever confused about what’s what… ! Remember: Just throw a debugger in there and take a look around
87. Additional Practical Tips
88. Arrays are Objects, Objects are References
89. var  x  =  {};  
90. var  x  =  {};   $x        =  [];
91. var  x  =  {};   $x        =  [];
92. $x  =  new  StdClass();
97. var  User  =  function(name)  {      this.name  =  name;   };   ! User.prototype.nicknames  =  [];   ! User.prototype.sayName  =  function()  {      alert("Hello  "  +  this.name);   };   !
98. var  user  =  new  User("Timothy");   ! user.nicknames.push("Tim");   ! console.log(user.nicknames);  //  ['Tim']  
99. 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']
100. var  Account  =  Ember.Object.extend({      users:  []   }); var  Account  =  Backbone.Model.extend({      users:  []   });
101. var  account  =  new  Account();   ! account.users.push('Name');   ! var  anotherAccount  =  new  Account();   ! anotherAccount.users  //  ['Name'];
102. Always create objects & arrays inside a constructor, almost never put them on a prototype ! Again, use the debugger!
103. Scopes, References, GC can be really confusing ! Again: use the debugger!
106. Avoid throwing JS in your view partials ! Single JS file, split up functionality based on URL MVC + JS
107. (not just for node)
108. “My Front-End Toolkit” /watchify
109. “My Front-End Toolkit” /watchify
111. JavaScript, it’s not all terrible. ! The End ! @tgriesser
113. 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