Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Architecting your Frontend

711 views

Published on

Some insights about how to get started architecting your Frontend applications and what technologies and tools are available in the market to make your life easier.

Published in: Technology
  • Be the first to comment

Architecting your Frontend

  1. 1. Internal Architecting your Frontend Your mileage may vary Ruben Teijeiro @rteijeiro Senior Software Architect Tieto, CEM ruben.teijeiro@tieto.com
  2. 2. Internal Frontend (of a device or program) interface directly accessed by the user and allowing access to further devices, programs, or databases.
  3. 3. © Tieto Corporation Internal Frontend 3 http://bradfrost.com/blog/post/frontend-design
  4. 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. 5. © Tieto Corporation Internal User eXperience 5
  6. 6. © Tieto Corporation Internal VR GUIs 6
  7. 7. Internal Frontend Frameworks
  8. 8. © Tieto Corporation Internal Frontend Frameworks • CSS Frameworks • JavaScript Frameworks • Mobile Frameworks 8
  9. 9. Internal CSS Frameworks
  10. 10. © Tieto Corporation Internal CSS Frameworks • MaterializeCSS: http://materializecss.com • Bootstrap: http://getbootstrap.com • Foundation: http://foundation.zurb.com 10
  11. 11. © Tieto Corporation Internal MaterializeCSS Based on Material Design by Google http://www.google.com/design/spec/material-design 11
  12. 12. © Tieto Corporation Internal Bootstrap Created by Twitter 12
  13. 13. © Tieto Corporation Internal Foundation 13
  14. 14. Internal JavaScript Frameworks
  15. 15. Internal JavaScript Frameworks
  16. 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. 17. © Tieto Corporation Internal JavaScript Frameworks 17 http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks
  18. 18. © Tieto Corporation Internal JavaScript Frameworks 18
  19. 19. Internal Mobile Frameworks
  20. 20. © Tieto Corporation Internal Mobile Frameworks • Ionic: http://ionicframework.com • React Native: https://facebook.github.io/react-native • Meteor: https://www.meteor.com 20
  21. 21. © Tieto Corporation Internal Ionic 21
  22. 22. © Tieto Corporation Internal React Native 22
  23. 23. © Tieto Corporation Internal Meteor 23
  24. 24. Internal Frontend Architecture A practical case with BackboneJS
  25. 25. © Tieto Corporation Internal Frontend Architecture • Models • Collections • Views • Events • Routers • Templates 25
  26. 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. 27. © Tieto Corporation Internal Models var User = Backbone.Model.extend({ defaults: { firstname: "", lastname: "", address: "", city: "", phone: "" } }); 27
  28. 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. 29. © Tieto Corporation Internal Collections var Users = Backbone.Collection.extend({ model: User }); 29
  30. 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. 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. 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. 33. © Tieto Corporation Internal Events Backbone.on('event', function() { console.log('Handled Backbone event'); }); Backbone.trigger('event'); // logs: Handled Backbone event 33
  34. 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. 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. 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
  37. 37. © Tieto Corporation Internal Templates <ul> <li>{{firstname}}</li> <li>{{lastname}}</li> <li>{{address}}</li> <li>{{city}}</li> <li>{{phone}}</li> </ul> 37
  38. 38. © Tieto Corporation Internal Organizing your code 38
  39. 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. 40. © Tieto Corporation Internal Application Directory Structure 40 . |-- assets | |-- css | |-- fonts | `-- img |-- src | |-- models | |-- views | | |-- users | | |-- products | | `-- customers | `-- collections `-- templates
  41. 41. © Tieto Corporation Internal Modular Directory Structure 41 . |-- app | |-- modules | | |-- user | | | |-- models | | | |-- views | | | |-- collections | | `-- customer | | | |-- ... | |-- utils | `-- auth .
  42. 42. Internal Module Bundlers
  43. 43. © Tieto Corporation Internal Module Bundlers • Webpack: https://webpack.github.io • Browserify: http://browserify.org 43
  44. 44. © Tieto Corporation Internal Browserify 44
  45. 45. © Tieto Corporation Internal Webpack 45
  46. 46. © Tieto Corporation Internal Webpack 46
  47. 47. Internal Frontend Tools
  48. 48. © Tieto Corporation Internal Package Managers 48
  49. 49. © Tieto Corporation Internal Package Managers • npm: https://www.npmjs.com • Bower: http://bower.io 49
  50. 50. © Tieto Corporation Internal Task Runners 50
  51. 51. © Tieto Corporation Internal Task Runners • Grunt: http://gruntjs.com • Gulp: http://gulpjs.com 51
  52. 52. © Tieto Corporation Internal CSS Preprocessors 52
  53. 53. © Tieto Corporation Internal CSS Preprocessors • SASS: http://sass-lang.com • LESS: http://lesscss.org • Compass: http://compass-style.org 53
  54. 54. © Tieto Corporation Internal Template Systems 54
  55. 55. © Tieto Corporation Internal Template Systems • Handlebars: http://handlebarsjs.com • Mustache: https://mustache.github.io • Underscore: http://underscorejs.org 55
  56. 56. © Tieto Corporation Internal Linting 56
  57. 57. © Tieto Corporation Internal Linting Tools • CSSLint: http://csslint.net • ESLint: http://eslint.org 57
  58. 58. © Tieto Corporation Internal Testing 58
  59. 59. © Tieto Corporation Internal Testing • QUnit: https://qunitjs.com • CasperJS: http://casperjs.org • Jasmine: http://jasmine.github.io • PhantomJS: http://phantomjs.org 59
  60. 60. © Tieto Corporation Internal Visual Regression 60
  61. 61. © Tieto Corporation Internal http://shoov.io 61
  62. 62. Internal WebServices A practical case with Drupal
  63. 63. Internal Questions
  64. 64. Internal Ruben Teijeiro @rteijeiro Senior Software Architect Tieto, CEM ruben.teijeiro@tieto.com

×