Building an UI Framework from Scratch
Created by Kianosh Pourian / @kianoshp
Blog: http://innovatorylife.com
Follow along @ http://kiano.sh/ui-framework-from-scratch
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
- Test runner - Karma
- BDD testing - Jasmine
- Functional testing - Protractor
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