Building Tesla’s Battery Range Calculator with Vue.js or ReactJS
summary
Built a Tesla Battery Range Calculator twice using Vue.js and React, wired to a lookup table backend that returns ranges by model given speed, temperature, wheel size and climate. Vue build claims 60 KB vs 100 KB for React and sketches a 100 vs 200 lines advantage in code; Angular is ~500 KB. Examples include model 60 → 224 miles at 45 mph, −10°C, 19" wheels with climate on and ~267 miles for a default case. Performance and UI parity are demonstrated.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 0:59Tesla range calculator demo
- 2:27Vue.js basics overview
- 3:08Simple Vue.js app example
- 4:54Vue.js component structure
- 6:39Vue.js app entry point
- 8:07Vue.js component logic
- 10:16Tesla battery component details
- 12:49Passing data in Vue.js
- 13:52Child components in Vue.js
- 15:17React basics overview
- 15:38React component structure
- 17:22React props and state
- 18:46React app entry point
- 19:50React functional components
- 20:54React state management
- 21:59Passing data in React
- 23:47React state changes
- 25:31Recalculating stats in React
- 26:36Vue vs React comparison
- 28:01Workshop resources
related talks
26mBuilding Awesome UI Apps with VUE
01h 03mReact vs Angular vs Vue
39mVue.js - developer friendly, fast and versatile
19mAngular + React = Speed
18mWhy we love VueJS at NSoft
10mAI Helped Me Learn: Vue Through the Lens of a React Developer
25mA React Point of Vue
08mLightning fast SSR React apps with top perceived performance and no (client side) JavaScript