Architecting your Frontend

Architecting your FrontendYour mileage may vary

Ruben Teijeiro@rteijeiro

Senior Software ArchitectTieto, CEMruben.teijeiro@tieto.com

Frontend(of a device or program) interface directly accessed by the user and allowing access to further devices, programs, or databases.

Frontend

http://bradfrost.com/blog/post/frontend-design

Frontend Design

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.

User eXperience

VR GUIs

Frontend Frameworks

• CSS Frameworks

• JavaScript Frameworks

• Mobile Frameworks

CSS Frameworks

• MaterializeCSS: http://materializecss.com

• Bootstrap: http://getbootstrap.com

• Foundation: http://foundation.zurb.com

MaterializeCSS

Based on Material Design by Google

http://www.google.com/design/spec/material-design

Bootstrap

Created by Twitter

Foundation

JavaScript Frameworks

• Angular: https://angularjs.org

• Ember: http://emberjs.com

• Backbone: http://backbonejs.org

• React: https://facebook.github.io/react

http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks

Mobile Frameworks

• Ionic: http://ionicframework.com

• React Native: https://facebook.github.io/react-native

• Meteor: https://www.meteor.com

React Native

Meteor

Frontend ArchitectureA practical case with BackboneJS

Frontend Architecture

• Models• Collections• Views• Events• Routers• Templates

Models

• Models are the entity of an application that store data and contain some logic around data such as validation, conversion, and data interaction.

Models

var User = Backbone.Model.extend({ defaults: { firstname: "", lastname: "", address: "", city: "", phone: "" }});

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.

Collections

var Users = Backbone.Collection.extend({ model: User});

• Views present an idea of organizing your Document Object Model (DOM) interface into logical blocks, and represent the model and collection data in them.

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.'); }});

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.

Events

Backbone.on('event', function() { console.log('Handled Backbone event');});

Backbone.trigger('event');

// logs: Handled Backbone event

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.

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(); }});

Templates

• Templates are used to create the visual elements of your interface using HTML markup. They should not include the logic of your application.

Templates

<ul> <li>{{firstname}}</li> <li>{{lastname}}</li> <li>{{address}}</li> <li>{{city}}</li> <li>{{phone}}</li></ul>

Organizing your code

• Separate every component in different files (models,

collections, views and routers).

• Define an entry point of the application.

• Use namespaces.

Application Directory Structure

Modular Directory Structure

Module Bundlers

• Webpack: https://webpack.github.io

• Browserify: http://browserify.org

Browserify

Webpack

Frontend Tools

Package Managers

• npm: https://www.npmjs.com

• Bower: http://bower.io

Task Runners

• Grunt: http://gruntjs.com

• Gulp: http://gulpjs.com

CSS Preprocessors

• SASS: http://sass-lang.com

• LESS: http://lesscss.org

• Compass: http://compass-style.org

Template Systems

• Handlebars: http://handlebarsjs.com

• Mustache: https://mustache.github.io

• Underscore: http://underscorejs.org

Linting

Linting Tools

• CSSLint: http://csslint.net

• ESLint: http://eslint.org

Testing

• QUnit: https://qunitjs.com

• CasperJS: http://casperjs.org

• Jasmine: http://jasmine.github.io

• PhantomJS: http://phantomjs.org

Visual Regression

http://shoov.io

WebServicesA practical case with Drupal

Questions

Ruben Teijeiro@rteijeiro

Senior Software ArchitectTieto, CEMruben.teijeiro@tieto.com

Architecting your Frontend

Technology

Webinar: Architecting your Mobile App for the Cloud

Architecting your app in ext js 4, part 1 learn sencha

Architecting your Content for the Unknown Consumer

Architecting your way up in the cloud

Rapidly scaffold your frontend with yeoman

Managing frontend libs in your Symfony project

Architecting Your Online Storefront

Architecting Your Next-Generation Workspace with … Your Next-Generation Workspace with Cisco and Citrix ... XenDesktop Extended partnership: ... Architecting Innovation with Cisco

Module 3 Architecting & Transformation...Module 3 Architecting & Transformation Appreciate VariousVarious architecting architecting transformationtransformation with with tthhee businessbusiness

Surviving your frontend (WIP - Sneak Peak)

Your technical partner · 2020-03-09 · Frontend capabilities. ... We have experience in architecting, building and managing complex applications with up to 45 microservices. We

Frontend Development - Supercharge your frontend development with little languages and smart tools

Securely Architecting Your Application for the · PDF fileSecurely Architecting Your Application for the Cloud Alex Stamos CTO. Takeaways ... more secure than before. Convention Wisdom

Optimizing Your Frontend Performance

Architecting Your Models

Architecting Your Next Generation Data Center - Chip Tesch

Architecting your Dream Content and Customer Experience ......Cathy McKnight VP Consulting @cathymcknight Ecosphere Munich 2018 September 25, 2018 Architecting your Dream Content and

APAC Webinar Apr 10 - Architecting your Mobile App for the Cloud

Frontend-friendlyRails...PrepareJSONAPIendpointsforyour API Endpoints are the most important part of the backend for your frontend applications. No matter howsophisticatedyourbackendcanbe

ARCHITECTING YOUR CAREER PATH SWITCHERS