The presentation slide for Vue.js meetup
http://abeja-innovation-meetup.connpass.com/event/38214/
That contains mainly about SSR (Server side rendering) + SPA with isomorphic fetch and client hydration
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.
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.
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.
Slides of my talk at Coding-Berlin November Meetup on 01.11.2017 (https://www.meetup.com/CODING-BERLIN/events/244169839). Also have a look at the demo repo at Github: https://github.com/coding-berlin/vuejs-demo
Scalable Front-end Development with Vue.JSGalih Pratama
Are you sure your app is secure enough? Do you want to scale your app to the next level? Come and join us for the Bandung JS Meetup #11. Save the date!
Tuesday, March 27th 2018
Location : Bandung Creative Hub (Aula lt 5)
Jl Laswi No 7, Kacapiring- Bandung
We will have presentations by:
1. Galih Pratama - Head Front-end, Crowde.co on "Scalable Web Development by Vue.js"
2. Yahya Fadhlulloh - CTO, Crowde.co on "JS flaw Hackers Love to Abuse"
Room with a Vue - Introduction to Vue.jsZachary Klein
Angular has brought MVC & dependency injection to the browser, while React nudges developers towards a simpler, functional approach to view rendering. What if there was a tool that took the best ideas from both of these titans, giving us simple, expressive components while still including enough “magic” to significantly boost developer productivity?
Enter Vue.js
In this talk we’ll get to know this new kid on the frontend block, contrast Vue with it’s better known rivals. We’ll explore the ecosystem: state management with Vuex, routing with Vue-router - and see why Vue.js might not be just another JavaScript framework.
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.
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 :)
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.
Slides of my talk at Coding-Berlin November Meetup on 01.11.2017 (https://www.meetup.com/CODING-BERLIN/events/244169839). Also have a look at the demo repo at Github: https://github.com/coding-berlin/vuejs-demo
Scalable Front-end Development with Vue.JSGalih Pratama
Are you sure your app is secure enough? Do you want to scale your app to the next level? Come and join us for the Bandung JS Meetup #11. Save the date!
Tuesday, March 27th 2018
Location : Bandung Creative Hub (Aula lt 5)
Jl Laswi No 7, Kacapiring- Bandung
We will have presentations by:
1. Galih Pratama - Head Front-end, Crowde.co on "Scalable Web Development by Vue.js"
2. Yahya Fadhlulloh - CTO, Crowde.co on "JS flaw Hackers Love to Abuse"
Room with a Vue - Introduction to Vue.jsZachary Klein
Angular has brought MVC & dependency injection to the browser, while React nudges developers towards a simpler, functional approach to view rendering. What if there was a tool that took the best ideas from both of these titans, giving us simple, expressive components while still including enough “magic” to significantly boost developer productivity?
Enter Vue.js
In this talk we’ll get to know this new kid on the frontend block, contrast Vue with it’s better known rivals. We’ll explore the ecosystem: state management with Vuex, routing with Vue-router - and see why Vue.js might not be just another JavaScript framework.
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.
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 :)
Django + Vue, JavaScript de 3ª generación para modernizar DjangoJavier Abadía
Slides de la charla que di en la PyConEs 2017 en Cáceres, el 24 de Septiembre.
Explicaba cómo montar un entorno de desarrollo ágil con Django en el back, Vue en el front y webpack para empaquetar el front y proporcionar Hot Module Reloading
It’s trivial today to start writing and debugging some React code, but it’s not 100% clear how to properly deploy the application, manage versions and what implications that has on the build configurations. Especially if you want to allow different versions for different users in order to perform some A/B testing, testing new features in production environment, come up with some UI experiments, or gradually roll out new features for a subset of users.
In this presentation I hopefully covered all that.
In a world of emerging JavaScript, is Rails getting left behind? Are server-side MVC applications out and static single page applications in? In this talk I’ll describe how we’ve used webpack(er) and Vue to revitalize our JavaScript approach within an aging Rails application. You can have it both ways.
A re introduction to webpack - reactfoo - mumbaiPraveen Puglia
I gave a talk at ReactFoo Mumbai about the history of how we arrived at the module bundlers we have today, specifically webpack. We walked through a live coding demo where I built a working webpack configuration for a working Vue application and then talked about the future of webpack.
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend technologies. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming real! In this talk, I am going to discuss Universal (a.k.a. Isomorphic) JavaScript and present some practical example regarding the significant patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
(interactive slides at http://slides.com/lucianomammino/universal-js-web-applications-with-react-codemotion-rome-2017 )
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.
How to implement multiple layouts using React router V4.pptxBOSC Tech Labs
in this article, you will learn how to add multiple layouts using the new version of React router v4. You will see complete details about React router and a step-by-step guide to implementing the multiple layouts using React router v4.
Ti sei perso nel caos di “props” ed “emit” della tua web app Vue.js? Usa Vuex!
Vuex è lo state manager di Vue.js per eccellenza, una singola fonte di verità che ottimizza la condivisione di informazioni tra componenti.
Vediamo come introdurre facilmente Vuex in progetti esistenti, con un occhio per il testing
Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/
At De Voorhoede (http://voorhoede.nl) I'm responsible for setting up new front-end projects in such a way that it's easy for teams to work with. This presentation explains how we structure these projects. The presentation includes some tips on structuring larger AngularJS projects.
Similar to How to Build SPA with Vue Router 2.0 (20)
Overview of the fundamental roles in Hydropower generation and the components involved in wider Electrical Engineering.
This paper presents the design and construction of hydroelectric dams from the hydrologist’s survey of the valley before construction, all aspects and involved disciplines, fluid dynamics, structural engineering, generation and mains frequency regulation to the very transmission of power through the network in the United Kingdom.
Author: Robbie Edward Sayers
Collaborators and co editors: Charlie Sims and Connor Healey.
(C) 2024 Robbie E. Sayers
Student information management system project report ii.pdfKamal Acharya
Our project explains about the student management. This project mainly explains the various actions related to student details. This project shows some ease in adding, editing and deleting the student details. It also provides a less time consuming process for viewing, adding, editing and deleting the marks of the students.
NO1 Uk best vashikaran specialist in delhi vashikaran baba near me online vas...Amil Baba Dawood bangali
Contact with Dawood Bhai Just call on +92322-6382012 and we'll help you. We'll solve all your problems within 12 to 24 hours and with 101% guarantee and with astrology systematic. If you want to take any personal or professional advice then also you can call us on +92322-6382012 , ONLINE LOVE PROBLEM & Other all types of Daily Life Problem's.Then CALL or WHATSAPP us on +92322-6382012 and Get all these problems solutions here by Amil Baba DAWOOD BANGALI
#vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore#blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #blackmagicforlove #blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #Amilbabainuk #amilbabainspain #amilbabaindubai #Amilbabainnorway #amilbabainkrachi #amilbabainlahore #amilbabaingujranwalan #amilbabainislamabad
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)MdTanvirMahtab2
This presentation is about the working procedure of Shahjalal Fertilizer Company Limited (SFCL). A Govt. owned Company of Bangladesh Chemical Industries Corporation under Ministry of Industries.
Event Management System Vb Net Project Report.pdfKamal Acharya
In present era, the scopes of information technology growing with a very fast .We do not see any are untouched from this industry. The scope of information technology has become wider includes: Business and industry. Household Business, Communication, Education, Entertainment, Science, Medicine, Engineering, Distance Learning, Weather Forecasting. Carrier Searching and so on.
My project named “Event Management System” is software that store and maintained all events coordinated in college. It also helpful to print related reports. My project will help to record the events coordinated by faculties with their Name, Event subject, date & details in an efficient & effective ways.
In my system we have to make a system by which a user can record all events coordinated by a particular faculty. In our proposed system some more featured are added which differs it from the existing system such as security.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Water Industry Process Automation and Control Monthly - May 2024.pdf
How to Build SPA with Vue Router 2.0
1. How to Build SPA with Vue
Router 2.0
2016/08/24
Takuya Tejima
2. Who?
• Takuya Tejima @tejitak
• Co-Founder & CTO at Indie Inc. (ex-IBM, ex-LINE)
• Server & Web Front-End & iOS Engineer
• Community
• Vue.js core team member
• Dev Morning community founder
• http://devmorning.connpass.com/
• Global Startup Creators co-founder
• https://www.facebook.com/globalstartupcreators/
3. What’s SPA
• SPA (Single Page Aplication)
• SPA is a web application or web site that fits on a single web page with the goal of providing a more fluid user
experience similar to a desktop application.
• Important things to introduce
• Does you app really need to be SPA, such as partial rendering?
• It may not be easy compare to typical standard server side implementation
• There are no best frameworks for all situations
• There are a lot of frameworks
• Backbone? Ember? Riot? Angular + ui-router? Angular 2? React + React-Router (+ Redux)? Vue.js + Vue-
Router (+ Vuex)?
• If you decide to build SPA on your next webapp project, Vue.js + Vue Router would be a good option
4. • Vue Router Features
• Dead simple for component mapping with routes
• Nested routes and sub components
• Support SSR (Server Side Rendering) and Virtual DOM
• Async load
• Flexible hooks
• History management, Scroll behavior, transition etc.
• Vue Router 2.0 (Currently Beta) is really powerful!! Especially on…
• Better performance for SPA by reactive components mechanism
• SSR & SPA with isomorphic fetch and client hydration
• It means the components will dynamically work in client side generated by server side
same modules. It’s available without server side template engine like EJS! And, it has
better SEO compared to ordinary SPA
What’s Vue Router?
5. Work with SSR
• What’s BundleRenderer?
• Generate components for each requests from code to prevent shared modules on node
• TIPS: To skip parsing entire app dependencies every requests, we can specify webpack externals
options
6. Cont. Work with SSR
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'
// sync the router with the vuex store.
// this registers `store.state.route`
sync(store, router)
const app = new Vue({
router,
store,
...App
})
export { app, router, store }
app.js
require('es6-promise').polyfill()
import { app, store } from './app'
store.replaceState(window.__INITIAL_STATE__)
app.$mount('#app')
client-entry.js
import { app, router, store } from './app'
const isDev = process.env.NODE_ENV !== 'production'
export default context => {
router.push(context.url)
const s = isDev && Date.now()
return
Promise.all(router.getMatchedComponents().map(component => {
if (component.preFetch) {
return component.preFetch(store)
}
})).then(() => {
context.initialState = store.state
return app
})
}
server-entry.js
7. Client Side Hydration
• Client side Vue instance will attempt to "hydrate" the existing DOM instead of creating
new DOM nodes when the server-rendered="true" attribute exists
• Demo: Vue hackernews 2.0
• https://github.com/vuejs/vue-hackernews-2.0
• SSR + SPA (Client side hydration) can be achieved by Vue 2.0 & Vue Router
2.0 & Vuex 2.0!
• Vue: SSR
• Vue Router: Routing mapping management
• Vuex: State management & Isomorphic data fetch
8. Isomorphic Data Fetch with Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import {fetchItems} from './api'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
itemsPerPage: 20,
items: {/* [id: number]: Item */}
},
actions: {
FETCH_ITEMS: ({ commit, state }, { ids }) => {
ids = ids.filter(id => !state.items[id])
if (ids.length) {
return fetchItems(ids).then(items =>
commit('SET_ITEMS', { items }))
} else {
return Promise.resolve()
}
}
},
mutations: {
SET_ITEMS: (state, { items }) => {
items.forEach(item => {
if (item) {
Vue.set(state.items, item.id, item)
}
})
}
}
})
export default store
store/index.js store/api.js
import Firebase from 'firebase'
const api = new Firebase('https://hacker-
news.firebaseio.com/v0')
function fetch (child) {
return new Promise((resolve, reject) => {
api.child(child).once('value', snapshot => {
resolve(snapshot.val())
}, reject)
})
}
export function fetchItem (id) {
return fetch(`item/${id}`)
}
export function fetchItems (ids) {
return Promise.all(ids.map(id =>
fetchItem(id)))
}
9. Server Side Component Cache
• Server side cache makes SSR +
SPA faster
• Component layer server side cache
• cache components by implementing
the serverCacheKey function
• API layer server side cache
• LRU cache examples:
const cache = inBrowser
? null
: (process.__API_CACHE__ || (process.__API_CACHE__ =
createCache()))
function createCache () {
return LRU({
max: 1000,
maxAge: 1000 * 60 * 15 // 15 min cache
})
}
const api = inBrowser
? new Firebase('https://hacker-news.firebaseio.com/v0')
: (process.__API__ || (process.__API__ =
createServerSideAPI()))
export default {
name: 'item', // required
props: ['item'],
serverCacheKey: props => props.item.id,
render (h) {
return h('div', this.item.id)
}
}
10. • Picked breaking changes from previous version
• Install
• routes config are changed to Array
• Navigations
• history.go -> history.push
• v-link directive -> <router-link> component
• Hooks
• The hooks data, activate, deactivate, canActivate, canDeactivate, canReuse are now replaced
• activate & deactivate -> Component's own lifecycle hooks
• data -> Use a watcher on $route to react to route changes
• canActivate -> beforeEnter guards declared in route configurations
• canDeactivate -> beforeRouteLeave defined at the root level of a component's definition
• canReuse -> removed because it is confusing and rarely useful
Migration from Vue Router v0.x.x
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/users', component: Users,
children: [
{ path: ':username', component: User }
]
}
]
})
watch: {
'$route': 'fetchData'
}
17. • Webpack will automatically split and lazy-load the split modules
when using AMD require syntax
Vue Router 2.0 - Async Components
const Foo = resolve => require(['./Foo.vue'], resolve)
const Bar = resolve => require(['./Bar.vue'], resolve)
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
// Just use them normally in the route config
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
https://github.com/vuejs/vue-router/blob/next/examples/lazy-loading/app.js
18. • scrollBehavior
• only available in html5 history mode
• defaults to no scroll behavior
• return false to prevent scroll
Vue Router 2.0 - scrollBehavior
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition
} else {
const position = {}
// new navigation.
// scroll to anchor by returning the selector
if (to.hash) {
position.selector = to.hash
}
if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x = 0
position.y = 0
}
// if the returned position is falsy or an empty object,
// will retain current scroll position.
return position
}
}
const router = new VueRouter({
mode: 'history',
base: __dirname,
scrollBehavior,
routes: [
{ path: '/', component: Home, meta: { scrollToTop: true }},
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar, meta: { scrollToTop: true }}
]
})
https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js
20. • Vue Router x Vuex
• Inject (sync) router states to Vuex states
• Components can access router data (path, params, query)
through vuex getter in components router
• https://github.com/vuejs/vuex-router-sync
Vue Router 2.0 - Vuex Router Sync
21. SPA with Awesome Vue Family
• Building SPA with Vue.js 2.0 Family
• Better performance for SPA by reactive components mechanism
• SSR & SPA with isomorphic fetch and client hydration
• No worried about SEO & server side template like EJS
• Seamless integration with Vue-Router & Vuex modules compare to
React & React-Router & Redux because the author is same Evan :)
It allows us more consistent & intuitive coding manner