Front-end architecture in practice

A presentation at AngularXParis in July 2018 in Paris, France by Charly Poly

Slide 1

Slide 1

Front-end architecture in practice 🔧

Slide 2

Slide 2

#whoami Charly POLY - Sr Software Engineer at Past ➡ ex-Dashlane ➡ ex-JobTeaser

Slide 3

Slide 3

Why talk about “Front-end architecture”? ➡ Because the web has evolved!

Slide 4

Slide 4

Why talk about “Front-end architecture”? ➡ Because the web has evolved! 1 00’

Slide 5

Slide 5

Why talk about “Front-end architecture”? ➡ Because the web has evolved! 1 2 00’ 10’

Slide 6

Slide 6

Why talk about “Front-end architecture”? ➡ Because the web has evolved! 1 2 3 00’ 10’ 20’

Slide 7

Slide 7

The Front-end evolution 1 00’

Slide 8

Slide 8

The Front-end evolution 1 00’ 90: WorldWideWeb

Slide 9

Slide 9

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive

Slide 10

Slide 10

The Front-end evolution 1 00’ 90: WorldWideWeb 93’: CGI scripts 91: HTML arrive

Slide 11

Slide 11

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive 93’: CGI scripts 94: CSS arrive

Slide 12

Slide 12

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive 93’: CGI scripts 94: CSS arrive 94-95: Netscape, Opera

Slide 13

Slide 13

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive 93’: CGI scripts 94: CSS arrive 94-95: Netscape, 1995: Java applets Opera

Slide 14

Slide 14

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive 93’: CGI scripts 94: CSS arrive 94-95: Netscape, 1995: Java applets Opera 95: JavaScript

Slide 15

Slide 15

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive 93’: CGI scripts 94: CSS arrive 94-95: Netscape, 1995: Java applets Opera 1996: Macromedia Flash 95: JavaScript

Slide 16

Slide 16

The Front-end evolution 1 00’ 90: WorldWideWeb 91: HTML arrive 93’: CGI scripts 94: CSS arrive 94-95: Netscape, 1995: Java applets Opera 1996: Macromedia Flash 95: JavaScript 96: HTTP

Slide 17

Slide 17

The Front-end evolution Back-end 2 Front-end 10’

Slide 18

Slide 18

The Front-end evolution Back-end 1997: PHP 3 2 Front-end 10’

Slide 19

Slide 19

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2 Front-end 10’

Slide 20

Slide 20

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2 Front-end 2000: Adobe Flash with ActionScript 10’

Slide 21

Slide 21

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2 Front-end 2000: Adobe Flash with ActionScript 2002: XHR 10’

Slide 22

Slide 22

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2 Front-end 2000: Adobe Flash with ActionScript 2002: XHR 2004: ActionScript 2 10’

Slide 23

Slide 23

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2005: Rails 2 Front-end 2000: Adobe Flash with ActionScript 2002: XHR 2004: ActionScript 2 2005: Prototype 2005: Script.aculo.us 10’

Slide 24

Slide 24

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2005: Rails 2 Front-end 2000: Adobe Flash with ActionScript 2002: XHR 2004: ActionScript 2 2005: Prototype 2005: Script.aculo.us 2006: JQuery 2006: Mootools 2006: YUI 10’

Slide 25

Slide 25

The Front-end evolution Back-end 1997: PHP 3 1999: Zend Engine 2005: Rails 2 Front-end 2000: Adobe Flash with ActionScript 2002: XHR 2004: ActionScript 2 2005: Prototype 2005: Script.aculo.us 2006: JQuery 2006: Mootools 2006: YUI ~2008: HTML 5 10’

Slide 26

Slide 26

The Front-end revolution 3 20’

Slide 27

Slide 27

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS

Slide 28

Slide 28

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js

Slide 29

Slide 29

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state

Slide 30

Slide 30

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state 2011: SproutCore ➡ Ember

Slide 31

Slide 31

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state 2011: SproutCore 2010: Angular JS ➡ Ember

Slide 32

Slide 32

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state 2011: SproutCore 2010: Angular JS 2013: React ➡ Ember

Slide 33

Slide 33

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state 2011: SproutCore 2010: Angular JS 2013: React 2014: Angular X ➡ Ember

Slide 34

Slide 34

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state 2011: SproutCore 2010: Angular JS 2013: React 2014: Angular X ➡ Ember

Slide 35

Slide 35

The Front-end revolution 3 20’ 2010: Apple end support of Flash on iOS lodash creator bring Backbone.js Model–view–presenter (MVP) on front side, front-end handle its own state 2011: SproutCore 2010: Angular JS 2013: React 2014: Angular X ➡ Ember A JS dedicated Ecosystem package managers building tools libraries

Slide 36

Slide 36

Front-end revolution: Sum up 1 2 3 00’ 10’ 20’ JQuery / Prototype Backbone Angular / React Cross-browsers API MVP MVV, MV* Animations Component State management Separation of Concerns

Templating Application State management

modules DI

Slide 37

Slide 37

How to do Architecture

Slide 38

Slide 38

How to do Architecture

Slide 39

Slide 39

What are Quality Attributes? “ A Quality Attribute (QA) is a measurable or testable property of a system that is used to indicate how well the system satisfies the needs of its stakeholders Software Architecture in Practice, p.63

Slide 40

Slide 40

What are Quality Attributes? Software Architecture in Practice, p.194

Slide 41

Slide 41

How Quality Attributes works? Software Architecture in Practice

Slide 42

Slide 42

Apply QAs to front-end architecture Product requirements + constraints Features updates Technical roadmap Architecture QAs New features Technical guide

Slide 43

Slide 43

A example of front-end architecture Modifiability Ability to introduce new features, refactor Maintainability Ability to onboard new developers, scale the code Performance User perceived performance

Slide 44

Slide 44

A example of front-end architecture Build a technical roadmap TypeScript with types missing everywhere ❌ Modifiability, Maintainability ➡ type everything! REST API, local custom redux cache ❌ Performance ➡ GraphQL migration Components with bad naming ❌ Maintainability ➡ better naming Complex generic class based components ❌ Modifiability, Maintainability ➡ refactor Complex generic “models” with cache system ❌ Modifiability, Maintainability ➡ refactor

Slide 45

Slide 45

A example of front-end architecture Guidelines for new development ➡ Enhance Modifiability, so : reduce module size, increase cohesion and reduce coupling - Components naming convention - Redux as event-bus to defer binding of components - Components refactoring to follow SRP principles - Data HoC in order to prepare GraphQL migration

Slide 46

Slide 46

A example of front-end architecture Guidelines for new development Components naming convention

Slide 47

Slide 47

A example of front-end architecture Guidelines for new development The GraphQL migration anticipation REST HoC GraphQL HoC View Component View Component

Slide 48

Slide 48

Conclusion We are here to solve problems especially new problems on front side Think architecture, not code Architecture good points: clear structure, easier to document enhance team work, onboarding early prediction of system’s qualities can be re-usable

Slide 49

Slide 49

Thanks for listening! @whereischarly /wittydeveloper @wittydeveloper