A short presentation that covers best practices for architecting single page applications. Presented at NDC Oslo in 2018

1. Architecting Your
Next SPA
By Guy Nesher

2. Agenda
• State of Single Page Applications
• Best Practices
• Choosing Your Next Library
• Questions

3. About Me
Guy Nesher
Consultant at
nesher.guy@gmail.com
@guynesher

4. Trust me, I’m a lawyer

5. State of Single Page Applications

6. Single Page Applications
• 2002 First examples of SPA
• 2006 jQuery
• 2009 ES6
• 2010 AngularJS, Backbone
• 2010 – 2018 - ~40 SPA libraries released, millions of active projects
• JavaScript Fatigue

7. SPA Libraries Today
Name NPM Downloads (Weekly) Initial Release
React 2,451,970 5 Years
Angular 687,004 2 Years*
Vue.js 357,950 4 Years
AngularJS 333,241 ---
Backbone 244,316 ---
EmberJS 66,066 6 Years
Preact 53,113 3 Years

8. SPA Best Practices

9. Small Reusable Components
Rule 1

10. Components
• Made popular by React (2013)
• Everything (almost) is a component
• User defined DOM tags
• Small, Composable and Reusable
• Component interaction via template

11. Requirements
• Easily switch data source
• Configurable* (Direction of Popup)
• Notify on data change
• Contained CSS * Simple Bootstrap dropdown

12. Container / Presentational Components
Container Component
• Handles layout
• Interacts with the data layer
• Mutates data from components
• Not reusable (mostly)
Presentational Component
• Single responsibility
• Handles the look & feel
• Minimal logic
• Reusable
• One way data binding

13. Container / Presentational Components
Container Component
PresentationalComponent
Properties /
Callbacks
Events
Data Provider

14. Scoped Styles
• Angular and Vue offer scoped CSS for components
• For React try react-css-modules / Glamor
• ‘>>>’ And ‘/deep/’ should be avoided
• BEM – Block Element Modifier
• Sass / Less demise

15. Composition Over Inheritance
• Specifically recommended by React and Vue
• Works well with Components
• Logic is shared via external help methods
• Easier to read / test / reuse

16. Component Comparison
Vue Angular React
Template Engine HTML HTML JSX
Template Location Part of controller .vue
file
Separate file Part of controller
Component Definition Plain object Class + Decorators Class
Component
Communication
Callbacks / Event
Emitters
Event Emitters Callbacks
Props One Way, Mutable* One Way, Mutable One Way, Immutable

17. Web Components
• A set of new standards
• Allow the creation of custom DOM elements
• Not fully supported (use stenciljs)
• Angular 6 supports export

18. State Management
Rule 2

19. From MV* To Flux
• Architecture developed by Facebook (2014)
• Focused on Unidirectional data flow
• Application state is managed within global stores
• Action / Dispatcher used to manage data flow

20. Flux today
• Redux – refined Flux, supports all platforms
• Mobx / Vuex / NGXS – reactive, less boilerplate, a little more magic
• Learn to use the devtools
• Always use a state management solution

21. Structure Your Project
Rule 3

22. Group By Feature/Function Folders
• Each feature / function includes all related files
• Features are recursive
• Avoid deep nesting
• Features folders can be broken to types folder

23. Grouping By Features
With Type Grouping
profile/
components/
button/
directives/
utils/
Without grouping
profile/
profile.js
profile.css
profile-utils.js
profile-directive.js
* Avoid capitalization

24. App Maintenance
Rule 4

25. Static Typing
• Typescript / Flow
• Easier to catch errors
• Easier to share / understand code
• Small development cost, relatively big gains

26. Long Term Support
• LTS - Security / Bug fixes for older version of the library
• Current support:
• Angular – 1 year*
• Vue – 9 months**
• React – N/A
• Keep your libraries up to date
* Minimum 1 year
** based on v1.1 support

27. Unit Testing
• Simpler than ever
• Similar syntax / functionality across all libraries
• Sign of maturity*
• Medium investments / Medium – High returns

28. Choosing Your Next SPA
Library

29. Performance

30. Performance
1. ~10 libraries faster than the “Big 3”
2. Surplus (fastest) use JSX, removes virtual DOM and gains ~20%
speed increase
3. You probably never heard of them
4. Big 3 perform roughly the same
* Based on http://www.stefankrause.net/js-frameworks-benchmark7/table.html

31. Performance, Load Time

32. Better Criteria
• Community Size
• Documentation / Learning Resources / Learning Curve
• Additional Capabilities
• Personal Preference

33. Questions
nesher.guy@gmail.com
@guynehser