building enterprise grade front-end applications with javascript frameworks
TRANSCRIPT
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
1-866-464-7790
Leaders in Enterprise Web Applications and Full-Stack Development Training
DEV6.com
@dev6tweet