Web UI Architecture
Engineer at Etsy
3 hours, 54 minutes
Become a Master
This course and others like it are available as part of our Frontend Masters video subscription.
Watch Free Preview
Join Frontend Masters
Published: July 3, 2013
Table of Contents
00:01:04 - 00:06:27
Architecture: Decisions you make about your application
Architecture is the decisions you are making about your application. Architecture is not externalizing files or an organized file system. Good architecture uses minimal boilerplate code and a carefully curated library of tools. It’s a balance of performance and maintenance. Architecture should be able to wire up a new static page given mostly DOM references and server endpoints. Scaffolding is your architecture.
00:06:28 - 00:12:15
What time is architecture time?
00:12:16 - 00:19:14
Example: Shopping Cart
A shopping cart is something most of us have encountered. We’ll use a shopping cart as our project while exploring proper architecture. The first step is to define our objects, states, interactions, and what we know about the application.
00:19:15 - 00:26:07
00:26:08 - 00:40:48
00:40:49 - 00:49:59
Write (some) implementation first
Pro-tip: Write some of your implementation first. Garann walks us through a naïve outline of our shopping cart application with some basic implementation. Start thinking about inheritance. Reveal the abstractions you will need. Looking through the implementation outline, Garann asks the audience to suggest areas that require some abstraction.
Part 2: Abstractions and Frameworks
00:50:00 - 01:03:09
Messaging, Rendering, and Server Interactions
Messaging is responsible for notifying subscribers, caching, and tracking the context of events. Decoupling is encouraged by the ability of messaging to pass data along with the event. Rendering code provides rendered HTML by interpolating data while caching compiled templates. Server interactions pass server data to requesting objects and vice versa. They are also allow the decoupling of URLs from instance code and have a built-in notification system for when data is sent/received.
01:03:10 - 01:13:01
State Management, Validation, and Framework Context
State management allows objects to have one or more states. As a state changes, the correct chain of events will be fired of and appropriate properties will be modified. - Question: Do you use routes with state management? Validation engines provide the user with results and update stating information based on valid/invalid operations. Validation function should be abstracted whenever possible to promote reusability. The framework context contains all the framework abstractions and distributes functionality to any registered objects. All framework code and implementations are initialized in the context and messaging/state management are enabled above the application level.
01:13:02 - 01:18:35
Implementing a Framework
Implementing a framework starts with sketching out a small set of functionality and designing as much of the implementation as possible. Downloading your abstractions (as opposed to writing them yourself) can be beneficial. Third-party frameworks are almost always the right answer. Choose your frameworks carefully, though. How large is the base library? How much scaffolding is required by the implementation? Will it play nice with other libraries or will it have to be shoehorned into your application pattern.
01:18:36 - 01:31:40
Angular JS looks a lot like a template engine and contains a wide library of services and objects. There are a number of built-in DOM elements. - http://angularjs.org/ Angular JS code demonstration. - Question: How does the Angular framework wire up the DOM? The presentation in Angular JS is largely in HTML with simple event handling available. Angular also provides a straight-forward routing API. Data focuses heavily on bindings and, in general, Angular encourages the use of MVC for architecture.
01:31:41 - 01:39:56
Backbone is an MV* framework focused mostly on logic and very little on the DOM. It relies on Underscore for many utilities. - http://backbonejs.org/ Models in Backbone are built for inheritance and can easily be organized into collections. Views contain all the information about where the view is rendered, but the rendering has to be supplied by the developer.
01:39:57 - 01:48:07
Ember is a hybrid of Angular and Backbone. Models, views and controllers are called explicitly and theirs a limited set of DOM interactions. - http://emberjs.com/ Bindings in Ember are bi-directional allowing all modules to be in sync without additional effort. Computed properties give developers flexibility to use the same get/set pattern with compositional results. The auto-updating templates do not require explicit rendering. Selecting a framework for our shopping cart example depends on how trivial the abstractions might be, whether implementation will be mostly templating, and where the data will need to live.
01:48:08 - 01:57:47
Questions & Code
Garann fields a couple questions from the first session and discusses some resources suggested by audience members. - https://github.com/addyosmani/backbone-fundamentals - https://github.com/backbone-boilerplate/backbone-boilerplate Starting files for coding the shopping cart example. Garann continues to discuss coding the shopping cart and her preferences around frameworks and templates. - http://dl.dropboxusercontent.com/u/476699/shopping_cart.zip
Part 3: Outside Tools
01:57:48 - 02:05:25
The Reason for Third-Party Tools
Third-party tools implore best practices, save time, and make it easy for code and teams to scale. They may involve managing CSS and/or markup or simply be a set of utilities, plugins or widgets.
02:05:26 - 02:14:51
CSS is a substantial part of your application and should be decoupled. The right tool can eliminate classes of layout and presentation problems. Object Oriented CSS: - http://oocss.org/ - http://www.slideshare.net/stubbornella/object-oriented-css Normalize CSS - https://necolas.github.io/normalize.css/
02:14:52 - 02:20:48
Like CSS, markup is equally as substantial in an application. It’s the foundation behind views and templates. Different deployments allow for the use of non-HTML syntax when defining markup. Markdown - http://daringfireball.net/projects/markdown/ HAML - http://haml.info/
02:20:49 - 02:27:07
CSS and Markup Tools
There are also tools that work with both HTML and CSS. They tend to be more unified and highly configurable. Twitter Bootstrap - http://twitter.github.io/bootstrap/ HTML5 Boilerplate - http://html5boilerplate.com/
02:27:08 - 02:38:35
Dependency Management Tools
Dependency management reduces the need to manually load/import scripts. It removes unnecessary code from the global namespace and is a necessity for robust architectures. Require JS: - http://requirejs.org/ - http://requirejs.org/docs/optimization.html Yepnope JS - http://yepnopejs.com/
02:38:36 - 02:49:15
Utility tools give you big or small abstractions. They may or may not involve DOM manipulation and allow instant access to best practices. Finding the balance between covering use cases and code size is the key to a good utility tool. Underscore - http://underscorejs.org/ Modernizr - http://modernizr.com/ jQuery - http://jquery.com
02:49:16 - 02:55:12
Plugins and Widgets
If you can imagine it, there’s a plugin for it. Don’t reinvent the wheel. While plugins are great, they tend to confine you to another tool. Widgets can be more flexible and easier to incorporate into any pattern. Finding the right plugin/widget can often times be difficult due to a lack of support or unusual implementation.
Part 4: Outside Tools, continued
02:55:13 - 03:12:38
Testing is easier said than done. It can be simple and straight forward with synchronous code. Asynchronous code can be much more complex. QUnit - http://qunitjs.com/ Mocha - http://visionmedia.github.io/mocha/ Audience Suggested: - http://pivotal.github.io/jasmine/ - http://sinonjs.org/ - http://casperjs.org/
03:12:39 - 03:22:41
Linters check code for possible errors and enforce a minimum set of optimizations. They can also help prevent surprises due to coercion. JSLint - http://www.jslint.com/ JSHint - http://www.jshint.com/
03:22:42 - 03:22:41
Documentation will decay if not given proper time and diligence. Postponing documentation causes it to become an insurmountable task. While inline comments are better than nothing, it’s best to adopt a tool to make documentation easier. JSDoc - https://github.com/jsdoc3/jsdoc
03:28:08 - 03:35:44
As an absolute minimum, concatenation and minification should be a part of a deployment process. Node has allowed for many open-source tools to emerge giving developers many options. UglifyJS - https://github.com/mishoo/UglifyJS Grunt - http://gruntjs.com/
03:35:45 - 03:45:19
Mature architectures typically follow the same steps throughout the development process. In these cases, they tend to use the same tools. Finding an all-in-one tool can eliminate a lot of repeated work. Enterprise tools can fit this description but may be less configurable. Garann, of course, favors the open sources. Yeoman - http://yeoman.io/
03:45:20 - 03:50:35
03:50:36 - 03:52:54
Questions & Wrap-up