O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

The new way to write a frontend software

151 visualizações

Publicada em

Javascript Applications Evolution. A new way, in my vision, of how to create an application, maintaining and publishing. You will use tools like: angular2, webpack, frontend, npm.

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

The new way to write a frontend software

  1. 1. The new way to write a front-end software.
  2. 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. 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. 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. 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. 6. An example of an application architecture (2013-2014) if (… $#$^#@ DEV 1
  7. 7. An example of an application architecture (2013-2014) if (… $#$^#@ DEV 1 MAIN PROJ
  8. 8. An example of an application architecture (2013-2014) if (… $#$^#@ DEV 1 MAIN PROJ if (… $#$^#@ DEV 2 git merge SHARED MODULE
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. So … times are changing. we need a new processes for development
  23. 23. An example of an application architecture (2014-201?) if (… $#$^#@ DEV 1
  24. 24. An example of an application architecture (2014-201?) if (… $#$^#@ DEV 1 MAIN PROJ master MAIN PROJ
  25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 35. Thanks for watching! Ionita Dragos Cristian Business Software Frontend https://www.linkedin.com/in/ dragos-ionita-8ab20756

×