Building Enterprise Grade Front-End Applications with JavaScript Frameworks

Building Enterprise Grade Front-End Apps with Javascript Frameworks

Chad Upton• SeniorConsultant@DEV6• Developingwebsitesfor20+years• WonWebbyAwardandW3Award• WroteAdobe’sAdvancedVideoCourse

LeadersinEnterpriseWebApplica2onsandFull-StackDevelopmentTraining

DEV6.com

@dev6tweet@chadupton

Outline• Choosing a Framework

• Platforms

• Testing

• Reviewing and Reporting

• Scale

• Performance

• DevOps

ENTERPRISE

What does that even mean?

Enterprise

• Complex

• Scalable

• Distributed

• Component-Based

• Mission Critical

Complex?• jQuery is great for small apps and utilities within large apps

• Making a small app complex does not make it Enterprise

• Complex is not the goal

• Complex is a result of a feature rich application

• Complex is maintainable when the code is well organized

Scalable

• Grow with user volume

• Grow beyond a single

• database

• app server

• etc

Distributed

• Grow with user distribution

• Grow beyond a single data center

location

• Cross platform

Component-Based

• More testable

• More iterative

• Easier to update

• More collaborative

• More maintainable

Mission Critical

• App is down, revenue is down

• App stability reflects image of

business

• Quality

Enterprise: How

Architecture

Performance

DevOps

FRAMEWORKS

What is a Framework?• Vehicle that takes a project from start to finish

• You pilot the vehicle successfully (or not)

• Reusable abstractions that help structure application

• Vary in rigidity or opinion/freedom

• Recipe for building an application

• Standardization for current and future collaborators

• Toolset for previously solved problems

Why use a Framework?

Quality Application

Strong Foundation

Invisible WorkVisible Results

Component-Based

80%

Frameworks drive

component-based

architecture, making apps

more: testable, iterative,

updatable, collaborative

and fixable

Which Framework?

The Perfect Framework

• No perfect framework

• You will always require more or less

• Closest fit for your architectural style

• Not going to be perfect here either

• Has most features your project needs

• Compatible with other features needed

Project Needs

• Localization?

• Internationalization?

• Reusable Components?

• Template Syntax?

• Dependency Injection?

• Module loading?

• etc

Framework or DIY

• Multiple libraries may give you more

flexibility

• Multiple libraries could be smaller/

faster than one large framework

• One framework that does

everything will likely have fewer

problems down the road

Tooling

• Code generator

• Build scripting/helper

• IDE Integration

• Easy to deploy/test locally

Popularity

• Community of developers

• 3rd Party Components

• Training

• Books

• Official Support

Most Popular

Angular

• Huge developer community

• 3rd party components

• Training, Books, Tutorials, Examples

• Good documentation

• Official support from Google

Angular 2 Features• Router

• Code Splitting/Module Loading

• Dependency Injection

• Animation

• Ahead-of-Time Compilation

• Testing framework

• Browser Inspector

• Command Line Interface (CLI)

React• Nearly as many features as Angular

• More of a library than a framework

• Inline components/templates

• Less opinionated than Angular

• More 3rd party libs usually required

• Routing, Testing, etc

• Smart diff rendering (fast)

Backbone• Library, not framework

• Underscore.js

• jQuery

• Router

• Data Bindings

• Unopinionated

• No Logic in HTML

• No HTML in Code

Ember.js

• Similar to Angular, full framework

• Router

• Testing Framework

• Inspector (browser add-on)

• CLI with code generation

• Dependency Injection

• Persistent services

PLATFORMS

Where the application lives

Platform Criteria

• Who is going to use your app?

• How are they going to use it (ex. offline)?

• What kind of devices do they have?

• Are web browsers capable enough?

• Does your app need GPS?

• etc…

Platform Environments

• Desktop/Laptops

• Mobile Phones/Tablets

• Kiosks

• Set top boxes

• etc…

Platform Types

• Web App

• AKA “Progressive Web App”

• Hybrid Mobile App

• Packaged for iOS, Android, etc

• Hybrid Desktop App

• Package for Windows, Mac, etc

Web App• Client Processed

• Most common type of web app in use

• Easy to build, update and serve

• HTML, CSS, JavaScript + Frameworks, Libraries, etc

• Server Processed

• Varying degrees of server processing

• Server may process CSS, State and/or layout, all the way to:

• Page looks to web browser like a static HTML page

Server Processed• Better search indexing than Client Processed Single Page Applications

• Initial render typically faster than client processed

• Fewer downloads/network operations

• Some content is pre-rendered

• Favorable to teams with greater backend skills

• Angular

• node.js, PhantomJS

• React

• node.js, C#/ASP.NET, Nashorn (Java)

• Backbone

• Rendr = Open source option from AirBNB

Server Processed Frameworks

Mobile Browser Optimized• Responsive and Adaptive Design

• Layout is programmed to change based on screen/window size

• Best for Search Engine Optimization

• Dynamic Serving

• Server renders different layout/content based on screen size

• Separate URLs

• Mobile users directed to a mobile website

• Not recommended

Hybrid Mobile App

• Packaged for iOS, Android, etc

• Created with HTML, CSS, JavaScript, Frameworks, Libraries, etc

• Container tool to embed web app in a native mobile container

• Typically installed from Google Play, Apple App Store, etc…

Why Hybrid Mobile App?

• Leverage existing web skills or code

• Need additional capabilities of a mobile app

• Update UI, Logic, Data without submitting updates through store

• Not all scenarios allowed on all platforms

Hybrid Mobile App Packagers• Cordova

• Free and OpenSource

• Adobe PhoneGap

• Cordova + more tooling, plugins, services

• Ionic Framework

• Build on Angular, Runs in Cordova or PhoneGap

• Cloud services

• NativeScript

NativeScript• Real native app

• Not a web app

• Web content and controls converted

to native content and controls

• One codebase matches native apps

• Controls look and work exactly like

native controls, because they are!

Hybrid Desktop App• Package web for Windows, Mac, etc

• Like Adobe Air, without Flash Player

• Great for rapid prototyping

• Leverage existing markup and code

• Don’t have the same limitations of

browser

• File system access

• Relaxed cross domain policy

Hybrid Desktop App Solutions• Electron (by GitHub)

• Windows, Mac, Linux

• Built on Node.js, Chromium

• NW.js

• Leverage node modules from DOM

• More Chrome Apps and API support

• AppJS

• No longer under development

TESTING

Benefits of Testing

• Match design specifications

• Catch regression

• Think like a user

• Find bugs before users do

• Reduce cost

• Improve quality

Types of Tests

• Functional/On device

• Load testing

• User Observation

• Acceptance

• Unit

• Integration

• End-to-End

Manual Testing• Functional

• Ensure correct function

• Load Testing

• Verify acceptable user quantity

• User Observation

• Improve user experience

• Acceptance

• Meets all requirements (final before release)

Automated Testing• Unit Tests

• Test isolated“unit” of code (ex. a

function)

• Integration Tests

• Test units interaction with each

other

• End-to-End Tests

• Simulate user and test complete

application flow from start to finish

Automated Testing• Test Suite

• Collection of automated tests

• Easy to run, run often!

• Before, During, After coding

• Test Driven Development

• Write tests then code to test

• Write once, run on multiple devices

• Budget time for testing

Testing Tools

• Selenium

• Karma - Unit/Integration

• Protractor - End-to-End

• Jasmine, Mocha, QUnit

• Keynote

• Rent real mobile devices in cloud

• Many more…

REVIEWING&

REPORTING

Review code and performance during submission and deployment

Code Reviews• Mentor or Senior Developer

• Frequently

• Each submission, each feature

• Talk about

• Why

• Alternatives

• Best ways to continue learning:

• Syntax, Performance, Logic, Debugging, etc

Automated Bug Reporting• Catches JavaScript Errors

• Stores errors in cloud

• Notifications

• Best

• Metrics

• Breadcrumbs

• Map files for useful stack traces

• Mark as resolved

Logging

• DVR for your application

• Log as much as possible

• Include logs with bug reports

• Who was the user?

• Where in the app were they at the

time?

• Where have they been?

• What data was received from server?

RELIABILITY

Reliable Applications Work Everywhere for Everyone

Reliability

• Scalable

• Distributed

• Broad Device Support

Scalability• Load test first and often

• ex. BlazeMeter

• Use CDNs for assets and libraries

• Consider a reliable Proxy

• ex. CloudFlare

• Own your CDN content

• Own your APIs if possible

• Cache public APIs if you can’t own them

Distributed

• Regional Servers

• Not a replacement for scalability

• Each Region Should Scale

• Cloud Infrastructure

• Amazon Web Services

• Google Cloud Platform

• Azure, OpenStack, etc…

Broad Device Support

• People want to use everywhere

• Desktop, Phone, Tablet, etc

• Minimize decisions that will limit

where application can be used

• Phone will soon be primary device

for majority of users

PERFORMANCE

Performance

• Well built applications are fast

• Performance is a feature

• Reduce data transfer and requests

• Minimize code

• Modularize code

• Compress images

• CSS Sprite Sheets

Performance• Look for a fast framework

• React

• Angular 2

• Measure speed before/after each

• major code addition

• major change/refactor

• Use framework best practices

• Play with and Measure different solutions

DEVELOPMENTOPERATIONS(DEVOPS)

Software Development +

Software Delivery Process =

Development Operations

Development Operations

• Code Management

• Continuous Integration

• Automated Testing

• Package

• Release

• Configuration

• Monitoring

Code Management• Source Control

• Git, SVN, Mercurial, Perforce…

• Branch Code

• Branch Process

• Automation

• Boilerplate/Generator

• ex. Angular-CLI

Source Control• Git Preferred

• GitHub

• BitBucket

• Continuous Integration

• Branch and Release Process

• GitFlow

Continuous Integration (CI)• Brings everything together…

• Compile code

• Minimize Code

• Compress Images

• Run automated tests and linting

• Send failure notifications

• Dashboards

• Store build metrics

Continuous Integration Products• Jenkins (free, open source)

• TeamCity

• Bamboo/Pipelines

CONCLUSION

• Angular 2

• Angular CLI

• BugSnag + Mixpanel

• ng-bootstrap

• Jasmine, Karma, Protractor

• Bitbucket + Bamboo

Preferred Front-End Stack

• Culture of Quality

• Test driven development

• Code reviews

• Observe users

• Automate bug collection

• Own CDN and API

• Use fast framework

• Measure and analyze performance

• Budget time for all of these things!

Best Practices

SUCCESS

sales@dev6.com

1-866-464-7790

Leaders in Enterprise Web Applications and Full-Stack Development Training

DEV6.com

@dev6tweet