Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enhancing Web Pages with Vue: When You Don't Need a Full SPA

152 views

Published on

A Techorama talk about how to use Vue in non-traditional/non-spa situations.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Enhancing Web Pages with Vue: When You Don't Need a Full SPA

  1. 1. Shawn Wildermuth Microsoft MVP, Instructor, and Filmmaker https://wildermuth.com @shawnwildermuth Enhancing Web Pages with Vue: When You Don’t Need a full SPA
  2. 2. Who Am I? Author, Instructor, Coach Pluralsight Author > 20 Courses to my name http://shawnw.me/psauthor Wilder Minds Training Courses on Vue, Bootstrap 4 & Font Awesome http://shawnw.me/my-courses Making a Film Hello World Film http://helloworldfilm.com
  3. 3. What is a SPA? Single Page Application Typically monolithic enterprise app Can be consumer facing Wants to replace web navigation Wants to centralize services
  4. 4. Should Everything be a SPA? Typically Overused SPA is great for forms over data SPA is great for dashboards Crowbarring a SPA into web *sites* is silly
  5. 5. What is Vue? Simple and Minimal Incremental so can scale up Just JavaScript Great for when a full SPA is too much But can scale up to a big SPA
  6. 6. Am I Here to Bash Angular or React?
  7. 7. Anatomy of an App Your Code JSX Compiler Babel Webpack Your Code AOT Compiler Webpack Browser Ready Code Browser Ready Code Your Code Browser Ready Code TypeScript/ES6 Compiler Webpack Optional React Angular Vue
  8. 8. Vue’s Philosophy Vue scales up Goal is to only do what it’s good at Doesn’t do: Networking Validation Routing But has recommended Extensions Networking: axios Validation: vee-validate Routing: vue-router
  9. 9. Vue Supports Declarative Rendering Component-based Composition One and Two-way Binding Single-File Components Plugins, Mixins, and Filters Big Ecosystem
  10. 10. Demo Basic Binding
  11. 11. Demo Event Handling
  12. 12. Demo List Binding
  13. 13. Demo Form Binding
  14. 14. Demo Components
  15. 15. Demo Network Requests
  16. 16. Demo Validation
  17. 17. Takeaways Get It: http://vuejs.org My Blog (for this demo): http://wildermuth.com

×