Architecting your Frontend
4 likes974 views
The document outlines the importance of frontend architecture, emphasizing the design and development process using HTML, CSS, and JavaScript frameworks. It details various frontend frameworks, architectural components like models, views, and routers, and highlights the organization of code and tools necessary for effective frontend development. Additionally, it discusses the role of task runners, preprocessors, and testing frameworks in enhancing the frontend development workflow.
Architecting your Frontend
- 1. Internal Architecting your Frontend Your mileage may vary Ruben Teijeiro @rteijeiro Senior Software Architect Tieto, CEM ruben.teijeiro@tieto.com
- 2. Internal Frontend (of a device or program) interface directly accessed by the user and allowing access to further devices, programs, or databases.
- 4. © Tieto Corporation Internal 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.
- 5. © Tieto Corporation Internal User eXperience 5
- 6. © Tieto Corporation Internal VR GUIs 6
- 8. © Tieto Corporation Internal Frontend Frameworks • CSS Frameworks • JavaScript Frameworks • Mobile Frameworks 8
- 10. © Tieto Corporation Internal CSS Frameworks • MaterializeCSS: http://materializecss.com • Bootstrap: http://getbootstrap.com • Foundation: http://foundation.zurb.com 10
- 11. © Tieto Corporation Internal MaterializeCSS Based on Material Design by Google http://www.google.com/design/spec/material-design 11
- 12. © Tieto Corporation Internal Bootstrap Created by Twitter 12
- 16. © Tieto Corporation Internal JavaScript Frameworks • Angular: https://angularjs.org • Ember: http://emberjs.com • Backbone: http://backbonejs.org • React: https://facebook.github.io/react 16
- 17. © Tieto Corporation Internal JavaScript Frameworks 17 http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks
- 18. © Tieto Corporation Internal JavaScript Frameworks 18
- 20. © Tieto Corporation Internal Mobile Frameworks • Ionic: http://ionicframework.com • React Native: https://facebook.github.io/react-native • Meteor: https://www.meteor.com 20
- 22. © Tieto Corporation Internal React Native 22
- 24. Internal Frontend Architecture A practical case with BackboneJS
- 25. © Tieto Corporation Internal Frontend Architecture • Models • Collections • Views • Events • Routers • Templates 25
- 26. © Tieto Corporation Internal 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
- 27. © Tieto Corporation Internal Models var User = Backbone.Model.extend({ defaults: { firstname: "", lastname: "", address: "", city: "", phone: "" } }); 27
- 28. © Tieto Corporation Internal 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
- 29. © Tieto Corporation Internal Collections var Users = Backbone.Collection.extend({ model: User }); 29
- 30. © Tieto Corporation Internal 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
- 31. © Tieto Corporation Internal Views var 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
- 32. © Tieto Corporation Internal 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
- 33. © Tieto Corporation Internal Events Backbone.on('event', function() { console.log('Handled Backbone event'); }); Backbone.trigger('event'); // logs: Handled Backbone event 33
- 34. © Tieto Corporation Internal 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
- 35. © Tieto Corporation Internal Routers var 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
- 36. © Tieto Corporation Internal 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
- 38. © Tieto Corporation Internal Organizing your code 38
- 39. © Tieto Corporation Internal Organizing your code • Separate every component in different files (models, collections, views and routers). • Define an entry point of the application. • Use namespaces. 39
- 40. © Tieto Corporation Internal Application Directory Structure 40 . |-- assets | |-- css | |-- fonts | `-- img |-- src | |-- models | |-- views | | |-- users | | |-- products | | `-- customers | `-- collections `-- templates
- 41. © Tieto Corporation Internal Modular Directory Structure 41 . |-- app | |-- modules | | |-- user | | | |-- models | | | |-- views | | | |-- collections | | `-- customer | | | |-- ... | |-- utils | `-- auth .
- 43. © Tieto Corporation Internal Module Bundlers • Webpack: https://webpack.github.io • Browserify: http://browserify.org 43
- 48. © Tieto Corporation Internal Package Managers 48
- 49. © Tieto Corporation Internal Package Managers • npm: https://www.npmjs.com • Bower: http://bower.io 49
- 50. © Tieto Corporation Internal Task Runners 50
- 51. © Tieto Corporation Internal Task Runners • Grunt: http://gruntjs.com • Gulp: http://gulpjs.com 51
- 52. © Tieto Corporation Internal CSS Preprocessors 52
- 53. © Tieto Corporation Internal CSS Preprocessors • SASS: http://sass-lang.com • LESS: http://lesscss.org • Compass: http://compass-style.org 53
- 54. © Tieto Corporation Internal Template Systems 54
- 55. © Tieto Corporation Internal Template Systems • Handlebars: http://handlebarsjs.com • Mustache: https://mustache.github.io • Underscore: http://underscorejs.org 55
- 57. © Tieto Corporation Internal Linting Tools • CSSLint: http://csslint.net • ESLint: http://eslint.org 57
- 59. © Tieto Corporation Internal Testing • QUnit: https://qunitjs.com • CasperJS: http://casperjs.org • Jasmine: http://jasmine.github.io • PhantomJS: http://phantomjs.org 59
- 60. © Tieto Corporation Internal Visual Regression 60
- 62. Internal WebServices A practical case with Drupal
- 64. Internal Ruben Teijeiro @rteijeiro Senior Software Architect Tieto, CEM ruben.teijeiro@tieto.com