Widening your Javascript     Application:Organizational Tips from the (Front End) Front Line                   Alex McPher...
Overview  • Should I be here  • Should I trust this guy  • 5 types of javascript websites/apps  • When to level upAlex McP...
Should I be here?  • Survey of organization styles  • Mostly non-technical, foundational  • JavaScr-whatnow?-----x--------...
Who ARE you?• Sublime Text            • Alex• Railscast Theme         • Boulder• Commas last             • Quick Left• ALW...
Manute BolAlex McPherson      Quick Left   @alexmcpherson
Format  • APPLICATION_TYPE   • Example website   • Tools it might leverage   • How to refactor to get to here   • Signs yo...
Type 0: No JSExample:                   Mom’s cat websiteTools it might leverage:   None!How to get here:           Write ...
Type 1: DeclarativeExample:                   Modals and a carouselTools it might leverage:    Bootstrap.jsHow to get here...
Type 2: $(doc).readyExample:                   Landing pageTools it might leverage:How to get here:When to level up:Alex M...
Simple $(doc).readyAlex McPherson      Quick Left   @alexmcpherson
Type 2: $(doc).readyExample:                   Landing pageTools it might leverage:    Handwritten javascript!How to get h...
Type 3: ObjectsExample:                   Small blogTools it might leverage:How to get here:When to level up:Alex McPherso...
Simple ObjectsAlex McPherson       Quick Left   @alexmcpherson
Type 3: ObjectsExample:                   Small blogTools it might leverage:    Folders, 1 global objectHow to get here:Wh...
Obligatory Paul IrishAlex McPherson   Quick Left   @alexmcpherson
Type 3: ObjectsExample:                   Small blogTools it might leverage:     Folders, 1 global objectHow to get here: ...
Type 4: Modules and MVCExample:                   Big data dashboardTools it might leverage:                           Mod...
Modules  • AMD or CommonJS (but: AMD)  • Meaningful files of code  • Guaranteed results in the browser  • Encourages bette...
Simple ModuleAlex McPherson       Quick Left   @alexmcpherson
Type 4: Modules and MVCExample:                   Big data dashboardTools it might leverage:                           Mod...
MVC  • Enhanced organization  • Backbone, Ember, Angular  • Porting DOM soup => Backbone, A++  • Take or leave partsAlex M...
Type 4: Modules and MVCExample:                   Big data dashboardTools it might leverage:                           Mod...
TemplatesAlex McPherson     Quick Left   @alexmcpherson
TemplatesAlex McPherson     Quick Left   @alexmcpherson
TemplatesAlex McPherson     Quick Left   @alexmcpherson
Templates  • Underscore, jade, mustache,      handlebars, dust...  • PrecompilingAlex McPherson       Quick Left   @alexmc...
Type 4: Modules and MVCExample:                   Big data dashboardTools it might leverage:                           Mod...
Build Tools  • Housekeeping tasks  • Grunt.js   • Task based   • node.js  • ‘sprockets-commonjs’ gem  • Take or leave part...
Type 4: Modules and MVCExample:                   Big data dashboardTools it might leverage:                           Mod...
Overview  1. No Javascript  2. Libraries  3. $(document).ready  4. Object based  5. MVC, ModulesAlex McPherson     Quick L...
Overview  • Rightsized apps are OK  • Don’t always start big, but think about it  • Know when to level upAlex McPherson   ...
Thanks!  • @alexmcpherson  • Quick Left, Boulder, we’re hiringAlex McPherson     Quick Left      @alexmcpherson
Upcoming SlideShare
Loading in …5
×

Widening your JavaScript Application

5,114
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,114
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • towards the end we’ll get into modern best practices
  • Example simple landing page with a help modal might write some actual javascript which is often people’s first experience coding. exciting! a solid bet is to have a a main.js file with the docready, and a /libs folder with your libraries move right along to the next level of javascript apps when A) your docready call gets bigger than 50-100 lines, or B) when you start having several document ready calls. these might seem safe at first, but if they ever refer to the same
  • just a few event bindings, maybe one of those newfangled AJAX calls, and some callback functions defined
  • Example simple landing page with a help modal might write some actual javascript which is often people’s first experience coding. exciting! a solid bet is to have a a main.js file with the docready, and a /libs folder with your libraries move right along to the next level of javascript apps when A) your docready call gets bigger than 50-100 lines, or B) when you start having several document ready calls. these might seem safe at first, but if they ever refer to the same external variables or depend on one to be loaded first, you’re in for hurt. Race conditions!
  • Small blog. Here’s an example:
  • Global namespace for your app, a few nice buckets to store cached DOM nodes and data, and a simple init function to kick off some un-implemented functions. this is nice because a complex app only has one entry point, the doc ready call. new developers have it easy, and you can define well-named namespaces for further functionality
  • So this can scale pretty well. You’ll start adding folders to organize your code, you might even dip into the waters of prototyped objects that you can instantiate many of. That’s very DRY (don’t repeat yourself)
  • i’ll say it again, if you’re repeating yourself, you’re doing it wrong. prototypes can help you with that.
  • you get there by consolidating down to one entry point, and make a properly organized namespace for your needs. this is also a time to factor out code you’ve implemented in several places maybe, like error popups after failed ajax calls. there are some other neat object-based ideas floating around like mapping the object to your routes, so when you visit users/index, it inits the app via App.Users.Index(), giving each page a unique entry point to control what happens on just that page. this is a solid way to organize code. I’ll make a totally uninformed guess and say that 75% of websites with javascript on them are set up in a way similar to this. It’s good and it works. Eventually though, you might find some pain points. You want to leave this level of application for any one of many reasons. sometimes you have classes that depend on other classes, and getting script tags to load in order is tough. Sometimes you might get tired of rebuilding the same functionality repeatedly and are ready to let a framework take on a more core role in your application. If you find yourself struggling to manage event binding and unbinding and keeping that in sync with the DOM, it might be time to progress. Another sure sign that your app might benefit from some more tooling is if you’re using javascript to produce lots of HTML.
  • This is the final stage of organization and tooling for javascript applications. Think of the wildest, most complex things you’ve seen in a browser: analytics dashboards, gmail. This setup can tame all that complexity and make the project easy to work on and small to download. Let’s take these one at a time: Modules
  • People wanted a format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order", so... AMD
  • Name the files this needs to run. Those correspond to the arguments passed into this function. Then: it’s just javascript. Return value is important.
  • Model View controller. A model does... really good organization, easy to dive into a project. A lot of choices. I like Backbone. It is particularly easy to upgrade TO from more typical object focused javascript code. Backbone, for example, offers in piecemeal, a router, powerful collections with querying, models with great AJAX abstraction over them, and a handy view layer for gluing up templates and events to data from models. Pick any one piece if you like.
  • Have you ever written code that looks like this? Raise your hand, it’s ok... I lied, it’s not ok. When you want to write HTML, you should be writing HTML.
  • Aaah, HTML. Looks like HTML. With some data.
  • Refactored, it looks like this. A function that returns HTML. Notice how you pass it an object to render against.
  • Lot of choices, they all do the same thing. Some look like HAML, some have difference delimiters, some accept coffeescript <blech> but mostly it’s your preference They produce a function that when called, returns HTML. The file you write looks like HTML, but it’s output is a compressed, efficient mess of code that takes a while to produce.
  • What do you do with your javascript before it goes to the browser? Uglify, minify, concatenate, resolve module dependencies, precompile templates, transpile coffeescript Grunt.js works well solo. Individual tasks or a whole process wired up Asset pipeline can handle it, Django has tooling for it, they’re out there.
  • All at a once a big job, but these tools CAN be adopted piecemeal, though they all work fantastically well together. Level up? Move onto something wild like meteor.js... but seriously this is considered modern best practice for applications of a certain scale.
  • move on when you want to do something cool when you start editing the libraries when you have too many doc readys that conflict when you can’t load things predictably and you can’t manage DOM complexity well
  • Widening your JavaScript Application

    1. 1. Widening your Javascript Application:Organizational Tips from the (Front End) Front Line Alex McPherson +
    2. 2. Overview • Should I be here • Should I trust this guy • 5 types of javascript websites/apps • When to level upAlex McPherson Quick Left @alexmcpherson
    3. 3. Should I be here? • Survey of organization styles • Mostly non-technical, foundational • JavaScr-whatnow?-----x--------------------- TC39Alex McPherson Quick Left @alexmcpherson
    4. 4. Who ARE you?• Sublime Text • Alex• Railscast Theme • Boulder• Commas last • Quick Left• ALWAYS put in • Manute Bol of semicolons JavaScriptAlex McPherson Quick Left @alexmcpherson
    5. 5. Manute BolAlex McPherson Quick Left @alexmcpherson
    6. 6. Format • APPLICATION_TYPE • Example website • Tools it might leverage • How to refactor to get to here • Signs you might want to level upAlex McPherson Quick Left @alexmcpherson
    7. 7. Type 0: No JSExample: Mom’s cat websiteTools it might leverage: None!How to get here: Write some HTMLWhen to level up: When you want to be awesomeAlex McPherson Quick Left @alexmcpherson
    8. 8. Type 1: DeclarativeExample: Modals and a carouselTools it might leverage: Bootstrap.jsHow to get here: Plugins, /lib folderWhen to level up: Plugins++, Editing themAlex McPherson Quick Left @alexmcpherson
    9. 9. Type 2: $(doc).readyExample: Landing pageTools it might leverage:How to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    10. 10. Simple $(doc).readyAlex McPherson Quick Left @alexmcpherson
    11. 11. Type 2: $(doc).readyExample: Landing pageTools it might leverage: Handwritten javascript!How to get here: main.js, /libsWhen to level up: Line count, multiple ready callsAlex McPherson Quick Left @alexmcpherson
    12. 12. Type 3: ObjectsExample: Small blogTools it might leverage:How to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    13. 13. Simple ObjectsAlex McPherson Quick Left @alexmcpherson
    14. 14. Type 3: ObjectsExample: Small blogTools it might leverage: Folders, 1 global objectHow to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    15. 15. Obligatory Paul IrishAlex McPherson Quick Left @alexmcpherson
    16. 16. Type 3: ObjectsExample: Small blogTools it might leverage: Folders, 1 global objectHow to get here: doc.readys => .init(), namespaceWhen to level up: Cross-dependent classes, tired of DIY, don’t know where to add event bindingsAlex McPherson Quick Left @alexmcpherson
    17. 17. Type 4: Modules and MVCExample: Big data dashboardTools it might leverage: Modules, MVC, templates, build toolsHow to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    18. 18. Modules • AMD or CommonJS (but: AMD) • Meaningful files of code • Guaranteed results in the browser • Encourages better code (I think)Alex McPherson Quick Left @alexmcpherson
    19. 19. Simple ModuleAlex McPherson Quick Left @alexmcpherson
    20. 20. Type 4: Modules and MVCExample: Big data dashboardTools it might leverage: Modules, MVC, templates, build toolsHow to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    21. 21. MVC • Enhanced organization • Backbone, Ember, Angular • Porting DOM soup => Backbone, A++ • Take or leave partsAlex McPherson Quick Left @alexmcpherson
    22. 22. Type 4: Modules and MVCExample: Big data dashboardTools it might leverage: Modules, MVC, templates, build toolsHow to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    23. 23. TemplatesAlex McPherson Quick Left @alexmcpherson
    24. 24. TemplatesAlex McPherson Quick Left @alexmcpherson
    25. 25. TemplatesAlex McPherson Quick Left @alexmcpherson
    26. 26. Templates • Underscore, jade, mustache, handlebars, dust... • PrecompilingAlex McPherson Quick Left @alexmcpherson
    27. 27. Type 4: Modules and MVCExample: Big data dashboardTools it might leverage: Modules, MVC, templates, build toolsHow to get here:When to level up:Alex McPherson Quick Left @alexmcpherson
    28. 28. Build Tools • Housekeeping tasks • Grunt.js • Task based • node.js • ‘sprockets-commonjs’ gem • Take or leave partsAlex McPherson Quick Left @alexmcpherson
    29. 29. Type 4: Modules and MVCExample: Big data dashboardTools it might leverage: Modules, MVC, templates, build toolsHow to get here: One piece at a time!When to level up: Something crazy like meteor.jsAlex McPherson Quick Left @alexmcpherson
    30. 30. Overview 1. No Javascript 2. Libraries 3. $(document).ready 4. Object based 5. MVC, ModulesAlex McPherson Quick Left @alexmcpherson
    31. 31. Overview • Rightsized apps are OK • Don’t always start big, but think about it • Know when to level upAlex McPherson Quick Left @alexmcpherson
    32. 32. Thanks! • @alexmcpherson • Quick Left, Boulder, we’re hiringAlex McPherson Quick Left @alexmcpherson
    1. A particular slide catching your eye?

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

    ×