FrontendMasters.com – Web UI Architecture [27 MP4]
English | Size: 1.16 GB (1,249,627,388 bytes )
Category: Tutorial
Garann walks through considerations you need to make when building an architecture for your web application. She covers javascript architecture and lots of tools you can use to improve your client-side stack.
Table of Contents
Part 1: Introduction to javascript Architecture
0:01:04 – 0: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.
0:06:28 – 0:12:15 What time is architecture time? Obviously starting a new project is the right time. However, architecture should be added to existing pages if they contain multiple states, well-defined types of objects or repeated code.
0:12:16 – 0: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.
0:19:15 – 0:26:07 Patterns Overview There are many common patterns in javascript like Model-View-Controller, Model-View-Viewmodel, etc. Garann spends a few minutes defining a few patters and describing their differences.
0:26:08 – 0:40:48 Patterns Explained Garann discusses the concepts of a Model-View-* pattern using the Backbone.js Todo application.
0:40:49 – 0: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.
Part 2: Abstractions and Frameworks
0:50:00 – 1: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.
1:03:10 – 1: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?
1:13:02 – 1: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.
1:18:36 – 1:31:40 Angular JS 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/
1:31:41 – 1:39:56 Backbone 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/
1:39:57 – 1:48:07 Ember 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/
1:48:08 – 1: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
Part 3: Outside Tools
1:57:48 – 2: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.
2:05:26 – 2:14:51 CSS Tools 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/
2:14:52 – 2:20:48 Markup Tools 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/
2:20:49 – 2: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/
2:27:08 – 2: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/
2:38:36 – 2:49:15 Utilities 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
2:49:16 – 2: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
2:55:13 – 3:12:38 Testing Tools 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/
3:12:39 – 3:22:41 Linting 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/
3:22:42 – 3:22:41 Documentation 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
3:28:08 – 3:35:44 Deployment Process 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/
3:35:45 – 3:45:19 All-In-One Tools 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/
3:45:20 – 3:50:35 Outside Tools Garann concludes the discussion about third-party tools with a few additional resources that might come in handy
– Node JS: http://nodejs.org/
– Template Engines
– CSS Preprocessors & javascript Transpilers
3:50:36 – 3:52:54 Questions & Wrap-up Final questions from the audience and session wrap-up
What do you mean when you say javascript transpilers are portable?
Banned No
DOWNLOAD:
http://rapidgator.net/file/0f1f587afbabf90288a8b5f61e472e4a/Frontend_Masters_-_Web_UI_Architecture.part1.rar.html
http://rapidgator.net/file/2d2d00af27e2f7817766e097d185d7cc/Frontend_Masters_-_Web_UI_Architecture.part2.rar.html
http://nitroflare.com/view/12B0D2D72B39793/Frontend_Masters_-_Web_UI_Architecture.part1.rar
http://nitroflare.com/view/709DA1C806369A3/Frontend_Masters_-_Web_UI_Architecture.part2.rar
If any links die or problem unrar, send request to http://goo.gl/aUHSZc
Leave a Reply