SlideShare a Scribd company logo
1 of 37
Download to read offline
Jasper Moelker
@jbmoelker
(ng) Architecture
best practices for setting up front-end / AngularJS projects

! warning: opinions ahead
(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
Why care?
aim: easy to use for (new) team members
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
Ok, so how?
approach: clear rules and standards
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
Think Modular
-
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
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
think modular

used in ng tutorial
source: https://github.com/angular/angular-seed/tree/master/app/js

de voorhoede
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
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
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
think modular

Components

Atomics

Views
original image: http://bradfrostweb.com/blog/post/atomic-web-design/

de voorhoede
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
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
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
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
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
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
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
Views
Unique
compilation
of
components
in AngularJS

•
•
•

uses ngView
$routeProvider
$stateProvider

source: http://demavo.nl/literatuur/mondriaan.html

de voorhoede
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
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
Code style
help keep your code clean & coherent
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
Document your app
-
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
Test your code
-
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
Automate
write tasks for repetitive actions
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
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
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
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
Voorhoede - Front-end architecture

More Related Content

What's hot

Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllTodd Moy
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Atomic Design
Atomic Design Atomic Design
Atomic Design Rey Mayson
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic DesignAndrew Jones
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern LabDave Olsen
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Atomic Design Presentation for Polaris Industries
Atomic Design Presentation for Polaris IndustriesAtomic Design Presentation for Polaris Industries
Atomic Design Presentation for Polaris IndustriesAlfonso Moreno
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentAizat Faiz
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
 

What's hot (20)

Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Atomic design
Atomic designAtomic design
Atomic design
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
Atomic Design
Atomic Design Atomic Design
Atomic Design
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Atomic Design Presentation for Polaris Industries
Atomic Design Presentation for Polaris IndustriesAtomic Design Presentation for Polaris Industries
Atomic Design Presentation for Polaris Industries
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin Development
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
 

Viewers also liked

Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Design for people, Code for computers - Jasper Moelker (18 apr 2013)Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Design for people, Code for computers - Jasper Moelker (18 apr 2013)Jasper Moelker
 
How ethnography helps product design
How ethnography helps product designHow ethnography helps product design
How ethnography helps product designSam Ladner
 
IIA TIMES, Special Issue, February 2017, Edited by Sarbjit Bahga
IIA TIMES, Special Issue, February 2017, Edited by Sarbjit BahgaIIA TIMES, Special Issue, February 2017, Edited by Sarbjit Bahga
IIA TIMES, Special Issue, February 2017, Edited by Sarbjit BahgaSarbjit Bahga
 
Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...
Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...
Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...Dr Igor Calzada, MBA, FeRSA
 
Creative Ethnography for Design
Creative Ethnography for DesignCreative Ethnography for Design
Creative Ethnography for DesignJames Wilson
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project Elad Hirsch
 
Step by Step - AngularJS
Step by Step - AngularJSStep by Step - AngularJS
Step by Step - AngularJSInfragistics
 
Hierarchy Of Open Spaces
Hierarchy Of Open SpacesHierarchy Of Open Spaces
Hierarchy Of Open SpacesRavtej Singh
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 

Viewers also liked (20)

Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Design for people, Code for computers - Jasper Moelker (18 apr 2013)Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Design for people, Code for computers - Jasper Moelker (18 apr 2013)
 
How ethnography helps product design
How ethnography helps product designHow ethnography helps product design
How ethnography helps product design
 
IIA TIMES, Special Issue, February 2017, Edited by Sarbjit Bahga
IIA TIMES, Special Issue, February 2017, Edited by Sarbjit BahgaIIA TIMES, Special Issue, February 2017, Edited by Sarbjit Bahga
IIA TIMES, Special Issue, February 2017, Edited by Sarbjit Bahga
 
Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...
Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...
Keynote Speaker on State Conference on Culture, Valladolid, Spain (8-10 March...
 
Creative Ethnography for Design
Creative Ethnography for DesignCreative Ethnography for Design
Creative Ethnography for Design
 
Visual Research methods
Visual Research methodsVisual Research methods
Visual Research methods
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Step by Step - AngularJS
Step by Step - AngularJSStep by Step - AngularJS
Step by Step - AngularJS
 
History of Urban Design
History of Urban DesignHistory of Urban Design
History of Urban Design
 
Urban Design - temporal dimension
Urban Design - temporal  dimensionUrban Design - temporal  dimension
Urban Design - temporal dimension
 
Design principles
Design principlesDesign principles
Design principles
 
FUTURE OF PUBLIC SPACES
FUTURE OF  PUBLIC SPACESFUTURE OF  PUBLIC SPACES
FUTURE OF PUBLIC SPACES
 
Contemporary Urban Design
Contemporary Urban DesignContemporary Urban Design
Contemporary Urban Design
 
Urban Design - functional dimension
Urban Design - functional  dimension Urban Design - functional  dimension
Urban Design - functional dimension
 
Introduction to research methods
Introduction to research methods Introduction to research methods
Introduction to research methods
 
Hierarchy Of Open Spaces
Hierarchy Of Open SpacesHierarchy Of Open Spaces
Hierarchy Of Open Spaces
 
Urban spaces
Urban spaces  Urban spaces
Urban spaces
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Urban open spaces
Urban open spacesUrban open spaces
Urban open spaces
 
Urban spaces
Urban spacesUrban spaces
Urban spaces
 

Similar to Voorhoede - Front-end architecture

Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java DevelopersYakov Fain
 
Heroku pop-behind-the-sense
Heroku pop-behind-the-senseHeroku pop-behind-the-sense
Heroku pop-behind-the-senseBen Lin
 
Web Components v1
Web Components v1Web Components v1
Web Components v1Mike Wilcox
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSGunnar Hillert
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Fwdays
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Matt Raible
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSAntonio Peric-Mazar
 
Angular Intermediate
Angular IntermediateAngular Intermediate
Angular IntermediateLinkMe Srl
 
Build Web Apps using Node.js
Build Web Apps using Node.jsBuild Web Apps using Node.js
Build Web Apps using Node.jsdavidchubbs
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Eliran Eliassy
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsAviran Cohen
 
Dgeni documentation generator
Dgeni   documentation generatorDgeni   documentation generator
Dgeni documentation generatorPeter Darwin
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123Parag Gajbhiye
 

Similar to Voorhoede - Front-end architecture (20)

Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java Developers
 
Heroku pop-behind-the-sense
Heroku pop-behind-the-senseHeroku pop-behind-the-sense
Heroku pop-behind-the-sense
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
mean stack
mean stackmean stack
mean stack
 
RequireJS
RequireJSRequireJS
RequireJS
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Angular Intermediate
Angular IntermediateAngular Intermediate
Angular Intermediate
 
Build Web Apps using Node.js
Build Web Apps using Node.jsBuild Web Apps using Node.js
Build Web Apps using Node.js
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
Dgeni documentation generator
Dgeni   documentation generatorDgeni   documentation generator
Dgeni documentation generator
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123
 

More from Jasper Moelker

DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)
DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)
DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)Jasper Moelker
 
Living + Sport (educational project) - Maquette (Jan 2007)
Living + Sport (educational project) - Maquette (Jan 2007)Living + Sport (educational project) - Maquette (Jan 2007)
Living + Sport (educational project) - Maquette (Jan 2007)Jasper Moelker
 
Living + Sport (educational project) - Posters (Jan 2007)
Living + Sport (educational project) - Posters (Jan 2007)Living + Sport (educational project) - Posters (Jan 2007)
Living + Sport (educational project) - Posters (Jan 2007)Jasper Moelker
 
Living + Sport (educational project) - Presentation (Jan 2007)
Living + Sport (educational project) - Presentation (Jan 2007)Living + Sport (educational project) - Presentation (Jan 2007)
Living + Sport (educational project) - Presentation (Jan 2007)Jasper Moelker
 
Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...
Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...
Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...Jasper Moelker
 
CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate (18 Jun 2010)
CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate  (18 Jun 2010)CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate  (18 Jun 2010)
CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate (18 Jun 2010)Jasper Moelker
 
PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...
PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...
PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...Jasper Moelker
 
Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)
Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)
Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)Jasper Moelker
 
P4 Architecture (Panels (png version)) by Jasper Moelker
P4 Architecture (Panels (png version)) by Jasper MoelkerP4 Architecture (Panels (png version)) by Jasper Moelker
P4 Architecture (Panels (png version)) by Jasper MoelkerJasper Moelker
 
P4 Architecture by Jasper Moelker
P4 Architecture by Jasper MoelkerP4 Architecture by Jasper Moelker
P4 Architecture by Jasper MoelkerJasper Moelker
 
Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)
Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)
Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)Jasper Moelker
 
(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...
(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...
(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...Jasper Moelker
 
(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...
(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...
(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...Jasper Moelker
 
(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...
(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...
(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...Jasper Moelker
 
Publicness The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)
Publicness   The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)Publicness   The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)
Publicness The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)Jasper Moelker
 
Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...
Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...
Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...Jasper Moelker
 
Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...
Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...
Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...Jasper Moelker
 
Informality as Strategy by Bart Aptroot (17 Apr 2009)
Informality as Strategy by Bart Aptroot (17 Apr 2009)Informality as Strategy by Bart Aptroot (17 Apr 2009)
Informality as Strategy by Bart Aptroot (17 Apr 2009)Jasper Moelker
 
Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...
Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...
Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...Jasper Moelker
 
CSI.SP: 'In SP' Project Presentations (17 Apr 2009)
CSI.SP: 'In SP' Project Presentations (17 Apr 2009)CSI.SP: 'In SP' Project Presentations (17 Apr 2009)
CSI.SP: 'In SP' Project Presentations (17 Apr 2009)Jasper Moelker
 

More from Jasper Moelker (20)

DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)
DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)
DCE map - Map your project by Jasper Moelker, Active IDs (19 Oct 2010)
 
Living + Sport (educational project) - Maquette (Jan 2007)
Living + Sport (educational project) - Maquette (Jan 2007)Living + Sport (educational project) - Maquette (Jan 2007)
Living + Sport (educational project) - Maquette (Jan 2007)
 
Living + Sport (educational project) - Posters (Jan 2007)
Living + Sport (educational project) - Posters (Jan 2007)Living + Sport (educational project) - Posters (Jan 2007)
Living + Sport (educational project) - Posters (Jan 2007)
 
Living + Sport (educational project) - Presentation (Jan 2007)
Living + Sport (educational project) - Presentation (Jan 2007)Living + Sport (educational project) - Presentation (Jan 2007)
Living + Sport (educational project) - Presentation (Jan 2007)
 
Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...
Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...
Facade Refurbishment of Rijkswaterstaat Westraven by Jasper Moelker (October ...
 
CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate (18 Jun 2010)
CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate  (18 Jun 2010)CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate  (18 Jun 2010)
CSI.Lagos: Lagos - Mega City or Crisis City - Bukka debate (18 Jun 2010)
 
PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...
PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...
PermaCity: Hong Kong Fantasies - Presentation Alternative Economies (31 Oct 2...
 
Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)
Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)
Graduation defense 'Density & Daylight' by Jasper Moelker (05 Nov 2009)
 
P4 Architecture (Panels (png version)) by Jasper Moelker
P4 Architecture (Panels (png version)) by Jasper MoelkerP4 Architecture (Panels (png version)) by Jasper Moelker
P4 Architecture (Panels (png version)) by Jasper Moelker
 
P4 Architecture by Jasper Moelker
P4 Architecture by Jasper MoelkerP4 Architecture by Jasper Moelker
P4 Architecture by Jasper Moelker
 
Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)
Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)
Edulearn09: Evaluation ICT tools CSI.SP by Jasper Moelker (06 July 2009)
 
(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...
(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...
(Inter)national Facades: International Building Teams by Nils Eekhout (28 May...
 
(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...
(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...
(Inter)national Facades: Integral Facade Design (MSc3 project) by Charlotte H...
 
(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...
(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...
(Inter)national Facades: International Facade Master: WHY? by Arie Bergsma (2...
 
Publicness The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)
Publicness   The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)Publicness   The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)
Publicness The Power Of Control by Chris Rovers, Nicola Knop (17 Apr 2009)
 
Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...
Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...
Cortiços: Informal housing at its margin by Flavio Faggion, Jaqueline Rodrigu...
 
Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...
Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...
Picturing São Paulo by Jan van Ballegooijen, Martine Verhoeven, Rutger Huiber...
 
Informality as Strategy by Bart Aptroot (17 Apr 2009)
Informality as Strategy by Bart Aptroot (17 Apr 2009)Informality as Strategy by Bart Aptroot (17 Apr 2009)
Informality as Strategy by Bart Aptroot (17 Apr 2009)
 
Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...
Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...
Minhocão - Informal use of the Urban Highway by Arife Karaosmanoglu, Toon Sta...
 
CSI.SP: 'In SP' Project Presentations (17 Apr 2009)
CSI.SP: 'In SP' Project Presentations (17 Apr 2009)CSI.SP: 'In SP' Project Presentations (17 Apr 2009)
CSI.SP: 'In SP' Project Presentations (17 Apr 2009)
 

Recently uploaded

Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 

Recently uploaded (20)

Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 

Voorhoede - Front-end architecture

  • 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
  • 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
  • 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
  • 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
  • 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