Slide 1

Slide 1 text

ADVANCE WEB PROGRAMMING WITH VUEJS Irfan Maulana | Front End Developer

Slide 2

Slide 2 text

About Me Name : Irfan Maulana Position : Software Development Engineer Role : Front End Developer + https://github.com/mazipan + https://mazipan.github.io/

Slide 3

Slide 3 text

Vue.js Intro Read more : https://vuejs.org/

Slide 4

Slide 4 text

Vue.js in Blibli.com

Slide 5

Slide 5 text

Advance Web Application + Single Page Application + Hot Module Replacement + Frontend Routing + ES6+ Syntax and Linting + CSS Pre-processor and Autoprefixer + Unit Test and E2E + Build with minifier + State Management + i18n + Etc…

Slide 6

Slide 6 text

Prerequisites + Nodejs : https://nodejs.org/en/ (> 6.x) + NPM : >3 + Git : https://git-scm.com/

Slide 7

Slide 7 text

Vue-CLI Skeleton + Vue CLI : https://github.com/vuejs/vue-cli + Webpack Template : https://github.com/vuejs-templates/webpack + LocaleTemplate : https://github.com/vuejs/vue-cli#local-templates

Slide 8

Slide 8 text

Creating Webpack Skeleton

Slide 9

Slide 9 text

Install and Running Project

Slide 10

Slide 10 text

Open Your Browser

Slide 11

Slide 11 text

Learn Data Binding Hands on…

Slide 12

Slide 12 text

Learn Computed and Watch Hands on…

Slide 13

Slide 13 text

Learn Props and Events Hands on…

Slide 14

Slide 14 text

Learn Routing Hands on…

Slide 15

Slide 15 text

Learn make API Request Hands on…

Slide 16

Slide 16 text

Learn State Management Hands on…

Slide 17

Slide 17 text

Source code & learn from more example Result from this session : https://github.com/mazipan/vue-webpack-sample See other projects : https://github.com/mazipan?tab=repositories&language=vue

Slide 18

Slide 18 text

Learn by doing J Find public API here : https://github.com/toddmotto/public-apis And create your web application using Vue Webpack Template !!! Fork this project : https://github.com/mazipan/vue-webpack-sample Then add your identity and project link to exercise folder

Slide 19

Slide 19 text

THANK YOU