React'ive Saturday – 7 advices for web app architecture

Alexey Volkov, Frontend Architect, Rumble, Tel Aviv

У доповіді буде розглянуто ряд принципів і просто хороших практик, які допоможуть вам в архітектурі веб-додатків. Ми не будемо прив’язуватися до конкретних фреймворків та бібліотек, а поговоримо про саму сутність речей.

Transcript

1. 7 advices for web app architecture Alexey Volkov • 18.11.2017
2. Hello Alexey Volkov Front end architect Rumble, Tel Aviv alexey@rumble.me @roskoalexey github.com/rosko
3. Software architecture is those decisions which are both important and hard to change. Martin Fowler
4. GOOD DEVELOPER — LAZY DEVELOPER Good programmers spend 90% of their time thinking, researching Bad programmers spend 90% of their time debugging code by randomly making changes and seeing if they work
5. Advice 1. Divide and conquer
7. Module • Single-purpose piece of an application • Has a very limited knowledge of what’s going on in the rest of the system • Encapsulates “private” logic and state • Exposes public API
8. Self-invoking function (function() { // Do something })();
9. AMD define(['jquery', 'my-module'], function($, myModule) { // Do something with $ and myModule... // Export a function return function doSomething() { // ... }; });
10. CommonJS var $ = require('jquery'); var myModule = require('my-module'); // Do something with $ and myModule... // Export a function module.exports = function doSomething() { // ... };
11. ES Modules import $ from 'jquery'; import myModule from 'my-module'; // Do something with $ and myModule... // Export a function export default function doSomething() { // ... };
12. Singleton with private and public methods function privateMethod() { } export default { publicMethodA: function() { }, publicMethodB: function() { }, };
13. Factory function privateMethod() { } export default function factory() { let privateProperty; return { publicMethodA: function() { }, publicMethodB: function() { } } }
14. Syntax sugar export default class { constructor() { // Do something } publicMethodA() { } publicMethodB() { } }
15. jQuery module jQuery.fn.extend({ check: function() { }, uncheck: function() { } }); // =========== $( "input[type='checkbox']" ).check();
16. Angular 1.x angular.module('myModule', []). config(function(injectables) { // This is an example of config block. }). run(function(injectables) { // This is an example of a run block. });
17. Angular 2+ import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<h1>{{title}}</h1>', }) export class AppComponent { title = 'Minimal NgModule'; }
18. Ember import Component from '@ember/component'; import { computed } from '@ember/object'; import { inject as service } from '@ember/service'; export default Component.extend({ store: service(), property: computed(function() { return 'myprop'; }) });
19. React import {Component} from 'react'; export default class Hello extends Component { render() { return <h1> Hello, {this.props.name}</h1>; } }
20. Mail app example Modules • Folders list • Messages list • Message pane ◦ Regular message ◦ Invitation ◦ Air ticket
21. "The secret to building large apps is never build large apps. Break your apps into small pieces. Then, assemble those testable, bite-sized pieces into your big application" Justin Meyer, author JavaScriptMVC
22. Advice 2. Abstract
24. Abstration around DOM • jQuery • Angular • React
25. How do you work with data? • Do you create XMLHttpRequest in each module? • Or you prefer to create a kinda data layer? • What if you need to support offline mode? Yet another level of abstration
26. Mediators are used when the communication between modules may be complex, but is still well defined. If it appears a system may have too many relationships between modules in your code, it may be time to have a central point of control, which is where the pattern fits in.
27. Mail app example When you need a mediator • Message removing from the message list or from the message reader pane • Displaying a quantity of unread messages in the folders list or in the messages list
28. Folders list (module) • Displays folders • Changes the currently selected folder Messages list (module) • Displays messages list • Changes the currently selected message • Removes a message Message pane (module) • Displays a message • Removes a message Core (mediator) Data layer (core module) • getFoldersList() • selectFolder() • getMessagesList() • selectMessage() • getMessage() • removeMessage()
29. Folders list (module) • Displays folders • Changes the currently selected folder Messages list (module) • Displays messages list • Changes the currently selected message • Removes a message • Search Message pane (module) • Displays a message • Removes a message Core (mediator) Data layer (core module) • getFoldersList() • selectFolder() • getMessagesList() • selectMessage() • getMessage() • removeMessage() • searchMessages()
30. Advice 3. Think long term
31. Think long term • Don’t bind your entire life (your app’s life) with some framework or library • Isolate 3rd-party dependencies • Can you reuse your modules in your other applications?
32. The key is to acknowledge from the start that you have no idea how this will grow. When you accept that you don't know everything, you begin to design the system defensively. You identify the key areas that may change, which often is very easy when you put a little bit of time into it. For instance, you should expect that any part of the app that communicates with another system will likely change, so you need to abstract that away." Nicholas Zakas, author 'High-performance JavaScript websites'
33. Advice 4. Keep wise balance
34. Bad practises • Abstraction around abstraction. For instance, wrapper for jQuery • Large solid app vs. infinite number of granular modules • Spending too much time on architecture
35. Advice 5. Be flexible for changes
36. Advice 5. Be flexible for changeschallenges
37. You need an architecture for not to implement all design patterns you know, but to solve the real business issues
38. Advice 6. Have a good communication with a product team
39. Unity makes strength
40. 09.05.XX First version: Folders, messages 09.17.XX + Archive + Search 10.13.XX + Special messages (invitations, tickets etc) 10.20.XX + Calendar integration 11.01.XX + Smart templates for answers
41. Advice 7. Learn from the mistakes and successes of others
42. Learn Review someone else’s code Frameworks, libraries, pull requests Look and listen to smart people World-level conferences, podcasts Read wise books Design patterns, best practices
43. Recommended smart guys • Addy Osmani • Eric Elliott • Nicholas Zakas • Paul Irish • Dan Abramov • Pete Hunt • Martin Fowler
44. Recommended conventions • JSConf (around the globe) • Google I/O (San Francisco) • ReactJS Conf (San Francisco) • Frameworks days (Kyiv)
45. Questions, please Alexey Volkov Front end architect Rumble, Tel Aviv alexey@rumble.me @roskoalexey github.com/rosko