Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Enterprise Grade Front-End Applications with JavaScript Frameworks

1,422 views

Published on

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

Published in: Internet
  • Be the first to comment

Building Enterprise Grade Front-End Applications with JavaScript Frameworks

  1. 1. Building Enterprise Grade Front-End Apps with Javascript Frameworks
  2. 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. 3. Outline • Choosing a Framework • Platforms • Testing • Reviewing and Reporting • Scale • Performance • DevOps
  4. 4. ENTERPRISE
  5. 5. What does that even mean? Enterprise • Complex • Scalable • Distributed • Component-Based • Mission Critical
  6. 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. 7. Scalable • Grow with user volume • Grow beyond a single • database • app server • etc
  8. 8. Distributed • Grow with user distribution • Grow beyond a single data center location • Cross platform
  9. 9. Component-Based • More testable • More iterative • Easier to update • More collaborative • More maintainable
  10. 10. Mission Critical • App is down, revenue is down • App stability reflects image of business • Quality
  11. 11. Enterprise: How Architecture Performance DevOps
  12. 12. FRAMEWORKS
  13. 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. 14. Why use a Framework?
  15. 15. Quality Application Strong Foundation Invisible Work Visible Results
  16. 16. Component-Based 80% Frameworks drive component-based architecture, making apps more: testable, iterative, updatable, collaborative and fixable
  17. 17. Which Framework?
  18. 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. 19. Project Needs • Localization? • Internationalization? • Reusable Components? • Template Syntax? • Dependency Injection? • Module loading? • etc
  20. 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. 21. Tooling • Code generator • Build scripting/helper • IDE Integration • Easy to deploy/test locally
  22. 22. Popularity • Community of developers • 3rd Party Components • Training • Books • Official Support
  23. 23. Most Popular
  24. 24. Angular • Huge developer community • 3rd party components • Training, Books, Tutorials, Examples • Good documentation • Official support from Google
  25. 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. 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. 27. Backbone • Library, not framework • Underscore.js • jQuery • Router • Data Bindings • Unopinionated • No Logic in HTML • No HTML in Code
  28. 28. Ember.js • Similar to Angular, full framework • Router • Testing Framework • Inspector (browser add-on) • CLI with code generation • Dependency Injection • Persistent services
  29. 29. PLATFORMS
  30. 30. Where the application lives
  31. 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. 32. Platform Environments • Desktop/Laptops • Mobile Phones/Tablets • Kiosks • Set top boxes • etc…
  33. 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. 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. 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. 36. • Angular • node.js, PhantomJS • React • node.js, C#/ASP.NET, Nashorn (Java) • Backbone • Rendr = Open source option from AirBNB Server Processed Frameworks
  37. 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. 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. 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. 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. 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. 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. 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. 44. TESTING
  45. 45. Benefits of Testing • Match design specifications • Catch regression • Think like a user • Find bugs before users do • Reduce cost • Improve quality
  46. 46. Types of Tests • Functional/On device • Load testing • User Observation • Acceptance • Unit • Integration • End-to-End
  47. 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. 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. 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. 50. Testing Tools • Selenium • Karma - Unit/Integration • Protractor - End-to-End • Jasmine, Mocha, QUnit • Keynote • Rent real mobile devices in cloud • Many more…
  51. 51. REVIEWING & REPORTING
  52. 52. Review code and performance during submission and deployment
  53. 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. 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. 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. 56. RELIABILITY
  57. 57. Reliable Applications Work Everywhere for Everyone
  58. 58. Reliability • Scalable • Distributed • Broad Device Support
  59. 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. 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. 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
  62. 62. PERFORMANCE
  63. 63. Performance • Well built applications are fast • Performance is a feature • Reduce data transfer and requests • Minimize code • Modularize code • Compress images • CSS Sprite Sheets
  64. 64. 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
  65. 65. DEVELOPMENT OPERATIONS (DEVOPS)
  66. 66. Software Development + Software Delivery Process = Development Operations
  67. 67. Development Operations • Code Management • Continuous Integration • Automated Testing • Package • Release • Configuration • Monitoring
  68. 68. Code Management • Source Control • Git, SVN, Mercurial, Perforce… • Branch Code • Branch Process • Automation • Boilerplate/Generator • ex. Angular-CLI
  69. 69. Source Control • Git Preferred • GitHub • BitBucket • Continuous Integration • Branch and Release Process • GitFlow
  70. 70. Continuous Integration (CI) • Brings everything together… • Compile code • Minimize Code • Compress Images • Run automated tests and linting • Send failure notifications • Dashboards • Store build metrics
  71. 71. Continuous Integration Products • Jenkins (free, open source) • TeamCity • Bamboo/Pipelines
  72. 72. CONCLUSION
  73. 73. • Angular 2 • Angular CLI • BugSnag + Mixpanel • ng-bootstrap • Jasmine, Karma, Protractor • Bitbucket + Bamboo Preferred Front-End Stack
  74. 74. • 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
  75. 75. sales@dev6.com 1-866-464-7790 Leaders in Enterprise Web Applications and Full-Stack Development Training DEV6.com @dev6tweet

×