Viewing Source on JavaScript Frameworks

Rediscovering the passion for digging into the source of the tools we use to create awesome web experiences and the design patterns that shape them.

Transcript

1. Viewing Source on JavaScript Frameworks
2. Who Am I? • Nick Hehr, a.k.a HipsterBrown • Product Designer • Front-End Developer • Forever Learner
3. What We’ll Cover • Discovery • Popular JS Frameworks • Source Code • JavaScript Design Patterns • Why?
4. Discovery
5. Remember when this was new?
7. It’s 2014: A Time of Powerful, Front-end Driven Apps
8. http://www.paulirish.com/2010/10-things-i-learned- from-the-jquery-source/
9. http://www.paulirish.com/2011/11-more-things-i- learned-from-the-jquery-source/ Great screenshotting tunes
10. http://quickleft.com/blog/18-surprises-from-reading- jquery-s-source-code
11. We’re not here for JQuery.
14. http://backbonejs.org
15. https://docs.angularjs.org/api
16. http://emberjs.com/api
17. Straight to the Source
18. http://backbonejs.org/docs/backbone.html
19. https://github.com/angular/angular.js/tree/master/src
20. https://github.com/emberjs/ember.js/tree/master/ packages
21. JavaScript Design Patterns
22. http://www.addyosmani.com/resources/ essentialjsdesignpatterns/book/
23. –Addy Osmani, Learning JavaScript Design Patterns “Design patterns are reusable solutions to commonly occurring problems in software design.”
24. Creational Design Patterns • Modules • Singletons • Factories • Mixins
26. Modules
27. https://docs.angularjs.org/api/ng
28. https://github.com/angular/angular.js/blob/master/ src/Angular.js
29. https://docs.angularjs.org/guide/module
30. https://github.com/emberjs/ember.js/blob/master/ packages/ember-metal/lib/array.js
31. Singletons
32. http://backbonejs.org/docs/ backbone.html#section-32
33. http://emberjs.com/guides/templates/rendering-with- helpers/
34. https://github.com/emberjs/ember.js/blob/ 4445be038bd839a1559020db5677b211dd3f1e9c/packages/ ember-routing-handlebars/lib/helpers/render.js
35. https://docs.angularjs.org/guide/services
37. Factories
38. https://docs.angularjs.org/guide/services
39. https://docs.angularjs.org/guide/providers
40. Mixins
41. http://emberjs.com/api/classes/Ember.Mixin.html
42. https://github.com/emberjs/ember.js/blob/v1.7.0/ packages/ember-metal/lib/mixin.js
43. Why does it all matter?
44. Back to Discovery
45. Start Contributing
46. Best Practices
47. Thank You!