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.

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.

3. © Tieto Corporation
Internal
Frontend
3
http://bradfrost.com/blog/post/frontend-design

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

7. Internal
Frontend Frameworks

8. © Tieto Corporation
Internal
Frontend Frameworks
• CSS Frameworks
• JavaScript Frameworks
• Mobile Frameworks
8

9. Internal
CSS Frameworks

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

13. © Tieto Corporation
Internal
Foundation
13

14. Internal
JavaScript Frameworks

15. Internal
JavaScript Frameworks

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

19. Internal
Mobile Frameworks

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. © Tieto Corporation
Internal
Ionic
21

22. © Tieto Corporation
Internal
React Native
22

23. © Tieto Corporation
Internal
Meteor
23

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

37. © Tieto Corporation
Internal
Templates
<ul>
<li>{{firstname}}</li>
<li>{{lastname}}</li>
<li>{{address}}</li>
<li>{{city}}</li>
<li>{{phone}}</li>
</ul>
37

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
.

42. Internal
Module Bundlers

43. © Tieto Corporation
Internal
Module Bundlers
• Webpack: https://webpack.github.io
• Browserify: http://browserify.org
43

44. © Tieto Corporation
Internal
Browserify
44

45. © Tieto Corporation
Internal
Webpack
45

46. © Tieto Corporation
Internal
Webpack
46

47. Internal
Frontend Tools

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

56. © Tieto Corporation
Internal
Linting
56

57. © Tieto Corporation
Internal
Linting Tools
• CSSLint: http://csslint.net
• ESLint: http://eslint.org
57

58. © Tieto Corporation
Internal
Testing
58

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

61. © Tieto Corporation
Internal
http://shoov.io
61

62. Internal
WebServices
A practical case with Drupal

63. Internal
Questions

64. Internal
Ruben Teijeiro
@rteijeiro
Senior Software Architect
Tieto, CEM
ruben.teijeiro@tieto.com