Story of a side project built with vue.js

Slide 1

Slide 1 text

STORY OF A SIDE PROJECT BUILT WITH VUE.JS .WS Ross Lake, in Northern Cascades National Park, Washington, 21st August 2017, NASA NICOLAS GRENIÉ @PICSOUNG  DEVELOPER ADVOCATE  TYPEFORM BOULDERJS  20TH FEBRUARY

Slide 2

Slide 2 text

@picsoung @PICSOUNG DEVELOPER ADVOCATE

Slide 3

Slide 3 text

@picsoung

Slide 4

Slide 4 text

@picsoung APIs++

Slide 5

Slide 5 text

AGENDA DEMO STACK CHALLENGES OUTCOME NEXT

Slide 6

Slide 6 text

@picsoung BIG ECLIPSE IN 2017  HOPE YOU ENJOYED

Slide 7

Slide 7 text

@picsoung BIG ECLIPSE IN 2017  HOPE YOU ENJOYED

Slide 8

Slide 8 text

@picsoung BIG ECLIPSE IN 2017  HOPE YOU ENJOYED

Slide 9

Slide 9 text

@picsoung DEMO  .WS 

Slide 10

Slide 10 text

@picsoung BUILD A PROJECT  THAT BRINGS VALUE

Slide 11

Slide 11 text

@picsoung BUILD A PROJECT  THAT BRINGS VALUE AND LEARN  SOMETHING NEW

Slide 12

Slide 12 text

@picsoung .WS WHY VUE? BLAZE TEMPLATES

Slide 13

Slide 13 text

@picsoung .WS WHY VUE? BLAZE TEMPLATES body.html

Slide 14

Slide 14 text

@picsoung .WS WHY VUE? BLAZE TEMPLATES body.js body.html

Slide 15

Slide 15 text

@picsoung .WS WHY VUE?

Slide 16

Slide 16 text

@picsoung .WS WHY VUE? REACTIVITY DIDN’T NEED TO BE HARD

Slide 17

Slide 17 text

@picsoung .WS WHY VUE? https://2018.stateofjs.com/front-end-frameworks/overview/

Slide 18

Slide 18 text

@picsoung .WS WHY VUE? https://2018.stateofjs.com/front-end-frameworks/vuejs/

Slide 19

Slide 19 text

@picsoung .WS WHY VUE? Started with Matthias Hager’s tutorial to build complete Vue.js application  link

Slide 20

Slide 20 text

@picsoung .WS STRUCTURE OF A VUE COMPONENT

Slide 21

Slide 21 text

@picsoung .WS ADD VUE-ROUTER TO HAVE ROUTES

Slide 22

Slide 22 text

@picsoung .WS COMMUNICATE BETWEEN COMPONENTS authorDetails.vue

Slide 23

Slide 23 text

@picsoung .WS COMMUNICATE BETWEEN COMPONENTS authorDetails.vue listBooks.vue

Slide 24

Slide 24 text

@picsoung .WS COMMUNICATE BETWEEN COMPONENTS authorDetails.vue listBooks.vue

Slide 25

Slide 25 text

@picsoung .WS VUEX TO THE RESCUE I did not use it properly in this project     Similar to Facebook’s ﬂux  Single source of truth  Library for Actions, Mutations, Getters

Slide 26

Slide 26 text

@picsoung .WS VUEX TO THE RESCUE I did not use it properly in this project     Similar to Facebook’s ﬂux  Single source of truth  Library for Actions, Mutations, Getters

Slide 27

Slide 27 text

@picsoung .WS USE NUXT ‣ I did not use it properly in this project ‣ Best practices packaged all together ‣ Comes with: ‣ Vuex ‣ Vue-router ‣ vue-méta ‣ Forces a pattern in project structure ‣ Intelligent routing ‣ SEO friendly ‣ And much more

Slide 28

Slide 28 text

@picsoung .WS WHAT ELSE WAS   IN ?

Slide 29

Slide 29 text

@picsoung .WS TECH STACK APIS

Slide 30

Slide 30 text

@picsoung .WS EVENTS DATA

Slide 31

Slide 31 text

@picsoung .WS EVENTS DATA

Slide 32

Slide 32 text

@picsoung .WS EVENTS DATA

Slide 33

Slide 33 text

@picsoung .WS EVENTS DATA

Slide 34

Slide 34 text

@picsoung .WS EVENTS DATA ⚠ Data consistency

Slide 35

Slide 35 text

@picsoung .WS EVENTS DATA ⚠ Data consistency ⚠ URL ﬁeld

Slide 36

Slide 36 text

@picsoung .WS THE FLOW ALGOLIA PLACES LATITUDE, LONGITUDE "latlng": { "lat": 37.7792, "lng": -122.419 },

Slide 37

Slide 37 text

@picsoung .WS THE FLOW GET EVENTS GET LOCAL ECLIPSE CIRCUMSTANCES FIND VISUALIZATION "latlng": { "lat": 37.7792, "lng": -122.419 }

Slide 38

Slide 38 text

@picsoung .WS GET EVENTS EVENTS INDEX GEOLOC SEARCH RENDER "latlng": { "lat": 37.7792, "lng": -122.419 }

Slide 39

Slide 39 text

@picsoung .WS GET EVENTS EVENTS INDEX GEOLOC SEARCH MATCHING EVENTS LISTS RENDER "latlng": { "lat": 37.7792, "lng": -122.419 }

Slide 40

Slide 40 text

@picsoung .WS GET EVENTS

Slide 41

Slide 41 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES "latlng": { "lat": 37.7792, "lng": -122.419 } Params: - date - height (default to 200) - coords API CALL

Slide 42

Slide 42 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES { "error":false, "apiversion":"2.0.0", "event": "Solar Eclipse of 2017 Aug. 21", "description": "Sun in Partial Eclipse at this Location", "day": 21, "month": 8, "year": 2017, "deltaT": "69.4s", "lat": "37.774889", "lon": "-122.419389", "height": "200m", "tz": "0", "local_data": [ { "phenomenon": "Eclipse Begins", "day": "21", "time": "16:01:30.3", "altitude": "28.7", "azimuth": "97.3", "position_angle": "296.5", "vertex_angle": "349.7" }, { "phenomenon": "Maximum Eclipse", "day": "21", "time": "17:15:12.7", "altitude": "42.8", "azimuth": "111.2" }, { "phenomenon": "Eclipse Ends", "day": "21", "time": "18:37:05.2", "altitude": "56.4", "azimuth": "134.2", "position_angle": "95.6", "vertex_angle": "131.0" } ], "duration": "2h 35m 34.9s", "magnitude": "0.801", "obscuration": "75.5%" }

Slide 43

Slide 43 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES

Slide 44

Slide 44 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in UTC0

Slide 45

Slide 45 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in UTC0 ✅ Use TimezoneDB API ﬁnd tmz

Slide 46

Slide 46 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API ﬁnd tmz

Slide 47

Slide 47 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API ﬁnd tmz ✅ Use AMZ API Gateway to proxy

Slide 48

Slide 48 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API ﬁnd tmz ✅ Use AMZ API Gateway to proxy ⚠ Site went down on launch day

Slide 49

Slide 49 text

@picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES

Slide 50

Slide 50 text

@picsoung .WS FIND VISUALIZATION

Slide 51

Slide 51 text

@picsoung .WS FIND VISUALIZATION

Slide 52

Slide 52 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes

Slide 53

Slide 53 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others

Slide 54

Slide 54 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others ⚠ Scrape SVG code from timeandate

Slide 55

Slide 55 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ displays image

Slide 56

Slide 56 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ displays image ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa

Slide 57

Slide 57 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ displays image ✅ Add geoloc data ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa

Slide 58

Slide 58 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ displays image ✅ Add geoloc data ✅ Create new Algolia index ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa

Slide 59

Slide 59 text

@picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠ Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ displays image ✅ Add geoloc data ✅ Create new Algolia index ⚠ copyrights issues ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa

Slide 60

Slide 60 text

@picsoung .WS NASA ONE IMAGE A DAY API

Slide 61

Slide 61 text

@picsoung .WS OUTCOME

Slide 62

Slide 62 text

@picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

Slide 63

Slide 63 text

@picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆ ✅ Medium post - 569 569

Slide 64

Slide 64 text

@picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆ ✅ Medium post - 569 569 ✅ Featured on Fastco August 7th 1600

Slide 65

Slide 65 text

@picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆ ✅ Medium post - 569 569 ✅ Featured on Lifehacker August 7th 3800 22k ✅ Featured on Fastco August 7th 1600

Slide 66

Slide 66 text

@picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆ ✅ Medium post - 569 569 ✅ Featured on Lifehacker August 7th 3800 22k ✅ Featured on Fastco August 7th 1600 ✅ SanLuisObispo.com

Slide 67

Slide 67 text

@picsoung .WS OUTCOME Places

Slide 68

Slide 68 text

@picsoung .WS OUTCOME ✅ 10k users 12k sessions 15k views Places

Slide 69

Slide 69 text

@picsoung .WS OUTCOME ✅ 10k users 12k sessions 15k views ✅ Exceed Algolia free plan Places

Slide 70

Slide 70 text

@picsoung .WS OUTCOME ✅ 10k users 12k sessions 15k views ✅ Exceed Algolia free plan

Slide 71

Slide 71 text

@picsoung .WS OUTCOME

Slide 72

Slide 72 text

@picsoung .WS OUTCOME ✅ 1 issue on algolia/places

Slide 73

Slide 73 text

@picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1 question on Astronomy StackExchange

Slide 74

Slide 74 text

@picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1 question on Astronomy StackExchange ✅ Discussion with Time&Date API team

Slide 75

Slide 75 text

@picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1 question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js

Slide 76

Slide 76 text

@picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1 question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js ✅ First experience with Bulma CSS

Slide 77

Slide 77 text

@picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1 question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js Emoji Domains ✅ First experience with Bulma CSS

Slide 78

Slide 78 text

@picsoung .WS NEXT

Slide 79

Slide 79 text

@picsoung .WS NEXT

Slide 80

Slide 80 text

@picsoung .WS NEXT

Slide 81

Slide 81 text

@picsoung .WS NEXT ☠

Slide 82

Slide 82 text

@picsoung .WS WANT TO START WITH VUE? https://vuex.vuejs.org/ https://www.vuemastery.com/ https://nuxtjs.org https://github.com/vuejs/awesome-vue https://madewithvuejs.com/

Slide 83

Slide 83 text

QUESTIONS? THANK YOU Let us know how you liked it: bit.ly/nicoBoulderJS