Building an UI Framework from Scratch

Created by Kianosh Pourian / @kianoshp

Blog: http://innovatorylife.com



Other presentations: http://kiano.sh/1vMGWFs

About me

  


User interface Developer

Part time designers and User experience consultant

Pretend to be an UI architect

Clients: Staples, Isobar/Molecular, MIT, VMWare, Novartis, Harvard Business School, Confer (Startup), American Student Assistance, Altisource Labs, Percussion Software, Harvard Business Review

What is an UI Framework?

UI Framework Contributors


UI Framework Contributors


UI Framework Contributors


UI Framework Contributors


UI Framework Contributors


UI Development

  • 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
    • Progress
  • No clear design either
  • Initial framework
    • Backbone
    • Marionette
    • jQuery UI widget factory

Current Tech stack

  • AngularJS

A framework needs a framework


Build a proper base


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 UI kits
    • EXT JS
    • Kendo UI
    • Angular UI
  • 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

Example

  • Requirement
    • Data grid/tabular data with filter, sort, and infinite scroll


Proper implementation


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
  • Documenting the API - using docular

Unit testing

Package management

  • Bower is the obvious choice
  • Not very many options for a private repo
  • Used Maven

Scaffolding

  • Ensure the proper file structure Yeoman was used for scaffolding
  • Custom generator was creator to:
    • Create initial scaffold
    • Create generator for
      • Module creation
      • Directive creation
      • Service creation
  • https://www.npmjs.org/package/generator-realsuite
  • http://yeoman.io/generators.html

More best practices

And miles to go before I sleep

  • Scope management
  • Logging

Thank you 

&

Questions?

Building an UI framework from scratch

By Kianosh Pourian

Building an UI framework from scratch

  • 4,943