What is an UI Framework

• JavaScript
  • Not re-inventing the wheel
  • Using a MVW framework
• HTML
• CSS
  • Direct translation of design
  • Using tools like Sass or LESS
  • Building a style guide
• Other Tools
  • Grunt
  • Yeoman
  • Bower

Current problem to tackle

• Multiple products that have been developed and deployed as silo products
• Creating a suite of products that can contain any number of the products from the suite
• Unified look and feel

Original Tech stack

• No unified framework
• Technologies used:
  • ExtJS
  • Backbone/Marionette
  • Progress
• No clear design either

Current Tech stack

• AngularJS

Goals

• Unified design
• Re-usable components
• Contribution of code/widgets/services
• Coding standards
• Consumption of code/widgets/services

UI Architect

=

Benevolent Dictator

UI Architect

=

Benevolent Dictator

Edicts (unpopular ones)

• No Bootstrap or Foundation CSS
• No Third party plugins
• Majority of components are made in house
• example
• another example

Method to the madness

• Be able to implement the design
• Be able to create widgets/components/services that can satisfy multitude of products and their requirements
• Be able to update widgets/components (whether they are custom made or 3rd party) to meet the future needs

AngularJS development

File organization

• Keep file organized
• Not very many good examples for large scale applications
• Most tutorials skim over best practices

Piles on the floor

The sock drawer

Modularity

AngularJS Implementation

• How to take full advantage of AngularJS's features
• When to use:
  • Directives
  • Services
  • Controllers
  • Routes/Config/Constant

App/Module

• All widgets/components/services are contained within a module
• A module can be a service for example to implement infinite scrolling or a facade for REST calls
• Or it can be a self containing widget like data grid or date picker
• The Turducken pattern - a module is injectable into any other module

Implementation rules

• Directives:
  • Majority of HTML will be contained in Directives
  • If any DOM manipulation is needed, it is to be done here
• Service:
  • Abstraction is key
  • Take advantage of all the tools: factory, service, and provider

Other implementation rules

• Templates:
  • All templates are in a JS file & accessible through a global variable

var JST = JST || {};

_.extend(JST, {
	'rfng-accordion': '<div class="fondation-accordion-group" ng-transclude></div>'
});						

//implementation
angular.module('rfng.common.accordion')
	.directive('rfngAccordion', [function () {
		return {
			restrict: 'AC'
			, controller: 'RfngAccordionController'
			, transclude: true
			, replace: false
			, template: JST['rfng-accordion']
		};
	}]);						
								

More implementation rules

• Filters:
  • Another level of abstraction
  • Usage: formatting, filtering, and sorting
• Don't forget about 'config', 'constant', and 'run'.

Coding convention

• Unified naming convention
• Ability to package each widget in order for proper consumption
• Take full advantage of Yeoman for scaffolding and Bower for package management

More best practices

• Basic gotchas
• Misko's presentation on best practices
• Best Practice Recommendations for Angular App Structure