Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

The new way to write a frontend software

167 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

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

×