SlideShare a Scribd company logo
1 of 32
Download to read offline
Widening your Javascript
     Application:
Organizational Tips from the (Front End) Front Line




                   Alex McPherson

                         +
Overview
  • Should I be here
  • Should I trust this guy
  • 5 types of javascript websites/apps
  • When to level up


Alex McPherson     Quick Left     @alexmcpherson
Should I be here?
  • Survey of organization styles
  • Mostly non-technical, foundational
  • JavaScr-whatnow?-----x---------------------
      TC39




Alex McPherson      Quick Left       @alexmcpherson
Who ARE you?
• Sublime Text            • Alex
• Railscast Theme         • Boulder
• Commas last             • Quick Left
• ALWAYS put in           • Manute Bol of
  semicolons                     JavaScript



Alex McPherson      Quick Left            @alexmcpherson
Manute Bol




Alex McPherson      Quick Left   @alexmcpherson
Format
  • APPLICATION_TYPE
   • Example website
   • Tools it might leverage
   • How to refactor to get to here
   • Signs you might want to level up

Alex McPherson    Quick Left     @alexmcpherson
Type 0: No JS
Example:                   Mom’s cat website

Tools it might leverage:   None!

How to get here:           Write some HTML

When to level up:          When you want to be
                           awesome



Alex McPherson              Quick Left         @alexmcpherson
Type 1: Declarative
Example:                   Modals and a carousel

Tools it might leverage:    Bootstrap.js

How to get here:           Plugins, /lib folder

When to level up:          Plugins++, Editing them




Alex McPherson              Quick Left            @alexmcpherson
Type 2: $(doc).ready
Example:                   Landing page

Tools it might leverage:



How to get here:



When to level up:




Alex McPherson              Quick Left    @alexmcpherson
Simple $(doc).ready




Alex McPherson      Quick Left   @alexmcpherson
Type 2: $(doc).ready
Example:                   Landing page

Tools it might leverage:    Handwritten javascript!

How to get here:             main.js, /libs

When to level up:          Line count, multiple ready calls




Alex McPherson              Quick Left         @alexmcpherson
Type 3: Objects
Example:                   Small blog

Tools it might leverage:



How to get here:



When to level up:




Alex McPherson             Quick Left   @alexmcpherson
Simple Objects




Alex McPherson       Quick Left   @alexmcpherson
Type 3: Objects
Example:                   Small blog

Tools it might leverage:    Folders, 1 global object

How to get here:



When to level up:




Alex McPherson             Quick Left         @alexmcpherson
Obligatory Paul Irish




Alex McPherson   Quick Left   @alexmcpherson
Type 3: Objects
Example:                   Small blog

Tools it might leverage:     Folders, 1 global object

How to get here:            doc.readys => .init(), namespace

When to level up:          Cross-dependent classes, tired of
                           DIY, don’t know where to add event
                           bindings


Alex McPherson              Quick Left         @alexmcpherson
Type 4: Modules and MVC
Example:                   Big data dashboard

Tools it might leverage:
                           Modules, MVC, templates, build tools

How to get here:



When to level up:




Alex McPherson              Quick Left        @alexmcpherson
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
Simple Module




Alex McPherson       Quick Left   @alexmcpherson
Type 4: Modules and MVC
Example:                   Big data dashboard

Tools it might leverage:
                           Modules, MVC, templates, build tools

How to get here:



When to level up:




Alex McPherson              Quick Left        @alexmcpherson
MVC
  • Enhanced organization
  • Backbone, Ember, Angular
  • Porting DOM soup => Backbone, A++
  • Take or leave parts


Alex McPherson   Quick Left   @alexmcpherson
Type 4: Modules and MVC
Example:                   Big data dashboard

Tools it might leverage:
                           Modules, MVC, templates, build tools

How to get here:



When to level up:




Alex McPherson              Quick Left        @alexmcpherson
Templates




Alex McPherson     Quick Left   @alexmcpherson
Templates




Alex McPherson     Quick Left   @alexmcpherson
Templates




Alex McPherson     Quick Left   @alexmcpherson
Templates
  • Underscore, jade, mustache,
      handlebars, dust...

  • Precompiling



Alex McPherson       Quick Left   @alexmcpherson
Type 4: Modules and MVC
Example:                   Big data dashboard

Tools it might leverage:
                           Modules, MVC, templates, build tools

How to get here:



When to level up:




Alex McPherson              Quick Left        @alexmcpherson
Build Tools
  • Housekeeping tasks
  • Grunt.js
   • Task based
   • node.js
  • ‘sprockets-commonjs’ gem
  • Take or leave parts
Alex McPherson      Quick Left   @alexmcpherson
Type 4: Modules and MVC
Example:                   Big data dashboard

Tools it might leverage:
                           Modules, MVC, templates, build tools

How to get here:            One piece at a time!

When to level up:           Something crazy like meteor.js




Alex McPherson              Quick Left        @alexmcpherson
Overview
  1. No Javascript
  2. Libraries
  3. $(document).ready
  4. Object based
  5. MVC, Modules

Alex McPherson     Quick Left   @alexmcpherson
Overview
  • Rightsized apps are OK
  • Don’t always start big, but think about it
  • Know when to level up



Alex McPherson      Quick Left      @alexmcpherson
Thanks!
  • @alexmcpherson

  • Quick Left, Boulder, we’re hiring


Alex McPherson     Quick Left      @alexmcpherson

More Related Content

What's hot

AJAX & jQuery - City University WAD Module
AJAX & jQuery - City University WAD ModuleAJAX & jQuery - City University WAD Module
AJAX & jQuery - City University WAD ModuleCharlie Perrins
 
WordPress Rest API
WordPress Rest APIWordPress Rest API
WordPress Rest APIBrian Layman
 
Denver AWS Users' Group Meeting - July 2018 Slides
Denver AWS Users' Group Meeting - July 2018 SlidesDenver AWS Users' Group Meeting - July 2018 Slides
Denver AWS Users' Group Meeting - July 2018 SlidesDavid McDaniel
 
An admin's guide for getting work done with share point and powershell scripting
An admin's guide for getting work done with share point and powershell scriptingAn admin's guide for getting work done with share point and powershell scripting
An admin's guide for getting work done with share point and powershell scriptingInnoTech
 
5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress Plugin5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress PluginKelly Phillips
 
Cool Shit You Can Do With WordPress (BrightonSEO 2014)
Cool Shit You Can Do With WordPress (BrightonSEO 2014)Cool Shit You Can Do With WordPress (BrightonSEO 2014)
Cool Shit You Can Do With WordPress (BrightonSEO 2014)Patrick Hathaway
 
Familiarity Breeds Contempt (Or why all APIs suck, even yours.)
Familiarity Breeds Contempt (Or why all APIs suck, even yours.)Familiarity Breeds Contempt (Or why all APIs suck, even yours.)
Familiarity Breeds Contempt (Or why all APIs suck, even yours.)Stephen Darlington
 
Iteratee and stream with Play2 scala
Iteratee and stream with Play2 scalaIteratee and stream with Play2 scala
Iteratee and stream with Play2 scalaQuentin Adam
 
Conexão Kinghost - Otimização Prematura
Conexão Kinghost - Otimização PrematuraConexão Kinghost - Otimização Prematura
Conexão Kinghost - Otimização PrematuraFabio Akita
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuningJohn McCaffrey
 
Silt: Lessons Learned
Silt: Lessons LearnedSilt: Lessons Learned
Silt: Lessons LearnedESUG
 
Untangling the web - week 3
Untangling the web - week 3Untangling the web - week 3
Untangling the web - week 3Derek Jacoby
 
Immutability: from code to infrastructure, the way of scalability - snowcamp ...
Immutability: from code to infrastructure, the way of scalability - snowcamp ...Immutability: from code to infrastructure, the way of scalability - snowcamp ...
Immutability: from code to infrastructure, the way of scalability - snowcamp ...Quentin Adam
 
The Open Commerce Conference - Premature Optimisation: The Root of All Evil
The Open Commerce Conference - Premature Optimisation: The Root of All EvilThe Open Commerce Conference - Premature Optimisation: The Root of All Evil
The Open Commerce Conference - Premature Optimisation: The Root of All EvilFabio Akita
 
Migrating from WordPress.com
Migrating from WordPress.comMigrating from WordPress.com
Migrating from WordPress.comAndrew Epperson
 
Building Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case StudyBuilding Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case StudyRoy Sivan
 
Premature optimisation: The Root of All Evil
Premature optimisation: The Root of All EvilPremature optimisation: The Root of All Evil
Premature optimisation: The Root of All EvilFabio Akita
 

What's hot (20)

AJAX & jQuery - City University WAD Module
AJAX & jQuery - City University WAD ModuleAJAX & jQuery - City University WAD Module
AJAX & jQuery - City University WAD Module
 
WordPress Rest API
WordPress Rest APIWordPress Rest API
WordPress Rest API
 
2.6 summary day-2
2.6 summary day-22.6 summary day-2
2.6 summary day-2
 
Denver AWS Users' Group Meeting - July 2018 Slides
Denver AWS Users' Group Meeting - July 2018 SlidesDenver AWS Users' Group Meeting - July 2018 Slides
Denver AWS Users' Group Meeting - July 2018 Slides
 
An admin's guide for getting work done with share point and powershell scripting
An admin's guide for getting work done with share point and powershell scriptingAn admin's guide for getting work done with share point and powershell scripting
An admin's guide for getting work done with share point and powershell scripting
 
5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress Plugin5 Things You Shouldn't Do With A WordPress Plugin
5 Things You Shouldn't Do With A WordPress Plugin
 
Cool Shit You Can Do With WordPress (BrightonSEO 2014)
Cool Shit You Can Do With WordPress (BrightonSEO 2014)Cool Shit You Can Do With WordPress (BrightonSEO 2014)
Cool Shit You Can Do With WordPress (BrightonSEO 2014)
 
Intro to Ravelry
Intro to RavelryIntro to Ravelry
Intro to Ravelry
 
Familiarity Breeds Contempt (Or why all APIs suck, even yours.)
Familiarity Breeds Contempt (Or why all APIs suck, even yours.)Familiarity Breeds Contempt (Or why all APIs suck, even yours.)
Familiarity Breeds Contempt (Or why all APIs suck, even yours.)
 
Iteratee and stream with Play2 scala
Iteratee and stream with Play2 scalaIteratee and stream with Play2 scala
Iteratee and stream with Play2 scala
 
Conexão Kinghost - Otimização Prematura
Conexão Kinghost - Otimização PrematuraConexão Kinghost - Otimização Prematura
Conexão Kinghost - Otimização Prematura
 
Ember & WebComponents
Ember & WebComponentsEmber & WebComponents
Ember & WebComponents
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
Silt: Lessons Learned
Silt: Lessons LearnedSilt: Lessons Learned
Silt: Lessons Learned
 
Untangling the web - week 3
Untangling the web - week 3Untangling the web - week 3
Untangling the web - week 3
 
Immutability: from code to infrastructure, the way of scalability - snowcamp ...
Immutability: from code to infrastructure, the way of scalability - snowcamp ...Immutability: from code to infrastructure, the way of scalability - snowcamp ...
Immutability: from code to infrastructure, the way of scalability - snowcamp ...
 
The Open Commerce Conference - Premature Optimisation: The Root of All Evil
The Open Commerce Conference - Premature Optimisation: The Root of All EvilThe Open Commerce Conference - Premature Optimisation: The Root of All Evil
The Open Commerce Conference - Premature Optimisation: The Root of All Evil
 
Migrating from WordPress.com
Migrating from WordPress.comMigrating from WordPress.com
Migrating from WordPress.com
 
Building Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case StudyBuilding Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case Study
 
Premature optimisation: The Root of All Evil
Premature optimisation: The Root of All EvilPremature optimisation: The Root of All Evil
Premature optimisation: The Root of All Evil
 

Similar to Widening your JavaScript Application

A Brief Intro to Adobe Flex
A Brief Intro to Adobe FlexA Brief Intro to Adobe Flex
A Brief Intro to Adobe FlexChad Udell
 
Get More Links to Your Site With the Skyscraper Technique
Get More Links to Your Site With the Skyscraper TechniqueGet More Links to Your Site With the Skyscraper Technique
Get More Links to Your Site With the Skyscraper TechniqueRachel Fredrickson
 
#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide
#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide
#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s GuideNew Delhi Salesforce Developer Group
 
#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...
#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...
#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...Alex Moss
 
Alexis + Max - We Love SEO 19 - Bot X
Alexis + Max - We Love SEO 19 - Bot XAlexis + Max - We Love SEO 19 - Bot X
Alexis + Max - We Love SEO 19 - Bot XAlexis Sanders
 
Wikimedia-Architecture-More-With-Less
Wikimedia-Architecture-More-With-LessWikimedia-Architecture-More-With-Less
Wikimedia-Architecture-More-With-LessAsher Feldman
 
Alice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu
 
Alfresco Mvc - a seamless integration with Spring Mvc
Alfresco Mvc - a seamless integration with Spring MvcAlfresco Mvc - a seamless integration with Spring Mvc
Alfresco Mvc - a seamless integration with Spring MvcDaniel Gradecak
 
Rapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPressRapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPressNathaniel Taintor
 
PLAT-16 Using Enterprise Content in Grails
PLAT-16 Using Enterprise Content in GrailsPLAT-16 Using Enterprise Content in Grails
PLAT-16 Using Enterprise Content in GrailsAlfresco Software
 
How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)ICF CIRCUIT
 
Fix me if you can - DrupalCon prague
Fix me if you can - DrupalCon pragueFix me if you can - DrupalCon prague
Fix me if you can - DrupalCon praguehernanibf
 
Developing Complex WordPress Sites without Fear of Failure (with MVC)
Developing Complex WordPress Sites without Fear of Failure (with MVC)Developing Complex WordPress Sites without Fear of Failure (with MVC)
Developing Complex WordPress Sites without Fear of Failure (with MVC)Mike Schinkel
 
WordPress Customization and Security
WordPress Customization and SecurityWordPress Customization and Security
WordPress Customization and SecurityJoe Casabona
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformAntonio Peric-Mazar
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityMichelle Davies (Hryvnak)
 
Elasticsearch 5 in Amazon Elasticsearch Service
Elasticsearch 5 in Amazon Elasticsearch ServiceElasticsearch 5 in Amazon Elasticsearch Service
Elasticsearch 5 in Amazon Elasticsearch ServiceAmazon Web Services
 

Similar to Widening your JavaScript Application (20)

A Brief Intro to Adobe Flex
A Brief Intro to Adobe FlexA Brief Intro to Adobe Flex
A Brief Intro to Adobe Flex
 
Get More Links to Your Site With the Skyscraper Technique
Get More Links to Your Site With the Skyscraper TechniqueGet More Links to Your Site With the Skyscraper Technique
Get More Links to Your Site With the Skyscraper Technique
 
Sanity on Rails
Sanity on RailsSanity on Rails
Sanity on Rails
 
Tìm hiểu Wordpress hook
Tìm hiểu Wordpress hookTìm hiểu Wordpress hook
Tìm hiểu Wordpress hook
 
#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide
#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide
#ImpactSalesforceSaturday: Lightning Components 101: An Apex Developer’s Guide
 
#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...
#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...
#BrightonSEO: Work Life Hacks - Tools & Tips to Improve Internal Productivity...
 
Alexis + Max - We Love SEO 19 - Bot X
Alexis + Max - We Love SEO 19 - Bot XAlexis + Max - We Love SEO 19 - Bot X
Alexis + Max - We Love SEO 19 - Bot X
 
Wikimedia-Architecture-More-With-Less
Wikimedia-Architecture-More-With-LessWikimedia-Architecture-More-With-Less
Wikimedia-Architecture-More-With-Less
 
Alice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu - WordPress For Beginners
Alice Phieu - WordPress For Beginners
 
Alfresco Mvc - a seamless integration with Spring Mvc
Alfresco Mvc - a seamless integration with Spring MvcAlfresco Mvc - a seamless integration with Spring Mvc
Alfresco Mvc - a seamless integration with Spring Mvc
 
Rapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPressRapidly prototyping web applications using BackPress
Rapidly prototyping web applications using BackPress
 
PLAT-16 Using Enterprise Content in Grails
PLAT-16 Using Enterprise Content in GrailsPLAT-16 Using Enterprise Content in Grails
PLAT-16 Using Enterprise Content in Grails
 
How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)
 
Fix me if you can - DrupalCon prague
Fix me if you can - DrupalCon pragueFix me if you can - DrupalCon prague
Fix me if you can - DrupalCon prague
 
Developing Complex WordPress Sites without Fear of Failure (with MVC)
Developing Complex WordPress Sites without Fear of Failure (with MVC)Developing Complex WordPress Sites without Fear of Failure (with MVC)
Developing Complex WordPress Sites without Fear of Failure (with MVC)
 
WordPress Customization and Security
WordPress Customization and SecurityWordPress Customization and Security
WordPress Customization and Security
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & Security
 
Elasticsearch 5 in Amazon Elasticsearch Service
Elasticsearch 5 in Amazon Elasticsearch ServiceElasticsearch 5 in Amazon Elasticsearch Service
Elasticsearch 5 in Amazon Elasticsearch Service
 
bX at Claremont
bX at ClaremontbX at Claremont
bX at Claremont
 

Widening your JavaScript Application

  • 1. Widening your Javascript Application: Organizational Tips from the (Front End) Front Line Alex McPherson +
  • 2. Overview • Should I be here • Should I trust this guy • 5 types of javascript websites/apps • When to level up Alex McPherson Quick Left @alexmcpherson
  • 3. Should I be here? • Survey of organization styles • Mostly non-technical, foundational • JavaScr-whatnow?-----x--------------------- TC39 Alex McPherson Quick Left @alexmcpherson
  • 4. Who ARE you? • Sublime Text • Alex • Railscast Theme • Boulder • Commas last • Quick Left • ALWAYS put in • Manute Bol of semicolons JavaScript Alex McPherson Quick Left @alexmcpherson
  • 5. Manute Bol Alex McPherson Quick Left @alexmcpherson
  • 6. Format • APPLICATION_TYPE • Example website • Tools it might leverage • How to refactor to get to here • Signs you might want to level up Alex McPherson Quick Left @alexmcpherson
  • 7. Type 0: No JS Example: Mom’s cat website Tools it might leverage: None! How to get here: Write some HTML When to level up: When you want to be awesome Alex McPherson Quick Left @alexmcpherson
  • 8. Type 1: Declarative Example: Modals and a carousel Tools it might leverage: Bootstrap.js How to get here: Plugins, /lib folder When to level up: Plugins++, Editing them Alex McPherson Quick Left @alexmcpherson
  • 9. Type 2: $(doc).ready Example: Landing page Tools it might leverage: How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 10. Simple $(doc).ready Alex McPherson Quick Left @alexmcpherson
  • 11. Type 2: $(doc).ready Example: Landing page Tools it might leverage: Handwritten javascript! How to get here: main.js, /libs When to level up: Line count, multiple ready calls Alex McPherson Quick Left @alexmcpherson
  • 12. Type 3: Objects Example: Small blog Tools it might leverage: How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 13. Simple Objects Alex McPherson Quick Left @alexmcpherson
  • 14. Type 3: Objects Example: Small blog Tools it might leverage: Folders, 1 global object How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 15. Obligatory Paul Irish Alex McPherson Quick Left @alexmcpherson
  • 16. Type 3: Objects Example: Small blog Tools it might leverage: Folders, 1 global object How to get here: doc.readys => .init(), namespace When to level up: Cross-dependent classes, tired of DIY, don’t know where to add event bindings Alex McPherson Quick Left @alexmcpherson
  • 17. Type 4: Modules and MVC Example: Big data dashboard Tools it might leverage: Modules, MVC, templates, build tools How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 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. Simple Module Alex McPherson Quick Left @alexmcpherson
  • 20. Type 4: Modules and MVC Example: Big data dashboard Tools it might leverage: Modules, MVC, templates, build tools How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 21. MVC • Enhanced organization • Backbone, Ember, Angular • Porting DOM soup => Backbone, A++ • Take or leave parts Alex McPherson Quick Left @alexmcpherson
  • 22. Type 4: Modules and MVC Example: Big data dashboard Tools it might leverage: Modules, MVC, templates, build tools How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 23. Templates Alex McPherson Quick Left @alexmcpherson
  • 24. Templates Alex McPherson Quick Left @alexmcpherson
  • 25. Templates Alex McPherson Quick Left @alexmcpherson
  • 26. Templates • Underscore, jade, mustache, handlebars, dust... • Precompiling Alex McPherson Quick Left @alexmcpherson
  • 27. Type 4: Modules and MVC Example: Big data dashboard Tools it might leverage: Modules, MVC, templates, build tools How to get here: When to level up: Alex McPherson Quick Left @alexmcpherson
  • 28. Build Tools • Housekeeping tasks • Grunt.js • Task based • node.js • ‘sprockets-commonjs’ gem • Take or leave parts Alex McPherson Quick Left @alexmcpherson
  • 29. Type 4: Modules and MVC Example: Big data dashboard Tools it might leverage: Modules, MVC, templates, build tools How to get here: One piece at a time! When to level up: Something crazy like meteor.js Alex McPherson Quick Left @alexmcpherson
  • 30. Overview 1. No Javascript 2. Libraries 3. $(document).ready 4. Object based 5. MVC, Modules Alex McPherson Quick Left @alexmcpherson
  • 31. Overview • Rightsized apps are OK • Don’t always start big, but think about it • Know when to level up Alex McPherson Quick Left @alexmcpherson
  • 32. Thanks! • @alexmcpherson • Quick Left, Boulder, we’re hiring Alex McPherson Quick Left @alexmcpherson

Editor's Notes

  1. towards the end we’ll get into modern best practices
  2. 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
  3. just a few event bindings, maybe one of those newfangled AJAX calls, and some callback functions defined
  4. 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!
  5. Small blog. Here’s an example:
  6. 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
  7. 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)
  8. i’ll say it again, if you’re repeating yourself, you’re doing it wrong. prototypes can help you with that.
  9. 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.
  10. 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
  11. 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
  12. 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.
  13. 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.
  14. 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.
  15. Aaah, HTML. Looks like HTML. With some data.
  16. Refactored, it looks like this. A function that returns HTML. Notice how you pass it an object to render against.
  17. 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.
  18. 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.
  19. 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.
  20. 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