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
   

   View Slide

2. Who Am I?
   • Nick Hehr, a.k.a HipsterBrown
   • Product Designer
   • Front-End Developer
   • Forever Learner
   

   View Slide

3. What We’ll Cover
   • Discovery
   • Popular JS Frameworks
   • Source Code
   • JavaScript Design Patterns
   • Why?
   

   View Slide

4. Discovery
   

   View Slide

5. Remember when
   this was new?
   

   View Slide

6. View Slide

7. It’s 2014:
   A Time of Powerful,
   Front-end Driven Apps
   

   View Slide

8. http://www.paulirish.com/2010/10-things-i-learned-
   from-the-jquery-source/
   

   View Slide

9. http://www.paulirish.com/2011/11-more-things-i-
   learned-from-the-jquery-source/
   Great screenshotting tunes
   

   View Slide

10. http://quickleft.com/blog/18-surprises-from-reading-
    jquery-s-source-code
    

    View Slide

11. We’re not here for
    JQuery.
    

    View Slide

12. View Slide

13. View Slide

14. http://backbonejs.org
    

    View Slide

15. https://docs.angularjs.org/api
    

    View Slide

16. http://emberjs.com/api
    

    View Slide

17. Straight to the
    Source
    

    View Slide

18. http://backbonejs.org/docs/backbone.html
    

    View Slide

19. https://github.com/angular/angular.js/tree/master/src
    

    View Slide

20. https://github.com/emberjs/ember.js/tree/master/
    packages
    

    View Slide

21. JavaScript Design Patterns
    

    View Slide

22. http://www.addyosmani.com/resources/
    essentialjsdesignpatterns/book/
    

    View Slide

23. –Addy Osmani,
    Learning JavaScript Design Patterns
    “Design patterns are reusable solutions to
    commonly occurring problems in software
    design.”
    

    View Slide

24. Creational Design Patterns
    • Modules
    • Singletons
    • Factories
    • Mixins
    

    View Slide

25. View Slide

26. Modules
    

    View Slide

27. https://docs.angularjs.org/api/ng
    

    View Slide

28. https://github.com/angular/angular.js/blob/master/
    src/Angular.js
    

    View Slide

29. https://docs.angularjs.org/guide/module
    

    View Slide

30. https://github.com/emberjs/ember.js/blob/master/
    packages/ember-metal/lib/array.js
    

    View Slide

31. Singletons
    

    View Slide

32. http://backbonejs.org/docs/
    backbone.html#section-32
    

    View Slide

33. http://emberjs.com/guides/templates/rendering-with-
    helpers/
    

    View Slide

34. https://github.com/emberjs/ember.js/blob/
    4445be038bd839a1559020db5677b211dd3f1e9c/packages/
    ember-routing-handlebars/lib/helpers/render.js
    

    View Slide

35. https://docs.angularjs.org/guide/services
    

    View Slide

36. View Slide

37. Factories
    

    View Slide

38. https://docs.angularjs.org/guide/services
    

    View Slide

39. https://docs.angularjs.org/guide/providers
    

    View Slide

40. Mixins
    

    View Slide

41. http://emberjs.com/api/classes/Ember.Mixin.html
    

    View Slide

42. https://github.com/emberjs/ember.js/blob/v1.7.0/
    packages/ember-metal/lib/mixin.js
    

    View Slide

43. Why does it all
    matter?
    

    View Slide

44. Back to Discovery
    

    View Slide

45. Start Contributing
    

    View Slide

46. Best Practices
    

    View Slide

47. Thank You!
    

    View Slide