Download to read offline
Uploaded byEamonn Boyle
BelTech 2017 - Building Quality in the Browser
The document provides recommendations for building quality JavaScript applications. It recommends adopting a single page architecture with a front-end JavaScript application communicating with backend services via RESTful APIs. It suggests using modern frameworks like Angular and React that are supported by large companies. It also recommends using static typing with TypeScript to catch errors earlier. Finally, it emphasizes applying software best practices like separation of concerns, modular design, and testing to JavaScript development.
More Related Content
Similar to BelTech 2017 - Building Quality in the Browser
BelTech 2017 - Building Quality in the Browser
- 1. © Instil Software2016 April 2017 BelTech eamonn.boyle@instil.coeamonn.boyle@instil.cogarth.gilmour@instil.co | eamonn.boyle@instil.co Building with Quality in the Browser Finding a way through the JavaScript Maze
- 2. © Instil Software2016 I Need a Venn Diagram…STAT!
- 3. © Instil Software2016 Building the Right Thing – No Problem!
- 4. © Instil Software2016 Building the Thing Right
- 5. © Instil Software2016 • Why is JavaScript Important • What do we mean by quality • What tools and processes help improve quality • Avoiding Waste and Churn Talk Overview - Building The Thing Right
- 6. © Instil Software2016 • I want new people on-boarded as quickly as possible • I want to be able to add new features easily • I want computers to do most of my work for me • I don’t want the headache and hassle of bugs One Underlying Principle
- 7. © Instil Software2016 Modern Web Applications
- 8. © Instil Software2016 Nothing We Do Today Makes Sense If you could time travel ...went to the early 90’s …met VB or C++ developers …told him what we do now …what would they say? And then he said “We have to render all our UI’s via HTML”
- 9. © Instil Software2016 Rich Interactive User Experience Fast Load Times Process Massive Amounts of Data Do Everything on the Web Download Programs as Text Interpret in the Browser
- 10. © Instil Software2016 The Plug-In (Almost) Disaster
- 11. © Instil Software2016 Web apps as ‘browser-ware’ .NET WebForms, JEE JSF etc… ASP .NET MVC, Spring MVC plus jQuery and Dojo based widgets Single Page Applications interacting with RESTful Services via JSON The Evolution Of Web Applications
- 12. © Instil Software2016 The Single Page Application Concept Service A Service B Service C Single Page Application JSON JSON JSON
- 13. © Instil Software2016 Separation of Concerns is Important
- 14. © Instil Software2016 Adopt a Single Page Architecture • Render the whole UI on the client via JS/TS • Pick a good framework to help (see later) • Only exchange data (via JSON) with the server Write UI agnostic services (RESTful) • Java and Spring MVC / Spring Boot • Java, JAX-RS and DropWizard • ASP .NET Core Deploy to the Cloud • Which is a whole other story in itself Recommendation 1 – Consider SPA + Services
- 15. © Instil Software2016 • Language • Tools • Process JavaScript
- 16. © Instil Software2016 Foundations of Front End
- 17. © Instil Software2016 JavaScript’s Importance “JavaScript is the VM of the web” Douglas Crockford
- 18. © Instil Software2016 Date Event 1994-1995 Invented by Brendan Eich and released in Netscape (name changed from Mocha to LiveScript to JavaScript) 1996 Adopted by Microsoft in IE under the name ‘JScript’ 1996-1997 Became an open standard as ECMAScript 1998 Second version of ECMAScript 1999 Third version of ECMAScript 2009 Fifth version of ECMAScript (fourth was abandoned) 2011 ECMAScript 5.1 released 2015 ECMAScript 2015 (ES6) Released 2016 ECMAScript 2016 (ES7) Released A Long History – Over 20 Years
- 19. © Instil Software2016 JavaScript Popularity PyPL http://pypl.github.ioTIOBE http://www.tiobe.com/tiobe-index/ #7 #5
- 20. © Instil Software2016 We need to talk about JavaScript Code Quality
- 21. © Instil Software2016 JavaScript Complexity https://fossbytes.com/most-complex-programming-language/
- 22. © Instil Software2016 Employ the same best practices we use on server side • Intent Revealing, Self Documenting Code • Separation of Concerns • Single Responsibility – at every level • DRY, KISS, YAGNI • SOLID Principles • Refactor Mercilessly • Modular Design • And more…. Recommendation 2 – Use SW Best Practices
- 23. © Instil Software2016 Good Boy Scout Rule
- 24. © Instil Software2016 Tools • Use the latest form of the language • Babel transpilation from latest ES 2016 • Static Analysis • ESLint, JSLint • Use a modern, feature rich IDE • JetBrains Family – WebStorms, IntelliJ Process • Agile Software Development • Test, Test, Test • TDD, Unit Testing, Integration Testing, UI Testing • Continuous Integration & Deployment • One step builds Recommendation 3 – Use SW Best Practice
- 25. © Instil Software2016 Frameworks
- 26. © Instil Software2016 Professional Developer until August 2016 Most of my professional life has been with C++ & C# • Telecommunication • Scientific Imaging • Performance Critical • Close to the Metal • Large Codebases • Rich User Interfaces My professional life has been coding • Developing solutions for customers A Bit More About Me
- 27. © Instil Software2016 Web Development can be a Bit Chaotic
- 28. © Instil Software2016 JavaScript Fatigue https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.w68cow8kq
- 29. © Instil Software2016 Module Counts http://www.modulecounts.com/ npm Package Count 420,643
- 30. © Instil Software2016 So Much Duplication – New Is Not Always Better
- 31. © Instil Software2016 JavaScript Framework Fatigue DAYS SINCE LAST NEW JAVASCRIPT FRAMEWORK
- 32. © Instil Software2016 The Churn http://blog.cleancoder.com/uncle-bob/2016/07/27/TheChurn.html
- 33. © Instil Software2016 Framework Continuum • Small, simple applications • Low setup investment • Low lock-in • Low features • Lots of hand written code • Potentially high performance • Requires lots of work & skill • Large, complex applications • Feature rich – powerful capabilities • Less boilerplate to achieve goals • Focus on business logic • Lots of magic • High lock in usually • Performance can be higher or lower • Framework Teams optimise • Generalisation has a cost • Custom use cases may be hard Pure JavaScript Modern Frameworks
- 34. © Instil Software2016 The Evolution of JavaScript Frameworks Angular 2 4 & React Angular 1DojojQueryManual Scripting HTML
- 35. © Instil Software2016 Lots of UI Frameworks
- 36. © Instil Software2016 Use libraries and frameworks supported by big companies • Twitter, Google, Facebook etc • Benefit from their experience and support Angular 4 and React are both good choices • They have different pros and cons • Angular 4 is a more complete software framework • React is an interesting UI framework with a great data model Do on the client what you do on the server • Adopt a modular design based on cohesion and coupling • Use dependency injection to manage fragile relationships • Unit and integration test all you components Recommendation 4 – Get Behind the Big Players
- 37. © Instil Software2016 • Holy Wars And Finally
- 38.
- 39. © Instil Software2016 JavaScript can let you shoot yourself in the foot • Dynamic language • Lots of “helpful” autocorrections We can use other languages and compile to JavaScript • Statically Typed Language have many benefits • Stricter language rules can avoid many errors JavaScript is cool and all… “JavaScript is an assembly language. The JavaScript + HTML generate is like a .NET assembly. The browser can execute it, but no human should really care what’s there. “ Erik Meijer
- 40. © Instil Software2016 TypeScript (aka TS) is a superset of JavaScript • Created by Anders Hejlsberg at Microsoft • Free open source project (via the Apache 2 License) The language is transpiled into JavaScript • The compiler is written in TS and runs on top of Node.js • It can be used for both client and server side applications Add type declarations to variables, parameters etc… • Let the compiler point out errors before runtime • Let the IDE leverage the type information Introducing TypeScript
- 41. © Instil Software2016 Consider using TypeScript for new projects • Angular 4 is committed Use Flow to gradually introduce types to JavaScript Kotlin is another alternative from the JetBrains team Recommendation 5 – Statically Typed Language
- 42. © Instil Software2016 Adopt a Single Page Architecture via REST Utilise well understood software development best practices Use well supported frameworks – avoid churn Automate everything Consider TypeScript or Kotlin as your client-side language Summary of Recommendations
- 43. © Instil Software2016 Any Questions?