VT2018 - DA355A - Phonegap, react, vue.js
0 likes102 views
VT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.js
- 2. Frågor innan vi drar igång?
- 4. Dagens agenda • Native vs. Webbapplikationer? • Hybridapplikationer • PhoneGap (Cordova) • Moderna ramverk för webbutveckling • Vue.js • React
- 5. Att bygga applikationer med webbtekniker HTML / CSS / JS / m.m.
- 7. Vilka för- och nackdelar finns det med webbapplikationer och nativa applikationer?
- 10. Vilka är era topp 3 applikationer? (som inte är förinstallerade)
- 16. Saker att tänka på vid hybridappar • HTML5 is NOT better than native, but it rarely matters • It is possible to create iOS applications without a Mac • You need to use a HTML5 framework, and you need to choose a good one • HTML5 (hybrid) can do EVERYTHING native can do • The DOM is the biggest determining factor for performance • Debugging is sometimes awesome, sometimes difficult https://www.joshmorony.com/7-lessons-from-3-years-of- html5-mobile-application-development/
- 17. Vilka appar är hybridappar?
- 19. Verktyg för att skapa hybridappar?
- 26. En kodbas till flera enheter
- 27. Att komma åt ”native” API hos enheten
- 34. Kom igång med PhoneGap http://phonegap.com/getstarted/
- 36. Kom igång med PhoneGap http://phonegap.com/getstarted/
- 41. En snabb demo?
- 46. In the job listings...
- 47. Case
- 49. Case
- 50. Tankesätt 1. - Vi utgår att våra filmer sparas i en array 2. Strukturera upp bra HTML-kod 3. Ange id:n för de element som vi behöver 1. Textfältet för ny filmtitel • #new-movie 2. Knappen för att lägga till en ny film • #add-movie 3. Listan för att visa upp alla filmerna • #movies 4. Skriv funktionerna i JavaScript 1. $(”#add-movie”).on(”click”, function() { ... }); 2. renderMovies();
- 54. Varför Vue eller React – jQuery funkar ju! • Snabb rendering av sidor genom virtuell DOM • Komponentbaserat • Rendering på serversidan • Enkla integrationer med olika routing-verktyg • Stort community och mycket support • Bättre struktur för större projekt
- 57. Vue.js • Ett JavaScript-ramverk för att bygga grafiska gränssnitt • Fokuserar på ”View”-lagret (man pratat ofta om MVC) • Enkelt att integrera med andra bibliotek
- 58. Fördelar • Enkelt att lära sig! • Lättviktigt • Snabbt • Reaktivt • Virtuell DOM • Komponentbaserat • Mycket anpassningsbart, t.ex. med andra ramverk / bibliotek
- 59. Komponenter?
- 60. Komponenter i vårt exempel app movie movie movie
- 65. React • Ett JavaScript-ramverk för att bygga grafiska gränssnitt • Fokuserar på ”View”-lagret (man pratat ofta om MVC) • Har ett stort ekosystem av komponenter
- 66. Fördelar • Snabbt • Reaktivt • JavaScript-drivet • JSX • Virtuell DOM • Komponentbaserat • Bra för stora projekt • Syskon med React Native • Mycket stort ekosystem
- 67. Komponenter?
- 68. Komponenter i vårt exempel MovieList Movie Movie Movie
- 71. Att arbeta med react ”på riktigt”
- 72. Att komma igång... 1. Installera NPM: https://www.npmjs.com/get-npm 2. Installera ett paket som skapar ett react-projekt • npm install -g create-react-app 3. Skapa ett projekt • create-react-app my-app 4. Navigera in till projekt-mappen • cd my-app 5. Starta en utveckling-server (miljön) • npm start
- 73. Såhär kan det se ut...