Slides from the 8/27/2019 MKE JS Meetup. Goes through an overview of VueJS, the tools in the ecosystem, and how to build a Single Page Application (SPA) with VueJS.
Room with a Vue - Introduction to Vue.jsZachary Klein
The document provides an introduction to Vue.js, a progressive framework for building user interfaces. It discusses Vue's core concepts like the Vue instance, templates, components, and the ecosystem of libraries that support Vue like Vuex for state management and Vue Router for routing. The document compares Vue to Angular and React, noting Vue aims for a balance between rich features and clean code. It promotes Vue as a good option for both beginners and experienced developers looking for a new view on single-page apps.
Vue.JS is a progressive JavaScript framework created by Evan You, formerly of Google. It was first released in 2014 and is growing in popularity as an alternative to AngularJS and React. Key features include declarative rendering, dependency tracking for automatic re-renders, and directives for DOM manipulation. Developers can get started by adding Vue to an HTML page or with single file components using tools like Webpack. The documentation provides many examples for building interfaces with directives, conditional rendering, forms, and more. While still smaller than communities for Angular and React, Vue has growing support from companies and an active ecosystem of libraries.
The document provides an overview of Vue.js, including:
- Vue.js is a progressive framework for building user interfaces that focuses only on the view layer.
- It is easy to integrate Vue.js into existing projects or with other libraries.
- Vue.js allows developers to progressively adopt capabilities as needed rather than requiring adoption of the entire framework upfront like some other frameworks.
- The document then covers various Vue.js concepts like directives, components, routing, communication between components, and connecting Vue.js to a backend.
This document provides an introduction and overview of Vue.js, including:
- What Vue.js is and how it compares to other frameworks
- The basic concepts of single file components and getting started quickly
- How to create a development environment in one minute
- Core Vue.js features like directives, computed properties, binding styles and classes, and list rendering
- Links to additional resources on using Vue.js for routing and the latest news
Vue.js is an open-source progressive framework for building user interfaces that focuses on the view layer. It has a virtual DOM and reactive components. Its core is small and works well with companion libraries. Single file components allow importing of templates, logic, and styles. Popular companion libraries include Vuex for state management and Vue Router for routing. The Vue CLI makes it easy to scaffold Vue projects with features like routing, lazy loading, and preloading for improved performance.
Vue.js is a modern JavaScript framework for building UI on the web. It managed to combine hipster virtual DOM approach with API well known to any Angular developer. Components, SSR, CLI, state management, dev tools and much more. Besides it has smallest footprint (23kb gziped) and provides great developer experience. Those are the reasons the community and the adoption was growing rapidly last year.We'll have an intro to vue.js API and usage.
Room with a Vue - Introduction to Vue.jsZachary Klein
The document provides an introduction to Vue.js, a progressive framework for building user interfaces. It discusses Vue's core concepts like the Vue instance, templates, components, and the ecosystem of libraries that support Vue like Vuex for state management and Vue Router for routing. The document compares Vue to Angular and React, noting Vue aims for a balance between rich features and clean code. It promotes Vue as a good option for both beginners and experienced developers looking for a new view on single-page apps.
Vue.JS is a progressive JavaScript framework created by Evan You, formerly of Google. It was first released in 2014 and is growing in popularity as an alternative to AngularJS and React. Key features include declarative rendering, dependency tracking for automatic re-renders, and directives for DOM manipulation. Developers can get started by adding Vue to an HTML page or with single file components using tools like Webpack. The documentation provides many examples for building interfaces with directives, conditional rendering, forms, and more. While still smaller than communities for Angular and React, Vue has growing support from companies and an active ecosystem of libraries.
The document provides an overview of Vue.js, including:
- Vue.js is a progressive framework for building user interfaces that focuses only on the view layer.
- It is easy to integrate Vue.js into existing projects or with other libraries.
- Vue.js allows developers to progressively adopt capabilities as needed rather than requiring adoption of the entire framework upfront like some other frameworks.
- The document then covers various Vue.js concepts like directives, components, routing, communication between components, and connecting Vue.js to a backend.
This document provides an introduction and overview of Vue.js, including:
- What Vue.js is and how it compares to other frameworks
- The basic concepts of single file components and getting started quickly
- How to create a development environment in one minute
- Core Vue.js features like directives, computed properties, binding styles and classes, and list rendering
- Links to additional resources on using Vue.js for routing and the latest news
Vue.js is an open-source progressive framework for building user interfaces that focuses on the view layer. It has a virtual DOM and reactive components. Its core is small and works well with companion libraries. Single file components allow importing of templates, logic, and styles. Popular companion libraries include Vuex for state management and Vue Router for routing. The Vue CLI makes it easy to scaffold Vue projects with features like routing, lazy loading, and preloading for improved performance.
Vue.js is a modern JavaScript framework for building UI on the web. It managed to combine hipster virtual DOM approach with API well known to any Angular developer. Components, SSR, CLI, state management, dev tools and much more. Besides it has smallest footprint (23kb gziped) and provides great developer experience. Those are the reasons the community and the adoption was growing rapidly last year.We'll have an intro to vue.js API and usage.
Do you hear of Vue.js everywhere lately? With this presentation, you will be able to create your first app in just 30 minutes. Understand the basics and get yourself a solid knowledge to start your journey with the new progressive JavaScript Framework.
Vue.js is a JavaScript framework for building user interfaces that has gained popularity recently. It is smaller in size than Angular and React but provides similar functionality like virtual DOM and one-way data binding. Vue.js applications can range from simple single-page apps to complex projects with nested components. Key aspects of Vue.js include reusable components, templates with directives like v-if and v-for, lifecycle hooks, and the use of Vuex for state management and Vue Router for routing. The ecosystem around Vue.js continues to grow with tools, libraries, and support from companies using it in production.
Vue.js is a progressive JavaScript framework that focuses on building user interfaces and is used for single-page applications. It was created by Evan You and released in 2014. Vue.js uses declarative templates and reactive data binding to render the view layer for an application. Templates in Vue use HTML-based syntax with directives prefixed with v- to dynamically bind expression results. Common directives include v-bind, v-if, and v-for. Vue.js applications can be built with its core library or integrated with other libraries and frameworks.
Vue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.
I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)
Vue.js is a progressive framework for building user interfaces that focuses solely on the view layer. It was created by Evan You and takes inspiration from other frameworks to combine useful ideas in an approachable way. Vue can be installed via CDN, NPM, or Vue CLI. It uses components to organize code for reusability. Components can also accept external data via props. Additional tools like Vuex, Vue Router, and libraries help with state management, routing, and following best practices.
Vue comes with a simple and minimalistic core that is perfect for simple, single page applications that don't require heavy overheads. Vue works primarily on the ViewModel with two-way data bindings and is designed to be simple and flexible, allowing developers to mold the layer as they see fit.
The document provides an introduction to Vue.js through examples and cases for building applications. It begins with quick start examples demonstrating basic Vue.js functionality like data binding, looping through arrays, and methods. It then covers two cases for building full applications with Vue.js, including fetching and manipulating data, and integrating with external APIs. References for further learning about Vue.js are also provided.
VueJS is a progressive framework for building user interfaces. It introduces key concepts like the MVVM pattern, reactivity system, lifecycle hooks and components. The document discusses various aspects of VueJS including using .vue files with different languages for templates, styles and scripts. It also covers Vuex for state management, Vue Router for routing, VueStrap for Bootstrap components, and integrating JWT authentication with Auth0.
Christmas holiday experiment: creating a VueJS front that gets data through GraphQL from a decoupled WordPress install on another server. Read more on this blogpost: https://conimpeto.be/wordpress/create-a-wordpress-twentyseventeen-theme-with-vuejs-and-graphql/.
In a world dominated by React and Angular, Vue is the open source framework that brings a third alternative to the table, combining the strengths of the first two while trying to weed out their weaknesses.
The result is an easy to use, lightweight and versatile framework. In this talk we will explore Vue's architecture, see how components interact among themselves, have a look at the event model and in the end, how to wrap everything together in a SPA using Webpack.
Introduction to modern front-end with Vue.jsmonterail
Vue.js przebojem zdobywa popularność w środowisku frontendowym. W wielu ofertach pracy możesz spotkać się z nim jako z jednym z sugerowanych frameworków. Zdecydowanie warto poświęcić mu swoją uwagę, ponieważ łatwo się go nauczyć, a może on otworzyć Tobie bramy do pracy jako developer w niejednej firmie.
Nasz zespół, jako jeden z pionierów Vue.js w Polsce, na co dzień wykorzystuje tę technologię w wielu projektach komercyjnych. Znasz podstawy HTMLa, CSSa i JavaScriptu? Może na studiach miałeś okazję bawić się jQuery? To wystarczy, by zacząć swoją przygodę z Vue.js.
W trakcie prezentacji opowiemy Wam o komponentach - wzorcu na którym opierają się wszystkie nowoczesne frameworki frontendowe. Dowiecie się o również o tym, do czego służą dyrektywy, metody, computed properties i eventy w Vue.js oraz jak z nich korzystać. Stworzymy małą aplikację, aby pokazać Wam jak można zrobić to samemu od A do Z.
With this presentation, I am showing how to easy decouple a simple Drupal blog with Nuxt framework and GraphQL. You will be first shortly introduced to Vue.JS and Nuxt platform with some code examples and in the end, you will be able to clone a Github repository with a full working example: https://github.com/davision/nuxt-graphql-drupal-blog
Vue components are reorganized into a single index component file structure. Key components include App, GithubInput, GithubOutput, and GithubUserData. Data is passed between components via a central event bus. The GithubInput emits username to the bus. GithubOutput listens for the username, makes an API call to fetch user data, and passes it to the GithubUserData component for display.
From React to React Native - Things I wish I knew when I startedsparkfabrik
INTRO
Why RN
Welcome to the Mobile world
The app bundle
UI COMPONENTS/NAVIGATION
Android Jetpack
iOS UIKit
React Navigation
THE JAVASCRIPT ENGINE
JavaScriptCore
Chrome V8
Hermes
THE LOCAL DEVELOPMENT
Metro
Flipper
Gradle
CocoaPods
Fastlane
Ember.js brings some new and interesting conventions to the table for designing single page applications. In this talk, I'll be covering the key pieces of Ember, how it compares to other frameworks, and the backstory of why it was created.
Do you hear of Vue.js everywhere lately? With this presentation, you will be able to create your first app in just 30 minutes. Understand the basics and get yourself a solid knowledge to start your journey with the new progressive JavaScript Framework.
Vue.js is a JavaScript framework for building user interfaces that has gained popularity recently. It is smaller in size than Angular and React but provides similar functionality like virtual DOM and one-way data binding. Vue.js applications can range from simple single-page apps to complex projects with nested components. Key aspects of Vue.js include reusable components, templates with directives like v-if and v-for, lifecycle hooks, and the use of Vuex for state management and Vue Router for routing. The ecosystem around Vue.js continues to grow with tools, libraries, and support from companies using it in production.
Vue.js is a progressive JavaScript framework that focuses on building user interfaces and is used for single-page applications. It was created by Evan You and released in 2014. Vue.js uses declarative templates and reactive data binding to render the view layer for an application. Templates in Vue use HTML-based syntax with directives prefixed with v- to dynamically bind expression results. Common directives include v-bind, v-if, and v-for. Vue.js applications can be built with its core library or integrated with other libraries and frameworks.
Vue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.
I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)
Vue.js is a progressive framework for building user interfaces that focuses solely on the view layer. It was created by Evan You and takes inspiration from other frameworks to combine useful ideas in an approachable way. Vue can be installed via CDN, NPM, or Vue CLI. It uses components to organize code for reusability. Components can also accept external data via props. Additional tools like Vuex, Vue Router, and libraries help with state management, routing, and following best practices.
Vue comes with a simple and minimalistic core that is perfect for simple, single page applications that don't require heavy overheads. Vue works primarily on the ViewModel with two-way data bindings and is designed to be simple and flexible, allowing developers to mold the layer as they see fit.
The document provides an introduction to Vue.js through examples and cases for building applications. It begins with quick start examples demonstrating basic Vue.js functionality like data binding, looping through arrays, and methods. It then covers two cases for building full applications with Vue.js, including fetching and manipulating data, and integrating with external APIs. References for further learning about Vue.js are also provided.
VueJS is a progressive framework for building user interfaces. It introduces key concepts like the MVVM pattern, reactivity system, lifecycle hooks and components. The document discusses various aspects of VueJS including using .vue files with different languages for templates, styles and scripts. It also covers Vuex for state management, Vue Router for routing, VueStrap for Bootstrap components, and integrating JWT authentication with Auth0.
Christmas holiday experiment: creating a VueJS front that gets data through GraphQL from a decoupled WordPress install on another server. Read more on this blogpost: https://conimpeto.be/wordpress/create-a-wordpress-twentyseventeen-theme-with-vuejs-and-graphql/.
In a world dominated by React and Angular, Vue is the open source framework that brings a third alternative to the table, combining the strengths of the first two while trying to weed out their weaknesses.
The result is an easy to use, lightweight and versatile framework. In this talk we will explore Vue's architecture, see how components interact among themselves, have a look at the event model and in the end, how to wrap everything together in a SPA using Webpack.
Introduction to modern front-end with Vue.jsmonterail
Vue.js przebojem zdobywa popularność w środowisku frontendowym. W wielu ofertach pracy możesz spotkać się z nim jako z jednym z sugerowanych frameworków. Zdecydowanie warto poświęcić mu swoją uwagę, ponieważ łatwo się go nauczyć, a może on otworzyć Tobie bramy do pracy jako developer w niejednej firmie.
Nasz zespół, jako jeden z pionierów Vue.js w Polsce, na co dzień wykorzystuje tę technologię w wielu projektach komercyjnych. Znasz podstawy HTMLa, CSSa i JavaScriptu? Może na studiach miałeś okazję bawić się jQuery? To wystarczy, by zacząć swoją przygodę z Vue.js.
W trakcie prezentacji opowiemy Wam o komponentach - wzorcu na którym opierają się wszystkie nowoczesne frameworki frontendowe. Dowiecie się o również o tym, do czego służą dyrektywy, metody, computed properties i eventy w Vue.js oraz jak z nich korzystać. Stworzymy małą aplikację, aby pokazać Wam jak można zrobić to samemu od A do Z.
With this presentation, I am showing how to easy decouple a simple Drupal blog with Nuxt framework and GraphQL. You will be first shortly introduced to Vue.JS and Nuxt platform with some code examples and in the end, you will be able to clone a Github repository with a full working example: https://github.com/davision/nuxt-graphql-drupal-blog
Vue components are reorganized into a single index component file structure. Key components include App, GithubInput, GithubOutput, and GithubUserData. Data is passed between components via a central event bus. The GithubInput emits username to the bus. GithubOutput listens for the username, makes an API call to fetch user data, and passes it to the GithubUserData component for display.
From React to React Native - Things I wish I knew when I startedsparkfabrik
INTRO
Why RN
Welcome to the Mobile world
The app bundle
UI COMPONENTS/NAVIGATION
Android Jetpack
iOS UIKit
React Navigation
THE JAVASCRIPT ENGINE
JavaScriptCore
Chrome V8
Hermes
THE LOCAL DEVELOPMENT
Metro
Flipper
Gradle
CocoaPods
Fastlane
Ember.js brings some new and interesting conventions to the table for designing single page applications. In this talk, I'll be covering the key pieces of Ember, how it compares to other frameworks, and the backstory of why it was created.
The document discusses serverless computing and introduces Microsoft Azure Functions as a serverless platform, highlighting how Functions allows developers to write code that runs in response to events using triggers and bindings to integrate with other Azure services, and provides examples of common serverless patterns that can be implemented using Functions.
This document provides an overview of topics that will be covered at a Microsoft Dev Camp in 2015. The topics include introductions to ASP.NET, Visual Studio web tools, ASP.NET Web API, building real-time web applications with SignalR, and Azure services. Sessions will cover web front-end development, ASP.NET updates, consuming and building Web APIs, and real-world scenarios for scaling, updating, and deploying applications on Azure.
Things are moving fast. Sometimes you might even feel that you own comfort zone is getting of control. But in a Mobile-First, Cloud-First world, things are changing to a crazy pace and to stay on the top of your game, you need keep up with the latest and greatest technologies that are available out there. By staying up to date, you will give to yourself new options that will let you be more productive, write better code and push you in a more open and more collaborative world. With the official shipment of Angular 2 and the current preview release of the SharePoint Framework, it is now the time to start moving towards those new technologies in your SharePoint Solutions. In this session, we will cover the modern tool belt of the SharePoint developer by covering the SharePoint Framework as the new surface to express yourself, Angular as a Framework to enable you to build complete applications within your SharePoint modern experiences and Azure Function as the perfect server-side companion for all your Office 365 & Azure development. This very demo-intensive session will make sure that at the end you get those 3 key takeaways : - Understand the role of the SharePoint Framework, Angular and Azure Functions in this Cloud-First, Mobile-First world - Have a complete sample where the modern tool belt is relevant and useful in a real-world scenario - Change the way you will think for your next SharePoint project
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Tom Johnson
This is a presentation I gave to the Southwestern Ontario STC chapter on API documentation on Feb 2, 2015. For more details, see my blog at http://idratherbewriting.com. You can listen to the recorded presentation here: http://youtu.be/I8rGe2w1sAo.
Things are moving fast. Sometimes you might even feel that you own comfort zone is getting of control. But in a Mobile-First, Cloud-First world, things are changing to a crazy pace and to stay on the top of your game, you need keep up with the latest and greatest technologies that are available out there. By staying up to date, you will give to yourself new options that will let you be more productive, write better code and push you in a more open and more collaborative world.
With the official shipment of Angular 2 and the current preview release of the SharePoint Framework, it is now the time to start moving towards those new technologies in your SharePoint Solutions.
In this session, we will cover the modern tool belt of the SharePoint developer by covering the SharePoint Framework as the new surface to express yourself, Angular as a Framework to enable you to build complete applications within your SharePoint modern experiences and Azure Function as the perfect server-side companion for all your Office 365 & Azure development.
This very demo-intensive session will make sure that at the end you get those 3 key takeaways :
Understand the role of the SharePoint Framework, Angular and Azure Functions in this Cloud-First, Mobile-First world
Have a complete sample where the modern tool belt is relevant and useful in a real-world scenario
Change the way you will think for your next SharePoint project
The future of web development write once, run everywhere with angular.js and ...Mark Roden
This slide deck was used in support of BTE 102 - The future of web development write once, run everywhere with angular.js and domino at IBMConnectED 2015
Presentation was given with Mark Leusink
The future of web development write once, run everywhere with angular js an...Mark Leusink
This document provides a summary of a presentation on using AngularJS and IBM Domino to build modern web applications.
The presentation introduces AngularJS, an open-source JavaScript framework, and how it uses a model-view-controller architecture. It also discusses using IBM Domino as a RESTful backend service via Domino Access Services or a custom REST API.
The presentation demonstrates a sample conference scheduling app built with AngularJS, Bootstrap, and data from an IBM Domino database. The app runs entirely on the client-side and shows how AngularJS allows building portable web apps that can run on any device or platform.
The document discusses various technologies for building web applications, including HTML5. It begins by explaining the anatomy of a web app, including the server-side components and use of backend services. It then covers different types of apps - native, web, and hybrid. A large portion of the document focuses on HTML5, describing new structural elements, forms, multimedia capabilities like audio and video, local storage options, and geolocation. It concludes by mentioning technologies like PhoneGap/Cordova for building cross-platform apps and WebSockets for real-time connections.
Drupal is not intended to directly generate entire web pages. It is better suited as a back-end content management system, with other technologies handling page assembly and delivery. For high-traffic sites, offloading elements like user comments, real-time updates and cached content to external services improves scalability. Edge side includes and client-side technologies can incorporate dynamic fragments into cached pages without involving Drupal. This allows Drupal to focus on content while distributing page load across the technical stack.
Alternative ways of developing web sites using EPiServer CMS. An introduction to three open source frameworks that allow us to better tackle complexity, have a more enjoyable development experience and deliver better, well tested sites using EPiServer CMS.
- The document discusses AngularJS and single page applications. It provides an introduction and overview of key AngularJS concepts including modules, controllers, views, services, dependency injection, and filters.
- Code samples and demos are referenced to illustrate concepts in more depth. Challenges with SEO and the benefits of TypeScript for adding type safety to JavaScript are also mentioned.
Should you use HTML5 to build your product? The pros & cons of using current ...boxuno
This document discusses the pros and cons of using HTML5 features to build products. It built a messaging client called boxUno using HTML5 that provided offline access, but HTML5 also caused limitations like browser incompatibility and crashes. The document covers HTML5 features like WebWorkers for concurrency, IndexedDB for offline databases, Application Cache for offline viewing, and WebRTC for video. While powerful, these features have drawbacks like debugging difficulties and changing APIs. The conclusion is HTML5 has advantages but also risks, so compatibility should be considered, and IndexedDB is currently the best option for offline access.
Top 12 Vue.js Developer Tools and Component Libraries (To Speed Up Vue.js Dev...Katy Slemon
In this blog, we provide you a list of some fundamental tools and libraries, as well as proven tips and tricks to level up your career as a Vue.js Developer.
This document discusses HTML5 and web application development. It begins with an overview of the anatomy of a web app, including setting up the server, using data services, and device detection. It then covers HTML5 features like new semantic tags, forms, multimedia capabilities using audio, video, and canvas. JavaScript APIs are discussed for geolocation, web storage, web SQL, and web workers. The document emphasizes that the mobile web is the most viable platform for cross-device applications.
Goal of the talk is to build a full web and mobile application powered by Angular
We will be talking about basics of AngularJS
We will be talking basics of WebAPI (which will expose Sitefinity’s data)
We will be talking about an easy way to create WebAPIS in Sitefinity using Babaganoush
Building a Conference web app which shows how to get and put data into Sitefinity using widgets powered by Angular
Building a Conference mobile app which shows how to get data from Sitefinity to a hybrid app powered by AngularJS
Similar to Building a Single Page Application with VueJS (20)
Exploring the Ethics and Implications of AI-Generated Nude Images.pdfUndress Baby
The AI Nude Generator is a cutting-edge tool that uses artificial intelligence to create nude images from standard photographs. This generator employs sophisticated algorithms to ensure the results are both realistic and detailed, highlighting the transformative power of AI in image editing. The AI Nude Generator stands as a testament to the progress in AI technology, offering innovative solutions for digital art and creative projects.
Web:- https://undressbaby.com/
How do you install the WHM and cPanel on AlmaLinux?CasperLAWRENCE
Learn how to install WHM/cPanel on AlmaLinux using our simple instructions. With this comprehensive guide, you'll be able to set up your server quickly.
European Standard S1000D, an Unnecessary Expense to OEM.pptxDigital Teacher
This discusses the costly implementation of the S1000D standard for technical documentation in the Indian defense sector, claiming that it does not increase interoperability. It calls for a return to the more cost-effective JSG 0852 standard, with shipbuilding companies handling IETM conversion to better serve military demands and maintain paperwork from diverse OEMs.
Folding Cheat Sheet #6 - sixth in a seriesPhilip Schwarz
Left and right folds and tail recursion.
Errata: there are some errors on slide 4. See here for a corrected versionsof the deck:
https://speakerdeck.com/philipschwarz/folding-cheat-sheet-number-6
https://fpilluminated.com/deck/227
Top 5 Ways To Use Instagram API in 2024 for your businessYara Milbes
Discover the top 5 ways to use the Instagram API in this comprehensive PowerPoint presentation. Learn how to leverage the Instagram API to enhance your social media strategy, automate posts, analyze user engagement, and integrate Instagram features into your apps. Perfect for developers, marketers, and businesses looking to maximize their Instagram presence and engagement. Download now to explore these powerful Instagram API techniques!
25. How many of you have used
ReactJS, AngularJS, or
something similar? ✋
26. Let’s do a quick comparison
between Vue + React & Vue +
Angular
27. Let’s do a quick comparison
between Vue + React & Vue +
Angular
I’ll do my best being out of the ReactJS and Angular
communities for some time
https://vuejs.org/v2/guide/comparison.html
30. Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
31. Angular is built heavily on TypeScript, VueJS it’s
optional
https://buttercms.com/blog/comparing-angular-vs-vue
Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
32. https://buttercms.com/blog/comparing-angular-vs-vue
Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
Angular is built heavily on TypeScript, VueJS it’s
optional
Angular has a much more opinionated
architecture where VueJS is flexible
33. Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
Angular has a much larger footprint (500+ KB vs
80KB)
https://www.themexpert.com/blog/angular-vs-react-vs-vue
Angular is built heavily on TypeScript, VueJS it’s
optional
Angular has a much more opinionated
architecture where VueJS is flexible
34. Angular is Backed by Google
(VueJS creator Evan You worked on Angular when he was
at Google)
Angular has a much larger footprint (500+ KB vs
80KB)
https://www.themexpert.com/blog/angular-vs-react-vs-vue
Angular is built heavily on TypeScript, VueJS it’s
optional
Angular has a much more opinionated
architecture where VueJS is flexible
Angular is MVVM (Model-View-ViewModel)
40. React is Backed by Facebook
React uses JSX. Vue allows you to use Web
Components ❤ or JSX
Official packages (state management and router)
for React are 3rd Party
https://buttercms.com/blog/comparing-angular-vs-vue
41. React is Backed by Facebook
React uses JSX. Vue allows you to use Web
Components ❤ or JSX
Official packages (state management and router)
for React are 3rd Party
https://buttercms.com/blog/comparing-angular-vs-vue
React has React Native. VueJS has ports like
NativeScript
43. So why I love Vue!
1. The documentation is incredible
44. So why I love Vue!
1. The documentation is incredible
* Third party docs are amazing as well!
45. So why I love Vue!
2. Ability to use Web Components
46. So why I love Vue!
2. Ability to use Web Components
All Javscript, Template HTML, and
CSS are in one re-usable file
47. So why I love Vue!
2. Ability to use Web Components
All Javscript, Template HTML, and
CSS are in one re-usable file
With slots, it’s even more reusable!
48. So why I love Vue!
3. State Management and Router are
NOT 3rd Party!
49. So why I love Vue!
3. State Management and Router are
NOT 3rd Party!
That’s right! Vue-Router and Vuex are
official.
50. So why I love Vue!
4. Not maintained by a large
corporation
51. So why I love Vue!
4. Not maintained by a large
corporation
This may sound weird, but I love how
Vue is run and managed.
60. Next, we have the vue-router
library
https://router.vuejs.org/
61. Vue Router takes care of
• HTML 5 History API Management
• Navigating without full page reloading
• Nested Routing
62. With Vue Router you also get
features like:
• Named Routes
• Route Meta Data
• Redirecting
• Hooks that can be used for guarding and
authorization.
64. Last but not least, we have the
Vuex library
https://vuex.vuejs.org/
65. Vuex is Vue’s version of Redux
for React. It’s a “state
management pattern +
library” inspired by Redux and
Flux
66. For the React Devs in the
room, you may recognize Dan
Abramov’s quote.
“Flux libraries are like glasses: you’ll know when you
need them.”
67. For the React Devs in the
room, you may recognize Dan
Abramov’s quote.
“Flux libraries are like glasses: you’ll know when you
need them.”
That’s by far the best definition of when you should use a flux library.
68. Vuex handles the state for
your large scale SPAs.
State is made up of modules
which in turn have:
• Localized State
• Getters
• Mutations
• Actions
74. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
75. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
•We rely on the HTML 5 History API for navigation
76. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
•We rely on the HTML 5 History API for navigation
•Usually communicates to some sort of API to
retrieve data
77. A Single Page Application Means:
•The page doesn’t make a full refresh when
navigating
•We rely on the HTML 5 History API for navigation
•Usually communicates to some sort of API to
retrieve data
•You make an initial load of assets and then load
the rest on demand
78. What we are building
•Simple Contact Book
•We will have 3 Routes
•Contacts
•Contact
•Add Contact
•We will have Vuex for state, vue-router for nav
and Vue for display.
📒
81. 1. I set up a quick project using the Vue
CLI (Yup, they have that too). Which
installed Vue, Vuex, and Vue Router.
82. 2. Next I installed Axios.js for HTTP
requests.
https://github.com/axios/axios
83. 3. I added two directories:
• ./src/api
•./src/state
84. 4. I added the contacts module and
imported it into the store.
85. 5. I added the contacts API and
imported it into the contacts module.
This allows us to keep our API routes
separate and easy to edit.
86. 6. I also set up a simple PHP API we
will hit. It has the following routes:
• GET /api/v1/contacts
• GET /api/v1/contacts/{id}
• POST /api/v1/contacts
• PUT /api/v1/contacts/{id}
87. This does not have authentication, you
will see the route in this presentation. It
will be accessible on the network.
Please be nice ☺