Lessons From 100k Of JavaScript

Lessons Joseph Eames and I learned writing a massive single page application.

Transcript

1. LESSONS FROM 100K LINES OF JAVASCRIPT Merrick Christensen & Joseph Eames Sunday, September 1, 13
2. The Presenters + + Joseph Eames @josepheames JavaScript Jabber Panelist Plural Sight Author All around a fine gent. Merrick Christensen @iammerrick JavaScript Jabber Panelist Open Source Enthusiast All around a odd gent. Sunday, September 1, 13
3. Our Goals • These are not objective truths, these are lessons that have been useful for us. • Decisions always need to be made in context. • Please come talk to us after if you have better ideas. • Ask questions. Sunday, September 1, 13
4. Viva La Revolution! Code is moving the browser faster than our patterns and tools can keep up! Services for persistence, long live the rich client! Sunday, September 1, 13
5. Architecture Problem: Lots of teams in parallel create an insane mess. Solutions • You need an architect who doesn’t write features to identify patterns, clean up code, and evangelize standards. • Don’t use a global event bus as code paths are intractable. • Don’t store state in the DOM. • Two-way binding yields massive code reduction. • Interfaces and object-oriented principles are still important people. • Shared widgets should be extensible & compose-able. • Isolate features as much as possible and assemble. Web Components are wonderful. Sunday, September 1, 13
6. Stylesheets Problem: Writing Maintainable & Reusable CSS Solutions • CSS is a first class citizen, treat it as such. • Create a framework that provides variables, mixins and classes to compose interfaces. • Tier the framework into children levels • SCSS Primitives • Object Oriented Classes • Feature Specific Styles (Can couple and deploy with the components themselves using AMD). • Use a preprocessor such as Stylus or SCSS/Compass. Sunday, September 1, 13
7. Stylesheets Architecture Compose-able Classes Feature Specific Styles SCSS Primitives $color-background $font-base-size $font-text-family $color-foreground .subtle-foreground .bold-text .padding-left .fill-parent .subtle-background .talk-comment-layout .explorer-tiered-format Sunday, September 1, 13
8. Feature Integration Problem: Features can be difficult to integrate together. Solutions • Encapsulate and decouple features using the file system. • Use feature switches to enable developing in master without deploying to production. • Avoid long lived branches. Sunday, September 1, 13
9. Get A Module System Problem: JavaScript has no standard for properly sharing & encapsulating code. •Globals are difficult to unit test. •Globals do not specify load order and consequently are difficult to build and share. Solution: Use a Module System (CJS|AMD|ES6) • Encapsulates all code. • Provides a service location abstraction. • Static analysis. • Production optimizations. Sunday, September 1, 13
10. Code Fragility & Complexity Problem: Code is too complex to understand the scope of a change. Solutions • Use automated testing. • Run UI behavioral tests using a non-prescriptive framework. Sunday, September 1, 13
11. Bit Awareness Problem: I didn’t know that someone had already implemented that!? Solutions • Create an open style guide within the application. • Promote cross team pollination as much as possible. • Code Reviews • Pair Programming Sunday, September 1, 13
12. Code Optimization Problem: Our code needs to be shipped over the wire. Solutions • Create a flexible build to concatenate and uglify your code. • Run the build on a continuous integration server on every SCM push. • Measure everything. • Measure your build time. • Instrument your application with proper analytics to understand load time implications. • Measure application size. • Measure CSS selector count. Sunday, September 1, 13
13. Development || Production Problem: Fragmentation between development and production. Solutions • Implement the skeleton of your build early. •Run the tests after you build. • Allow developers to simulate the production environment (Vagrant FTW). • Leverage source maps for production debugging. Sunday, September 1, 13
14. THANK YOU! Sunday, September 1, 13