Embed Size (px)
Citation preview
Inte
rnal
Architecting your FrontendYour mileage may vary
Ruben Teijeiro@rteijeiro
Senior Software ArchitectTieto, [email protected]
Inte
rnal
Frontend(of a device or program) interface directly accessed by the user and allowing access to further devices, programs, or databases.
© Tieto Corporation
Inte
rnal
Frontend
3
http://bradfrost.com/blog/post/frontend-design
© Tieto Corporation
Inte
rnal
Frontend Design
4
http://bradfrost.com/blog/post/frontend-design
• Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.
• A Frontend Designer understands UX principles and best practices.
• It’s crucial to treat frontend development as a core part of the design process.
© Tieto Corporation
Inte
rnal
User eXperience
5
© Tieto Corporation
Inte
rnal
VR GUIs
6
Inte
rnal
Frontend Frameworks
© Tieto Corporation
Inte
rnal
Frontend Frameworks
• CSS Frameworks
• JavaScript Frameworks
• Mobile Frameworks
8
Inte
rnal
CSS Frameworks
© Tieto Corporation
Inte
rnal
CSS Frameworks
• MaterializeCSS: http://materializecss.com
• Bootstrap: http://getbootstrap.com
• Foundation: http://foundation.zurb.com
10
© Tieto Corporation
Inte
rnal
MaterializeCSS
Based on Material Design by Google
http://www.google.com/design/spec/material-design
11
© Tieto Corporation
Inte
rnal
Bootstrap
Created by Twitter
12
© Tieto Corporation
Inte
rnal
Foundation
13
Inte
rnal
JavaScript Frameworks
Inte
rnal
JavaScript Frameworks
© Tieto Corporation
Inte
rnal
JavaScript Frameworks
• Angular: https://angularjs.org
• Ember: http://emberjs.com
• Backbone: http://backbonejs.org
• React: https://facebook.github.io/react
16
© Tieto Corporation
Inte
rnal
JavaScript Frameworks
17
http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks
© Tieto Corporation
Inte
rnal
JavaScript Frameworks
18
Inte
rnal
Mobile Frameworks
© Tieto Corporation
Inte
rnal
Mobile Frameworks
• Ionic: http://ionicframework.com
• React Native: https://facebook.github.io/react-native
• Meteor: https://www.meteor.com
20
© Tieto Corporation
Inte
rnal
Ionic
21
© Tieto Corporation
Inte
rnal
React Native
22
© Tieto Corporation
Inte
rnal
Meteor
23
Inte
rnal
Frontend ArchitectureA practical case with BackboneJS
© Tieto Corporation
Inte
rnal
Frontend Architecture
• Models• Collections• Views• Events• Routers• Templates
25
© Tieto Corporation
Inte
rnal
Models
• Models are the entity of an application that store data and contain some logic around data such as validation, conversion, and data interaction.
26
© Tieto Corporation
Inte
rnal
Models
var User = Backbone.Model.extend({ defaults: { firstname: "", lastname: "", address: "", city: "", phone: "" }});
27
© Tieto Corporation
Inte
rnal
Collections
• A collection is a group of models that includes a lot of functionality as well as Underscore utility methods to help you work on multiple data models.
28
© Tieto Corporation
Inte
rnal
Collections
var Users = Backbone.Collection.extend({ model: User});
29
© Tieto Corporation
Inte
rnal
Views
• Views present an idea of organizing your Document Object Model (DOM) interface into logical blocks, and represent the model and collection data in them.
30
© Tieto Corporation
Inte
rnal
Viewsvar usersView = Backbone.View.extend({ template: _.template( usersTemplate ), events: { 'dblclick label': 'edit' }, render: function() { this.$el.html( this.template( this.model.attributes ) ); return this; }, edit: function(e) { console.log(e.target + ' was double clicked.'); }});
31
© Tieto Corporation
Inte
rnal
Events
• Events are a basic inversion of control. Instead of having one function call another by name, the second function is registered as a handler to be called when a specific event occurs.
32
© Tieto Corporation
Inte
rnal
Events
Backbone.on('event', function() { console.log('Handled Backbone event');});
Backbone.trigger('event');
// logs: Handled Backbone event
33
© Tieto Corporation
Inte
rnal
Routers
• In Backbone, routers provide a way for you to connect URLs (either hash fragments, or real) to parts of your application. Any piece of your application that you want to be bookmarkable, shareable, and back-button-able, needs a URL.
34
© Tieto Corporation
Inte
rnal
Routersvar AppRouter = Backbone.Router.extend({ routes: { "*actions": "getHome", "users": "getUsers", }, getHome: function() { console.log("You are in the homepage."); }, getUsers: function() { var users = new usersView(); users.render(); }});
35
© Tieto Corporation
Inte
rnal
Templates
• Templates are used to create the visual elements of your interface using HTML markup. They should not include the logic of your application.
36
© Tieto Corporation
Inte
rnal
Templates
<ul> <li>{{firstname}}</li> <li>{{lastname}}</li> <li>{{address}}</li> <li>{{city}}</li> <li>{{phone}}</li></ul>
37
© Tieto Corporation
Inte
rnal
Organizing your code
38
© Tieto Corporation
Inte
rnal
Organizing your code
• Separate every component in different files (models,
collections, views and routers).
• Define an entry point of the application.
• Use namespaces.
39
© Tieto Corporation
Inte
rnal
Application Directory Structure
40
.|-- assets| |-- css| |-- fonts| `-- img|-- src| |-- models| |-- views| | |-- users| | |-- products| | `-- customers| `-- collections`-- templates
© Tieto Corporation
Inte
rnal
Modular Directory Structure
41
.|-- app| |-- modules| | |-- user| | | |-- models| | | |-- views| | | |-- collections| | `-- customer| | | |-- ...| |-- utils| `-- auth.
Inte
rnal
Module Bundlers
© Tieto Corporation
Inte
rnal
Module Bundlers
• Webpack: https://webpack.github.io
• Browserify: http://browserify.org
43
© Tieto Corporation
Inte
rnal
Browserify
44
© Tieto Corporation
Inte
rnal
Webpack
45
© Tieto Corporation
Inte
rnal
Webpack
46
Inte
rnal
Frontend Tools
© Tieto Corporation
Inte
rnal
Package Managers
48
© Tieto Corporation
Inte
rnal
Package Managers
• npm: https://www.npmjs.com
• Bower: http://bower.io
49
© Tieto Corporation
Inte
rnal
Task Runners
50
© Tieto Corporation
Inte
rnal
Task Runners
• Grunt: http://gruntjs.com
• Gulp: http://gulpjs.com
51
© Tieto Corporation
Inte
rnal
CSS Preprocessors
52
© Tieto Corporation
Inte
rnal
CSS Preprocessors
• SASS: http://sass-lang.com
• LESS: http://lesscss.org
• Compass: http://compass-style.org
53
© Tieto Corporation
Inte
rnal
Template Systems
54
© Tieto Corporation
Inte
rnal
Template Systems
• Handlebars: http://handlebarsjs.com
• Mustache: https://mustache.github.io
• Underscore: http://underscorejs.org
55
© Tieto Corporation
Inte
rnal
Linting
56
© Tieto Corporation
Inte
rnal
Linting Tools
• CSSLint: http://csslint.net
• ESLint: http://eslint.org
57
© Tieto Corporation
Inte
rnal
Testing
58
© Tieto Corporation
Inte
rnal
Testing
• QUnit: https://qunitjs.com
• CasperJS: http://casperjs.org
• Jasmine: http://jasmine.github.io
• PhantomJS: http://phantomjs.org
59
© Tieto Corporation
Inte
rnal
Visual Regression
60
© Tieto Corporation
Inte
rnal
http://shoov.io
61
Inte
rnal
WebServicesA practical case with Drupal
Inte
rnal
Questions
