Your SlideShare is downloading. ×
0
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Voorhoede - Front-end architecture

3,712

Published on

Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/ …

Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/

At De Voorhoede (http://voorhoede.nl) I'm responsible for setting up new front-end projects in such a way that it's easy for teams to work with. This presentation explains how we structure these projects. The presentation includes some tips on structuring larger AngularJS projects.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,712
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jasper Moelker @jbmoelker
  • 2. (ng) Architecture best practices for setting up front-end / AngularJS projects ! warning: opinions ahead
  • 3. (NG) Architecture Why care about front-end architecture? ! How to approach setting it up? ! modular structures ! Use tools that help you image source: http://static.onemansblog.com/wp-content/uploads/2011/05/impossible-lego-03.jpg de voorhoede
  • 4. Why care? aim: easy to use for (new) team members
  • 5. Why care? Aim: easy to use for (New) team members • • • • • • easy to understand easy to maintain easy to extend easy to re-use easy to deploy easy to distribute image source: http://www.registrycleaner.us.com de voorhoede
  • 6. Ok, so how? approach: clear rules and standards
  • 7. Ok, so how? Approach: clear rules & standards • • • • • • clear naming conventions clear directory structure clear dependency declarations clear code styles clear documentation (for what’s still unclear) clear tests & tasks for everything else image source: http://www.carlosdinares.com de voorhoede
  • 8. Think Modular -
  • 9. think modular Atomic design by Brad Frost source: http://bradfrostweb.com/blog/post/atomic-web-design/ see also: http://demo.pattern-lab.info/ de voorhoede
  • 10. think modular BEM blocks on smashing source: http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/ see also: http://bem.info/ de voorhoede
  • 11. think modular used in ng tutorial source: https://github.com/angular/angular-seed/tree/master/app/js de voorhoede
  • 12. think modular Brian ford on huuuuuge (5x) angular apps used in batarang source: http://briantford.com/blog/huuuuuge-angular-apps.html see also: https://github.com/angular/angularjs-batarang/ de voorhoede
  • 13. think modular ng app & ng boilerplate source: https://github.com/angular-app/angular-app/tree/master/client/src/app see also: https://github.com/ngbp/ngbp/tree/v0.3.1-release/src/app/home
 read: http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript de voorhoede
  • 14. think modular other frameworks / concepts • • • • • Symfony 1: plugins Symfony 2: bundles (example on right) Web components Component.io Bower? source: http://blog.solutionset.com/2012/09/14/easy-way-to-transform-a-twitter-oauth-library-into-a-symfony-2-bundle/ de voorhoede
  • 15. think modular Components Atomics Views original image: http://bradfrostweb.com/blog/post/atomic-web-design/ de voorhoede
  • 16. Think modular App source structure ./source/ common/ modules/ components/ views/ vendor/ app.js bootstrap.js (+json) index.html <— <— <— <— <— <— atomics re-usable components unique views third party modules app core (config), include views bootstrap app if supported de voorhoede
  • 17. Atomics elementary app rules & assets typically no dependencies or only dependent on other atomics, examples: • • • global css rules and variables (style guide) global assets like logo, fonts, icons high level (AngularJS) services:
 pub sub, rest service, transformers • • common (AngularJS) directives common (AngularJS) filters source: http://www.heringinternational.com/de/beton/betoglass-4505.htm de voorhoede
  • 18. Atomics structure atomics common/ assets/ fonts/ images/ scss/ atomics/ _icons.scss mixins/ _mixin-name.scss directives/ view-box-directive.js filters/ services/ rest-service.js <— providers, services, factories de voorhoede
  • 19. Atomics in AngularJS /** * @ngdoc directive * @name directives.viewBox.directive:viewBox * @description Supports using expression for SVG viewBox, by using `data-view-box` which sets * `viewBox` attribute. Code adapted from http://stackoverflow.com/a/14596319 * @example <doc:example> <doc:source> <svg data-view-box="{{ APP_VIEWPORT.viewBox }}"></svg> </doc:source> </doc:example> */ angular.module('directives.viewBox', []) // no dependencies .directive('viewBox', [ function () { 'use strict'; return { // no template, or other dependencies link: function (scope, element, attributes) { attributes.$observe('viewBox', function(value) { element.attr('viewBox', value); }); } }; } ]); de voorhoede
  • 20. Components Re-usable encapsulated building blocks • include structure (markup), presentation (style), behaviour (scripts), assets, docs, tests.
 • • important: declare dependencies in AngularJS use isolate scope to encapsulate component source: http://www.heringinternational.com/en/news&cmd=details&newsid=1179.htm de voorhoede
  • 21. componentS Structure component modules/ components/
 my-component/ media/ _my-component.scss / .less my-component-template.html my-component.js my-component-directive.js my-component-controller.js my-component-controller.test.js my-component-service.js my-component-service.test.js README.md <— dependencies, config, ngdocs de voorhoede
  • 22. Component in AngularJS /** * @ngdoc overview * @name components.pager * @requires common/services.isPositiveInteger */ angular.module('components.pager', ['services.isPositiveInteger']); ! /** * @ngdoc directive * @name components.pager.directive:pager */ angular.module('components.pager') .directive('pager', ['isPositiveInteger', function (isPositiveInteger) { 'use strict'; return { templateUrl: 'modules/components/pager/pager-template.html', replace: true, scope: { page: '=', itemsPerPage: '@', itemsTotal: '@' }, link: function (scope, element, attributes) {} } }]); de voorhoede
  • 23. Views Unique compilation of components in AngularJS • • • uses ngView $routeProvider $stateProvider source: http://demavo.nl/literatuur/mondriaan.html de voorhoede
  • 24. Views Structure view modules/ views/
 my-view/ media/ _my-view.scss / .less my-view-view.html my-view.js my-view-directive.js my-view-controller.js my-view-controller.test.js README.md <— dependencies, config, ngdocs de voorhoede
  • 25. View in AngularJS /** * @ngdoc overview * @name views.myView * @description My view module. * [detailed description of 'my view' module, which doesn't fit in this presentation] */ angular .module('views.myView', [ 'ngRoute', 'components.modal', 'components.pager', 'services.restService' ]) ! .config([ '$routeProvider', function ($routeProvider) { 'use strict'; $routeProvider .when('/view/my-view/:action', { templateUrl: 'modules/views/my-view/my-view-view.html', controller: 'MyViewController' }); } ]); de voorhoede
  • 26. Code style help keep your code clean & coherent
  • 27. Code quality tools Configuration files in root ./ .csslintrc .jshintrc .jscs.json dubfind.cfg README.md resources: csslint: http://csslint.net/ jshint: http://www.jshint.com/ jscs: https://github.com/mdevils/node-jscs dufind: https://github.com/sfrancisx/dupfind de voorhoede
  • 28. Document your app -
  • 29. App documentation README’s & NGDOCS …/ module.js index.ngdoc README.md ! ! ! ! ! and use a style and / or code guide? for rules like use ‘ngMin proof syntax’. use ngdocs: https://github.com/m7r/grunt-ngdocs de voorhoede
  • 30. Test your code -
  • 31. test your code tests structure ./tests/ end-to-end/ helpers/ report/ csslint.xml jshint.xml karma.xml vendor/ end-to-end.js karma.js <— eg. mocks <— e2e and <— unit test config ! 
 test configs use bootstrap.json tests run locally and on Jenkins CI de voorhoede
  • 32. Automate write tasks for repetitive actions
  • 33. Automate Tasks structure ./Gruntfile.js —————> ./tasks/ grunt/ configuration/ task-name.js tasks/ task-name.js templates/ utilities/ phing/ java/ module.exports = function (grunt) { 'use strict'; ! // Use `tasks/grunt/configuration/index.js`, // which reads package.json and loads all task configs: var config = require('./tasks/grunt/configuration')(grunt); grunt.config.init(config); ! // Load all npm installed grunt tasks. require(‘matchdep').filterDev('grunt-*') .forEach(grunt.loadNpmTasks); ! // load all project grunt tasks. grunt.task.loadTasks('tasks/grunt/tasks'); grunt.registerTask('default', [‘task-wizard']); }; ! we run tasks both locally and on server using Jenkins CI source: http://gruntjs.com/img/grunt-logo.png de voorhoede
  • 34. Grunt Task wizard 1) Select task category 3) Enter arguments 2) Select project task Result: New component created * new directory created * html, js, scss, readme files created * registers module in index files source: https://gist.github.com/jbmoelker/8384456#file-task-wizard-js de voorhoede
  • 35. Automate Develop task Deploy / distribute task // tasks/grunt/tasks/develop.js (non-ng project) ! module.exports = function (grunt) { 'use strict'; grunt.registerTask( 'develop', 'Setup web dir for development and watch source', function (mode) { var tasks = [ 'compile-index:development', 'compile-html:development', 'copy:development', 'sass:development', 'concat:development' ]; if(mode !== 'no-watch'){ tasks.push('watch'); } grunt.task.run(tasks); } ); }; // tasks/grunt/tasks/deploy.js (ng-project) ! module.exports = function (grunt) { 'use strict'; grunt.registerTask( 'deploy', 'Concatenates and minifies source files', function () { grunt.task.run([ 'clean:distribution', 'copy', 'ngtemplates', 'concat', 'uglify', 'clean:templates' ]); } ); }; de voorhoede
  • 36. Think modular App structure ./ distribution/ docs/ source/ common/ modules/ components/ views/ vendor/ app.js bootstrap.js index.html tasks/ tests/ web/ <— auto generated via ‘grunt deploy’ <— auto generated via ‘grunt docs’ <— atomics <— re-usable components <— unique views <— task config, templates, utilities <— test config, e2e, helpers, reports <— auto generated via ‘grunt develop’ de voorhoede

×