35
The new way to write a front-end software.
| Date post: | 15-Apr-2017 |
| Category: |
Software |
| Upload: | dragos-ionita |
| View: | 101 times |
| Download: | 2 times |
The new way to write a front-end
software.
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
JavaScript Applications Evolution
JS (alias Vanilla)jQuery
Umbrella Js …
AngularJS Flux (React)
…
AngularJS 2 Redux
…Js (alias Vanilla)
2006 - 2981
★ jQuery revolutionising the javascriptprogramming.
★ 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.
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)
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
An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
MAIN PROJ
An example of an application architecture (2013-2014)
if (… $#$^#@
DEV 1
MAIN PROJ
if (… $#$^#@
DEV 2
git merge
SHARED MODULE
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 SHAREDrollback app(both)
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 SHAREDrollback app(both)
MAIN PROJSHARED MODULE
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
1 pers
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
2 pers
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 BUG
MIN, UGLY, GIT PULL ORIGIN MASTER => APP.PROD.JS (5844KB)
DEPLOY DAY
n pers + (n+1) pers
A NEW PROJ AFTER 6 MONTHS
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 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 appWe need an Auth system, alsowe want to use the same ui elementlike on project 1
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 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 appWe need an Auth system, alsowe want to use the same ui elementlike on project 1
PROJect 1?I am new …
ahh, OK. i see …copy/paste … copy/paste
DEV 45
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 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 appWe need an Auth system, alsowe want to use the same ui elementlike on project 1
PROJect 1?I am new …
ahh, OK. i see …copy/paste … copy/paste
DEV 45
AFTER 3 WEEKS
PM
$@#$@##$%!@#
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 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 appWe need an Auth system, alsowe want to use the same ui elementlike on project 1
PROJect 1?I am new …
ahh, OK. i see …copy/paste … copy/paste
DEV 45
AFTER 3 WEEKS
PM
$@#$@##$%!@#
Yuppyyywe have a new auth system
DEV 45
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 SHAREDrollback app(both)OHHH NO … AUTHHH MODULE? NOW?
if (… $#$^#@
DEV 3
AUTH MODULE
MAIN PROJSHARED MODULE
AFTER 2 WEEKS0 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 appWe need an Auth system, alsowe want to use the same ui elementlike on project 1
PROJect 1?I am new …
ahh, OK. i see …copy/paste … copy/paste
DEV 45
AFTER 3 WEEKS
PM
$@#$@##$%!@#
Yuppyyywe have a new auth system
DEV 45
QA 81
hmm new module. ok.in the next 2 weeks i will test this feature
So … times are changing.
we need a new processes for development
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
MAIN PROJ
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
MAIN PROJSHARED MODULE
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
MAIN PROJSHARED MODULE
@bsf/[email protected] @bsf/[email protected]
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
npm install @bsf/[email protected]
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
npm install @bsf/[email protected]
QA 1
bug on shared modulerollback to v1.4.0 & DEPLOY
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
npm install @bsf/[email protected]
QA 1
bug on shared modulerollback to v1.4.0 & DEPLOY
prod serverNPM RUN documentation1.bundle.js (12kb) 2.bundle.js (22kb) … nPm RUN deploy prodNPM RUN dePLOY TEST NPM TEST
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
npm install @bsf/[email protected]
QA 1
bug on shared modulerollback to v1.4.0 & DEPLOY
prod serverNPM RUN documentation1.bundle.js (12kb) 2.bundle.js (22kb) … nPm RUN deploy prodNPM RUN dePLOY TEST NPM TEST
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
npm install @bsf/[email protected]
QA 1
bug on shared modulerollback to v1.4.0 & DEPLOY
prod serverNPM RUN documentation1.bundle.js (12kb) 2.bundle.js (22kb) … nPm RUN deploy prodNPM RUN dePLOY TEST NPM TEST
PM
new appWe need an Auth …
An example of an application architecture (2014-201?)
if (… $#$^#@
DEV 1
MAIN PROJmaster
DEV 2
if (… $#$^#@
Shared modulemaster
AUTH MODULE
MAIN PROJSHARED MODULE
DEV 3
if (… $#$^#@
AUTH modulemaster
@bsf/[email protected] @bsf/[email protected] @bsf/[email protected]
npm install @bsf/[email protected]
QA 1
bug on shared modulerollback to v1.4.0 & DEPLOY
prod serverNPM RUN documentation1.bundle.js (12kb) 2.bundle.js (22kb) … nPm RUN deploy prodNPM RUN dePLOY TEST NPM TEST
PM
new appWe need an Auth …
it is very easy to do:Npm install @bsf/auth
Thanks for watching!
Ionita Dragos Cristian Business Software Frontend https://www.linkedin.com/in/
dragos-ionita-8ab20756
