Presented at Web Unleashed 2016 in Toronto. By Chad Upton FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond Save 10% off any of our events with discount code 'slideshare' Check out our events at http://fitc.ca or follow us at https://twitter.com/fitc Overview Web applications are replacing desktop apps in a lot of enterprises. In this talk we'll look at why we should build web apps in the enterprise. Specifically, we'll look at frameworks such as Angular and React plus the libraries, testing tools, procedures and DevOps processes we should use; and how to bring all of those pieces together to make our enterprise web application easy to build, maintain and deploy. Objective Teach the ingredients of successful enterprise web applications Target Audience Web app developers, app development managers and CTOs Assumed Audience Knowledge Involvement with building web applications is helpful but not necessary Three Things Audience Members Will Learn Why we build web applications in the enterprise Tooling, testing and frameworks that work well together Application build and deployment strategies

1. Building Enterprise Grade Front-End Apps
with Javascript Frameworks

2. Chad Upton
• Senior Consultant @ DEV6
• Developing websites for 20+ years
• Won Webby Award and W3 Award
• Wrote Adobe’s Advanced Video Course
Leaders in Enterprise Web Applica2ons and Full-
Stack Development Training
DEV6.com
@dev6tweet@chadupton

3. Outline
• Choosing a Framework
• Platforms
• Testing
• Reviewing and Reporting
• Scale
• Performance
• DevOps

4. ENTERPRISE

5. What does that even mean?
Enterprise
• Complex
• Scalable
• Distributed
• Component-Based
• Mission Critical

6. 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

7. Scalable
• Grow with user volume
• Grow beyond a single
• database
• app server
• etc

8. Distributed
• Grow with user distribution
• Grow beyond a single data center
location
• Cross platform

9. Component-Based
• More testable
• More iterative
• Easier to update
• More collaborative
• More maintainable

10. Mission Critical
• App is down, revenue is down
• App stability reflects image of
business
• Quality

11. Enterprise: How
Architecture
Performance
DevOps

12. FRAMEWORKS

13. 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

14. Why use a Framework?

15. Quality Application
Strong Foundation
Invisible Work
Visible Results

16. Component-Based
80%
Frameworks drive
component-based
architecture, making apps
more: testable, iterative,
updatable, collaborative
and fixable

17. Which Framework?

18. 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

19. Project Needs
• Localization?
• Internationalization?
• Reusable Components?
• Template Syntax?
• Dependency Injection?
• Module loading?
• etc

20. 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

21. Tooling
• Code generator
• Build scripting/helper
• IDE Integration
• Easy to deploy/test locally

22. Popularity
• Community of developers
• 3rd Party Components
• Training
• Books
• Official Support

23. Most Popular

24. Angular
• Huge developer community
• 3rd party components
• Training, Books, Tutorials, Examples
• Good documentation
• Official support from Google

25. Angular 2 Features
• Router
• Code Splitting/Module Loading
• Dependency Injection
• Animation
• Ahead-of-Time Compilation
• Testing framework
• Browser Inspector
• Command Line Interface (CLI)

26. 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)

27. Backbone
• Library, not framework
• Underscore.js
• jQuery
• Router
• Data Bindings
• Unopinionated
• No Logic in HTML
• No HTML in Code

28. Ember.js
• Similar to Angular, full framework
• Router
• Testing Framework
• Inspector (browser add-on)
• CLI with code generation
• Dependency Injection
• Persistent services

29. PLATFORMS

30. Where the application lives

31. 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…

32. Platform Environments
• Desktop/Laptops
• Mobile Phones/Tablets
• Kiosks
• Set top boxes
• etc…

33. Platform Types
• Web App
• AKA “Progressive Web App”
• Hybrid Mobile App
• Packaged for iOS, Android, etc
• Hybrid Desktop App
• Package for Windows, Mac, etc

34. 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

35. 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

36. • Angular
• node.js, PhantomJS
• React
• node.js, C#/ASP.NET, Nashorn (Java)
• Backbone
• Rendr = Open source option from AirBNB
Server Processed Frameworks

37. 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

38. 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…

39. 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

40. 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

41. 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!

42. 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

43. 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

44. TESTING

45. Benefits of Testing
• Match design specifications
• Catch regression
• Think like a user
• Find bugs before users do
• Reduce cost
• Improve quality

46. Types of Tests
• Functional/On device
• Load testing
• User Observation
• Acceptance
• Unit
• Integration
• End-to-End

47. Manual Testing
• Functional
• Ensure correct function
• Load Testing
• Verify acceptable user quantity
• User Observation
• Improve user experience
• Acceptance
• Meets all requirements (final before release)

48. 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

49. 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

50. Testing Tools
• Selenium
• Karma - Unit/Integration
• Protractor - End-to-End
• Jasmine, Mocha, QUnit
• Keynote
• Rent real mobile devices in cloud
• Many more…

51. REVIEWING
&
REPORTING

52. Review code and performance
during submission and deployment

53. 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

54. Automated Bug Reporting
• Catches JavaScript Errors
• Stores errors in cloud
• Notifications
• Best
• Metrics
• Breadcrumbs
• Map files for useful stack traces
• Mark as resolved

55. 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?

56. RELIABILITY

57. Reliable Applications Work
Everywhere for Everyone

58. Reliability
• Scalable
• Distributed
• Broad Device Support

59. 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

60. Distributed
• Regional Servers
• Not a replacement for scalability
• Each Region Should Scale
• Cloud Infrastructure
• Amazon Web Services
• Google Cloud Platform
• Azure, OpenStack, etc…

61. 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

63. PERFORMANCE

64. Performance
• Well built applications are fast
• Performance is a feature
• Reduce data transfer and requests
• Minimize code
• Modularize code
• Compress images
• CSS Sprite Sheets

65. 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

66. DEVELOPMENT
OPERATIONS
(DEVOPS)

67. Software Development
+
Software Delivery Process
=
Development Operations

68. Development Operations
• Code Management
• Continuous Integration
• Automated Testing
• Package
• Release
• Configuration
• Monitoring

69. Code Management
• Source Control
• Git, SVN, Mercurial, Perforce…
• Branch Code
• Branch Process
• Automation
• Boilerplate/Generator
• ex. Angular-CLI

70. Source Control
• Git Preferred
• GitHub
• BitBucket
• Continuous Integration
• Branch and Release Process
• GitFlow

71. Continuous Integration (CI)
• Brings everything together…
• Compile code
• Minimize Code
• Compress Images
• Run automated tests and linting
• Send failure notifications
• Dashboards
• Store build metrics

73. Continuous Integration Products
• Jenkins (free, open source)
• TeamCity
• Bamboo/Pipelines

74. CONCLUSION

75. • Angular 2
• Angular CLI
• BugSnag + Mixpanel
• ng-bootstrap
• Jasmine, Karma, Protractor
• Bitbucket + Bamboo
Preferred
Front-End Stack

76. • 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

77. sales@dev6.com
1-866-464-7790
Leaders in Enterprise Web Applications
and Full-Stack Development Training
DEV6.com
@dev6tweet