Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VT21 - DA355A - JS-ramverk

VT21 - DA355A - JS-ramverk

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

May 10, 2021
Tweet

Transcript

  1. JavaScript - Ramverk En snabb introduktion till ramverksdjungeln

  2. Dagens agenda • Snabb överblick över populära ramverk • Att

    bygga en todo-lista på olika sätt • En snabb introduktion till react • Tid för frågor kring projektet
  3. Orientera er i olika ramverk, olika sätta att skapa webbsidor

    Syfte med dagens föreläsning
  4. Ramverk • Slippa återuppfinna hjulet (designmönster) • Komma igång snabbare

    (tid = pengar) • Ändamålsenligt (rätt verktyg) • Inkluderad funktionalitet (router, data store) • Koncept: komponenter (parent, child, properties) • Utvecklingsmiljö
  5. Vilket ramverk?

  6. None
  7. https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

  8. https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

  9. https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

  10. https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

  11. Vad säger andra? • Angular vs React vs Vue: Which

    Framework to Choose in 2021 • https://www.codeinwp.com/blog/angular-vs-vue-vs-react/ • React vs Angular vs Vue.js — What to choose in 2020? • https://medium.com/techmagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in- 2018-b91e028fa91d
  12. Utvecklingsmiljö? • https://nodejs.org/en/download/ • nodejs (JavaScript utanför webbläsaren) • npm

    (pakethanterare för JavaScript) • Byggsystem • https://webpack.js.org • https://parceljs.org
  13. Todo-lista Dagens exempel vi kommer att prata kring

  14. None
  15. Vanilla JS

  16. None
  17. None
  18. None
  19. None
  20. http://webshare.mah.se/tsanti/ VT2019/DA355A/todo/js/index .html Todo list – Vanilla JS style

  21. Vanilla JS • Behöver ingen extern kod • Större kodbas

    (eventuell upprepning) • Svårt att täcka många edge cases • Omständigt att lösa vissa vanliga problem (routing
  22. None
  23. None
  24. None
  25. None
  26. None
  27. http://webshare.mah.se/tsanti/ VT2019/DA355A/todo/jquery/i ndex.html Todo list – jQuery style

  28. None
  29. https://w3techs.com/technologies/comparison/js-jquery,js-react

  30. • Ett bibliotek • Större kodbas (men mindre än Vanilla

    JS) • jQuery täcker en del edge cases • Stort community (enkelt att hitta guider) • Många plugins för vanliga problem
  31. Varför använder vi JS-ramverk?

  32. None
  33. None
  34. Varför använder vi JS-ramverk?

  35. None
  36. Att använda ett ramverk vs. ett bibliotek jQuery.js

  37. None
  38. None
  39. Hur kommer man igång med react

  40. None
  41. Komponenter App TodoList Todo

  42. Komponenter?

  43. Todo-lista med React

  44. React • Ett bibliotek (dvs. allt är inte inkluderat) •

    Inkluderar inte en lösning för routing och data store • Arbetar med komponenter (projektstruktur) • Koncept: Virtual DOM, JSX • Byggsystem i terminalen rekommenderas • https://create-react-app.dev
  45. Hur kommer man igång med Angular?

  46. Installera nödvändiga komponenter 1. Installera Node.js • https://nodejs.org/en/download/ 2. Installera

    NPM • https://www.npmjs.com/get-npm 3. Installera Angular CLI • https://cli.angular.io/
  47. Lär känna terminalen, nyckeln till framgång • Skapa ett nytt

    Angular-projekt ng new projektnamn • Navigera till det nyskapade Angular-projektet cd projektnamn • Starta Angular-projektet ng serve • Skapa en klass i Angular-projektet ng generate class Todo • Skapa en komponent-klass i Angular-projektet ng generate component TodoList
  48. None
  49. Komponenter app.component todo-list.component

  50. todo.ts

  51. None
  52. Exempel på TypeScript

  53. Todo-lista med Angular

  54. Angular Hur kan det se ut?

  55. todo.ts

  56. None
  57. Angular • Ett ramverk • Inkluderar funktionalitet för: routing, data

    store, m.m. • Kräver ett byggsystem för terminalen • Avancerat/svårt att komma igång med • Stort community (funnits länge, sedan 2010) • TypeScript (Typer till JavaScript) • https://www.typescriptlang.org
  58. Hur kommer man igång med vue.js

  59. None
  60. Komponenter <app> <todolist> <todo>

  61. Komponenter?

  62. Todo-lista med Vue

  63. None
  64. Vue • Ett ramverk • Inkluderar funktionalitet för: routing, data

    store, m.m. • Kan snabbt komma igång (med hjälp av CDN) • Eget byggsystem för terminalen • Stort community • Liten filstorlek
  65. • Ett (nytt) ramverk • Kompilerar din kod till färdig

    HTML/CSS/JS • Arbetar med komponenter • Varje komponent består av HTML/CSS/JS
  66. Frågor?

  67. Kursens projekt

  68. Skapa en webbapplikation genom ett JS-ramverk T.ex. React, Angular, Vue,

    Ember, etc.
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. Frågor kring projektet?