The document describes the evolution of JavaScript application architectures over time. It discusses early approaches using plain JavaScript with no libraries from 1995-2006. jQuery became popular from 2006-2010, enabling better DOM manipulation and memory management. From 2010-2016, single page applications using the MVC pattern and module bundling became common. More recent trends from 2016 onward include component architectures, reactive programming, and Node package management with modules like React and Redux. The document provides an example to illustrate issues with older architectures around dependencies, testing, and deployment. It suggests newer architectures and processes are needed to address these issues.

1. The new way to
write a front-end
software.

2. JavaScript Applications Evolution
JS (alias Vanilla)
jQuery
Umbrella Js
…
AngularJS
Flux (React)
…
AngularJS 2
Redux
…
Js (alias Vanilla)
1995-2006 JS (simple, without libraries, `chior`)
★ No functions
★ Very bad memory management
★ Have alert command (yuhuu!)
★ Have the text blink feature
★ Have the change text color feature
★ Have the change background color feature

3. JavaScript Applications Evolution
JS (alias Vanilla)
jQuery
Umbrella Js
…
AngularJS
Flux (React)
…
AngularJS 2
Redux
…
Js (alias Vanilla)
2006 - 2981
★ jQuery revolutionising the javascript
programming.
★ Thanks to ECMAScript, jQuery received an
improvement on memory management.
★ Best DOM element selectors.
★ jQuery UI.
★ Hide/Show/Animation.
★ Function and “classes”.
★ Culture of “functional programming”.
★ jQuery remains the most widely
used JavaScript library on the Web.
★ 1 or more js files.

4. JavaScript Applications Evolution
JS (alias Vanilla)
jQuery
Umbrella Js
…
AngularJS
Flux (React)
…
AngularJS 2
Redux
…
Js (alias Vanilla)
2010 - 2016
★ MVC Pattern
★ Real single page app
★ Modularization
★ HTML5 + SASS + JS = ♥
★ Grunt / Gulp ♥
★ Thousand of libraries (UI, helpers…)
★ 1 single js file (minified + uglified)

5. JavaScript Applications Evolution
JS (alias Vanilla)
jQuery
Umbrella Js
…
AngularJS
Flux (React)
…
AngularJS 2
Redux
…
Js (alias Vanilla)
2016 - 201?
★ Component Arhitecture
★ Best modularization
★ TypeScript + ECMAScript 6
★ Webpack
★ Server Side Rendering
★ Reactive Programming
★ Node Package Manager

6. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1

7. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
MAIN PROJ

8. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
MAIN PROJ
if (… $#$^#@
DEV 2
git merge
SHARED MODULE

9. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
MAIN PROJ
if (… $#$^#@
DEV 2
git merge
SHARED MODULE
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)

10. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
MAIN PROJ
SHARED MODULE

11. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE

12. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)

13. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
1 pers

14. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
2 pers

15. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers

16. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS

17. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS
PM
new app
We need an Auth system, also
we want to use the same ui element
like on project 1

18. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS
PM
new app
We need an Auth system, also
we want to use the same ui element
like on project 1
PROJect 1?
I am new …
ahh, OK. i see …
copy/paste … copy/paste
DEV 45

19. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS
PM
new app
We need an Auth system, also
we want to use the same ui element
like on project 1
PROJect 1?
I am new …
ahh, OK. i see …
copy/paste … copy/paste
DEV 45
AFTER 3 WEEKS
PM
$@#$@##$%!@#

20. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS
PM
new app
We need an Auth system, also
we want to use the same ui element
like on project 1
PROJect 1?
I am new …
ahh, OK. i see …
copy/paste … copy/paste
DEV 45
AFTER 3 WEEKS
PM
$@#$@##$%!@#
Yuppyyy
we have a new auth system
DEV 45

21. An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
if (… $#$^#@
DEV 2
git merge
QA 1
WT…?
MAIN PROJ version?
SHARED MODULE version?
buuuug ON SHARED
rollback app(both)
OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJ
SHARED MODULE
AFTER 2 WEEKS
0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS
PM
new app
We need an Auth system, also
we want to use the same ui element
like on project 1
PROJect 1?
I am new …
ahh, OK. i see …
copy/paste … copy/paste
DEV 45
AFTER 3 WEEKS
PM
$@#$@##$%!@#
Yuppyyy
we have a new auth system
DEV 45
QA 81
hmm new module. ok.
in the next 2 weeks i will test this
feature

22. So … times are
changing.
we need a new processes for development

23. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1

24. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
MAIN PROJ

25. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
MAIN PROJ
SHARED MODULE

26. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
MAIN PROJ
SHARED MODULE
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2

27. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2

28. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2

29. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2
npm install @bsf/auth@1.2.2

30. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2
npm install @bsf/auth@1.2.2
QA 1
bug on shared module
rollback to v1.4.0 & DEPLOY

31. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2
npm install @bsf/auth@1.2.2
QA 1
bug on shared module
rollback to v1.4.0 & DEPLOY
prod server
NPM RUN documentation
1.bundle.js (12kb) 2.bundle.js (22kb) …
nPm RUN deploy prod
NPM RUN dePLOY TEST
NPM TEST

32. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2
npm install @bsf/auth@1.2.2
QA 1
bug on shared module
rollback to v1.4.0 & DEPLOY
prod server
NPM RUN documentation
1.bundle.js (12kb) 2.bundle.js (22kb) …
nPm RUN deploy prod
NPM RUN dePLOY TEST
NPM TEST

33. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2
npm install @bsf/auth@1.2.2
QA 1
bug on shared module
rollback to v1.4.0 & DEPLOY
prod server
NPM RUN documentation
1.bundle.js (12kb) 2.bundle.js (22kb) …
nPm RUN deploy prod
NPM RUN dePLOY TEST
NPM TEST
PM
new app
We need an Auth …

34. An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJ
master
DEV 2
if (… $#$^#@
Shared module
master
AUTH MODULE
MAIN PROJ
SHARED MODULE
DEV 3
if (… $#$^#@
AUTH module
master
@bsf/main-proj@1.0.1 @bsf/shared@1.5.2 @bsf/auth@1.2.2
npm install @bsf/auth@1.2.2
QA 1
bug on shared module
rollback to v1.4.0 & DEPLOY
prod server
NPM RUN documentation
1.bundle.js (12kb) 2.bundle.js (22kb) …
nPm RUN deploy prod
NPM RUN dePLOY TEST
NPM TEST
PM
new app
We need an Auth …
it is very easy to do:
Npm install @bsf/auth

35. Thanks for
watching!
Ionita Dragos Cristian
Business Software Frontend
https://www.linkedin.com/in/
dragos-ionita-8ab20756