SlideShare a Scribd company logo
ColdBox APIs + VueJS - powering
Mobile, Desktop and Web Apps with
1 VueJS codebase
Gavin Pickin
Into the Box 2019
Who am I?
● Software Consultant for Ortus Solutions
● Work with ColdBox, CommandBox, ContentBox every day
● Working with Coldfusion for 20 years
● Working with Javascript just as long
● Love learning and sharing the lessons learned
● From New Zealand, live in Bakersfield, Ca
● Loving wife, lots of kids, and countless critters
http://www.gpickin.com and @gpickin on twitter
http://www.ortussolutions.com
Fact: Most of us work on existing apps or legacy
apps
● Very few people get to work on Greenfield Apps
● We have to maintain the apps we have given to us
● We might have yui, moo tools prototype jquery & a few
more in real legacy app
Fact: We can’t jump on the bandwagon of the latest
and greatest javascript framework as they get
released weekly
● There are lots of Javascript plugins, libraries and frameworks
out there
● It felt like there was one released a week for a while
● It has calmed down, but still lots of options, can feel
overwhelming
● There are libraries, Frameworks and ways of life, not all will
work with your app
Q: What are some of the new javascript
frameworks?
Q: How does VueJS fit into the javascript
landscape?
THERE CAN BE ONLY ONE
Q: How does VueJS fit into the javascript
landscape?
Just kidding
Q: How does VueJS fit into the javascript
landscape?
Comparison ( Vue biased possibly )
https://vuejs.org/v2/guide/comparison.html
● VueJS - 115k stars on github - https://github.com/vuejs/vue
● React - 112k stars on github - https://github.com/facebook/react
● AngularJS (1) - 59k stars on github - https://github.com/angular/angular.js
● Angular (2,3,4,5,6) - 39k stars on github - https://github.com/angular/angular
● Ember - 20k stars on github - https://github.com/emberjs/ember.js/
● Knockout, Polymer, Riot
Q: How does VueJS fit into the javascript
landscape?
Big Players share the same big wins
● Virtual Dom for better UI performance
○ Only update changes not everything
● Reactive and composable components
○ You change the data, the Framework changes the UI
Q: How does VueJS fit into the javascript
landscape?
Why VueJS?
● Stable Progressive framework, with sponsors and solid community backing.
● Easy to learn and understand ( CFML Dev friendly concepts )
● Simple and Flexible - Does not require a build system
● Awesome Documentation!!!
● Lightweight ( 20-30kb )
● Great for simple components or full complex applications
● Official support for State Management ( Vuex ) and Routing ( Vue Router )
● Great Dev Tools and CLI tools and IDE Tools / Plugins
Q: Why do we want to add VueJS into our existing
apps?
● Easy to get started
● Easy to learn
● Easy to get value
● Easy to integrate
● Easy to have fun
● Easy to find documentation
Q: Why do we want to add VueJS into our existing
apps?
Extremely Flexible
Most frameworks make you use their build system, their templates, and jump
through so many hoops.
● You can just include the library/core and use it where you need it
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
● Angular 1 was like that
● Angular 2,3,4,5 etc and React is not really like that
○ All or nothing approach essentially
Q: Why do we want to add VueJS into our existing
apps?
Component Based ( if you want to )
● Abstract away the logic and display code
● Compose your Applications with smaller pieces
● Easier reuse and code sharing
● Lots of great components available
https://github.com/vuejs/awesome-vue
Q: Why do we want to add VueJS into our existing
apps?
If you want to, you can:
● Build a full Single Page App ( SPA ) App
○ Including Server Side Rendering for additional speed and SEO benefits
● Build and Release Desktop apps
○ Windows and Mac with Electron
● Build and Release Mobile Apps
○ IOS and Android with Cordova
○ Vue Native ( similar to React Native )
Q: How can we use some of the new technology in
our existing apps?
● Better form elements
● Better UI/UX in general
● Form Validation - more flexible than CFInput
● Data tables - Search, Pagination Sorting, Computing powered by ColdFusion
APIs
● SPA, Desktop and Mobile apps powered by ColdFusion APIs
Show: Getting started with VueJS - Outputting Text
Binding template output to data - {{ interpolation }}
<h2>{{ searchText }}</h2>
<script>
new Vue({
el: '#app1',
data: {
searchText: 'VueJS'
}
})
</script>
Show: Getting started with VueJS - Outputting
Attributes
Binding template output to data
<h2 class=”{{ searchClass }}”>{{ searchText }}</h2> WON’T WORK
<h2 v-bind:class=”searchClass”>{{ searchText }}</h2> WILL WORK
<h2 :class=”searchClass”>{{ searchText }}</h2> WILL WORK - Shorthand
<script>
new Vue({
el: '#app1',
data: {
searchText: 'VueJS',
searchClass: ‘small’
}
})
Show: Getting started with VueJS - Directives
V-model
<input v-model="searchText" class="form-control">
<script>
new Vue({
el: '#app1',
data: {
searchText: 'VueJS'
}
})
</script>
Show: Getting started with VueJS - Directives
V-show - show or hide html elements ( CSS )
<button v-show="isFormValid">Submit</buttton>
<script>
new Vue({
el: '#app1',
data: {
isFormValid: false
}
})
</script>
Show: Getting started with VueJS - Directives
V-if- insert or remove html elements ( v-else-if is available too )
<button v-if="isFormValid">Submit</buttton> Function Call
<button v-if="name === ‘’">Cancel</buttton> Inline evaluation
<script>
new Vue({
el: '#app1',
data: {
isFormValid: false,
Name: ‘’
}
})
</script>
Show: Getting started with VueJS - Directives
V-else Negates a prior v-if directive
<button v-if="isFormValid">Submit</buttton>
<button v-else>Cancel</buttton>
<script>
new Vue({
el: '#app1',
data: {
isFormValid: false
}
})
</script>
Show: Getting started with VueJS - Directives
V-for Loop through an array, struct, etc
<li v-for="color in colors">
{{ color }}
</li>
<script type="text/javascript">
new Vue({
el: '#app1',
data: {
Colors: [
"Blue",
"Red"
]
}
Show: Getting started with VueJS - Directives
V-for Loop through an array, struct, etc
<li v-for="(value,key) in person">
{{ key }}: {{ value }}<br>
</li>
<script type="text/javascript">
new Vue({
el: '#app1',
data: {
person: {
FirstName: “Gavin”,
LastName: “Pickin”
}
}
Show: Getting started with VueJS - Directives
V-on:click
<button v-on:click=”submitForm”>Submit</button>
<button @click=”cancelForm”>Cancel</button> Shorthand
Event Modifiers: https://vuejs.org/v2/guide/events.html
Show: Getting started with VueJS - Directives
V-on:keyup.enter
<button v-on:keyup.enter=”submitForm”>Submit</button>
<button @keyup.esc=”cancelForm”>Cancel</button> Shorthand
<button @keyup.esc=”alert(‘hi’);”>Say Hi</button> Shorthand & Inline
Show: Getting started with VueJS - Directives
More information on directives
https://vuejs.org/v2/api/#Directives
Show: Getting started with VueJS - Vue App
Structure
Options / Data - https://vuejs.org/v2/api/#Options-Data
<script type="text/javascript">
new Vue({
el: '#app1',
data: {
num1: 10
},
methods: {
square: function () { return this.num1 * this.num1 }
},
computed: {
aDouble: function () {
return this.num1 * 2
}
Show: Getting started with VueJS - Vue App
Structure
Life Cycle Hooks - https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
<script type="text/javascript">
new Vue({
el: '#app1',
mounted: function() {
setValues();
resetFields();
},
created: function() {
doSomething();
}
})
</script>
Demo: Roulette mini game
Simple roulette wheel.
Start with 100 chips.
Pick 5 numbers
Spin the wheel.
Each bet is 1 chip.
Each win is 36 chips.
Play until you run out of chips.
Let’s have a look:
http://127.0.0.1:52080/
https://github.com/gpickin/vuejs-cfsummit2018
Demo: jQuery vs VueJS DOM Manipulation
Pesticide Labels selection list for CSTC Safety
This company is a safety training company. When they do Pesticide trainings, they
need to select the pesticides the company works with. This little tool helps them
select which pesticides they need in their documentation. As this list has grown,
the responsiveness has dropped, dramatically.
We’re going to test hiding 3500 table rows and then showing them again in jQuery
vs VueJS.
jQuery Version
https://github.com/gpickin/vuejs-cfsummit2018
Demo: jQuery vs VueJS DOM Manipulation
Pesticide Labels selection list for CSTC Safety
jQuery Version 1782ms
hide 1859ms show
Vue Items - V-SHOW
https://github.com/gpickin/vuejs-cfsummit2018
Demo: jQuery vs VueJS DOM Manipulation
Pesticide Labels selection list for CSTC Safety
jQuery Version 1782ms
hide 1859ms show
Vue Items - V-SHOW 415ms
hide 777ms show
Vue Items - V-IF
https://github.com/gpickin/vuejs-cfsummit2018
Demo: jQuery vs VueJS DOM Manipulation
Pesticide Labels selection list for CSTC Safety
jQuery Version 1782ms
hide 1859ms show
Vue Items - V-SHOW 415ms
hide 777ms show
Vue Items - V-IF
409ms hide 574ms show
Vue Filtered Items Methods
https://github.com/gpickin/vuejs-cfsummit2018
Demo: jQuery vs VueJS DOM Manipulation
Pesticide Labels selection list for CSTC Safety
jQuery Version 1782ms
hide 1859ms show
Vue Items - V-SHOW 415ms
hide 777ms show
Vue Items - V-IF
409ms hide 574ms show
Vue Filtered Items Methods 188ms hide
476ms show
https://github.com/gpickin/vuejs-cfsummit2018
Demo: jQuery vs VueJS DOM Manipulation
Pesticide Labels selection list for CSTC Safety
jQuery Version 1782ms
hide 1859ms show
Vue Items - V-SHOW 415ms
hide 777ms show
Vue Items - V-IF
409ms hide 574ms show
Vue Filtered Items Methods 188ms hide
476ms show
https://github.com/gpickin/vuejs-cfsummit2018
Demo: Form Validation
Vuelidate is a great validation library.
Lots of options out there
https://monterail.github.io/vuelidate/#sub-basic-form
Note: I use this in Quasar Framework
Demo: Datatable
Pros:
Lots of options out there
Cons:
Most of them require CSS to make them look good, so you might have to get a
CSS compatible with your existing styles.
https://vuejsfeed.com/blog/comparison-of-datatable-solutions-for-vue-js
ColdBox API
ColdBox APIs are powerful, with great features like
● Resourceful Routes
● Easy to understand DSL for Routing
● Routing Visualizer
● All the power of ColdBox caching and DI
● Modular Versioning
● JWT Tokens ( new and improved coming to ContentBox soon )
● It can power your sites, PWAs, SPA Desktop and Electron apps
ColdBox API
Let’s look at some code.
The next step in VueJS Apps
What is Quasar?
Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based
framework, which allows you as a web developer to quickly create responsive++
websites/apps in many flavours:
● SPAs (Single Page App)
● SSR (Server-side Rendered App) (+ optional PWA client takeover)
● PWAs (Progressive Web App)
● Mobile Apps (Android, iOS, …) through Apache Cordova
● Multi-platform Desktop Apps (using Electron)
What is Quasar?
● Quasar’s motto is: write code once and simultaneously deploy it as a
website, a Mobile App and/or an Electron App. Yes, one codebase for all of
them, helping you develop an app in record time by using a state of the art
CLI and backed by best-practice, blazing fast Quasar web components.
● When using Quasar, you won’t need additional heavy libraries like Hammerjs,
Momentjs or Bootstrap. It’s got those needs covered internally, and all with a
small footprint!
Why Quasar?
Because of the simplicity and power offered to you out of the box. Quasar, with its
CLI, is packed full of features, all built to make your developer life easier.
Next we’ll show you a list, this is a non-exhaustive list of Quasar’s great aspects
and features.
Why Quasar?
All Platforms in One Go
One authoritative source of code for all platforms, simultaneously: responsive
desktop/mobile websites (SPA, SSR + SPA client takeover, SSR + PWA client
takeover), PWAs (Progressive Web Apps), mobile apps (that look native) and
multi-platform desktop apps (through Electron).
Why Quasar?
The largest sets of Top-Class, fast and responsive web components
There’s a component for almost every web development need within Quasar.
Each of Quasar’s components is carefully crafted to offer you the best possible
experience for your users. Quasar is designed with performance &
responsiveness in mind – so the overhead of using Quasar is barely noticeable.
This attention to performance and good design is something that gives us special
pride.
Why Quasar?
Best Practices - Quasar was also built to encourage developers to follow web
development best practices. To do this, Quasar is packed full of great features out
of the box.
● HTML/CSS/JS minification
● Cache busting
● Tree shaking
● Sourcemapping
● Code-splitting with lazy loading
● ES6 transpiling
● Linting code
● Accessibility features
Quasar takes care of all these web develoment best practices and more - with no
configuration needed.
Why Quasar?
Progressively migrate your existing project
Quasar offers a UMD (Unified Module Definition) version, which means
developers can add a CSS and JS HTML tag into their existing project and they’re
ready to use it. No build step is required.
Why Quasar?
Unparalleled developer experience through Quasar CLI
When using Quasar’s CLI, developers benefit from:
State preserving hot module reload (HMR) - when making changes to app source code, no matter if it’s a
website, PWA, a Mobile App (directly on a phone or on an emulator) or an Electron app. Developers
simply change their code, save the changes and then watch it get updated on the fly, without the need of
any page refresh.
State preserving compilation error overlay
Lint-on-save with ESLint – if developers like linting their code
ES6 code transpiling
Sourcemaps
Changing build options doesn’t require a manual reload of the dev server
And many more leading-edge developer tools and techniques
Why Quasar?
Get up to speed fast
The top-class project intitialization feature of the CLI makes getting started very
easy for you, as a developer. You can get your idea to reality in record time. In
other words, Quasar does the heavy lifting for you, so you are free to focus on
your features and not on boilerplate.
Why Quasar?
Awesome ever-growing community
When developers encounter a problem they can’t solve, they can visit the Quasar
forum or our Discord chat server. The community is there to help you. You can
also get updates on new versions and features by following us on Twitter. You can
also get special service as a Patreon and help make sure Quasar stays relevant
for you in the future too!
Why Quasar?
A wide range of platform support
Google Chrome, Firefox, IE11/Edge, Safari, Opera, iOS, Android, Windows
Phone, Blackberry, MacOS, Linux, Windows.
Quasar Language Packs
Quasar comes equipped with over 40 language packs out of the box. On top of
that, if your language pack is missing, it takes just 5 minutes to add it.
Why Quasar?
Great documentation
And finally, it’s worth mentioning the significant amount of time taken to write
great, bloat-free, focused and complete documentation, so that developers can
quickly pick up Quasar. We put special effort into our documentation to be sure
there is no confusion.
Get started in under a minute
Having said this, let’s get started! You’ll be running a website or app in under a
minute.
Underlying technologies
Vue, Babel, Webpack, Cordova, Electron.
Except for Vue, which takes half a day to pick up and will
change you forever, there is no requirement for you to know
the other technologies. They are all integrated and configured
in Quasar for you.
Pick your flavor of Quasar
https://v1.quasar-framework.org/start/pick-quasar-flavour
Lets see it in action
See some apps and some code
Q: How can we learn more about VueJS?
VueJS Website
https://vuejs.org/
Informative and up to date
● Guide
● API
● Stye Guide
● Examples
● Cookbook
Q: How can we get the demos for this presentation?
My Github account
https://github.com/gpickin/vuejs-cfsummit2018
Q: How can we learn more about VueJS?
● Awesome VueJS Framework - Quasar Framework https://quasar-
framework.org/
● Vuex - State Management Pattern and Library
https://vuex.vuejs.org/
● Vue Router - Official Vue Router
https://router.vuejs.org/
Q: How can we learn more about VueJS?
VueJS Courses
● Vue JS 2 - The Complete Guide on Udemy - Approx $10
● Learn Vue 2 - Step by Step - By Laracasts - Free
● VueSchool.io - Several Courses - Some Free changing to Subscription
○ VueJS Fundamentals
○ Dynamic Forms with VueJS
○ VueJS Form Validation
○ VueJS + Firebase Authentication
○ Vuex for Everyone
Thanks
I hope you enjoyed the session.
Some of the VueJS Code: https://github.com/gpickin/vuejs-cfsummit2018
Got questions?
Hit me up on twitter at @gpickin
Or in slack @gpickin ( cfml and boxteam slack )
Join Boxteam slack by going to boxteam.herokuapp.com and invite yourself

More Related Content

What's hot

Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
Matt Raible
 
Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
Matt Raible
 
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Matt Raible
 
O365Engage17 - Developing with groups teams and planner
O365Engage17 - Developing with groups teams and plannerO365Engage17 - Developing with groups teams and planner
O365Engage17 - Developing with groups teams and planner
NCCOMMS
 
Amazing vue.js projects that are open source and free.
Amazing vue.js projects that are open source and free.Amazing vue.js projects that are open source and free.
Amazing vue.js projects that are open source and free.
Katy Slemon
 
Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018
Matt Raible
 
ComponenKit and React Native
ComponenKit and React NativeComponenKit and React Native
ComponenKit and React Native
Stanfy
 
Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014
Matt Raible
 
Front End Development for Back End Developers - Denver Startup Week 2017
Front End Development for Back End Developers - Denver Startup Week 2017Front End Development for Back End Developers - Denver Startup Week 2017
Front End Development for Back End Developers - Denver Startup Week 2017
Matt Raible
 
Polymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in RealtimePolymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in Realtime
Juarez Filho
 
JHipster for Spring Boot webinar
JHipster for Spring Boot webinarJHipster for Spring Boot webinar
JHipster for Spring Boot webinar
Julien Dubois
 
Learn reactjs, how to code with example and general understanding thinkwik
Learn reactjs, how to code with example and general understanding   thinkwikLearn reactjs, how to code with example and general understanding   thinkwik
Learn reactjs, how to code with example and general understanding thinkwik
Hetaxi patel
 
L’enjeu du mobile pour le développeur Web, et comment Mozilla va vous aider
L’enjeu du mobile pour le développeur Web,  et comment Mozilla va vous aiderL’enjeu du mobile pour le développeur Web,  et comment Mozilla va vous aider
L’enjeu du mobile pour le développeur Web, et comment Mozilla va vous aider
Tristan Nitot
 
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin   introduction-to-reactjsMuhammad azamuddin   introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
PHP Indonesia
 
TechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google WorkboxTechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google Workbox
Trivadis
 
The Tale of 2 CLIs - Ember-cli and Angular-cli
The Tale of 2 CLIs - Ember-cli and Angular-cliThe Tale of 2 CLIs - Ember-cli and Angular-cli
The Tale of 2 CLIs - Ember-cli and Angular-cli
Tracy Lee
 
Enabling Microservices @Orbitz - DevOpsDays Chicago 2015
Enabling Microservices @Orbitz - DevOpsDays Chicago 2015Enabling Microservices @Orbitz - DevOpsDays Chicago 2015
Enabling Microservices @Orbitz - DevOpsDays Chicago 2015
Steve Hoffman
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Lachlan Hardy
 
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by DefaultJS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JSFestUA
 

What's hot (20)

Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
 
Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017 Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
Develop Hip APIs and Apps with Spring Boot and Angular - Connect.Tech 2017
 
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
 
O365Engage17 - Developing with groups teams and planner
O365Engage17 - Developing with groups teams and plannerO365Engage17 - Developing with groups teams and planner
O365Engage17 - Developing with groups teams and planner
 
Amazing vue.js projects that are open source and free.
Amazing vue.js projects that are open source and free.Amazing vue.js projects that are open source and free.
Amazing vue.js projects that are open source and free.
 
Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018
 
ComponenKit and React Native
ComponenKit and React NativeComponenKit and React Native
ComponenKit and React Native
 
Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014
 
Front End Development for Back End Developers - Denver Startup Week 2017
Front End Development for Back End Developers - Denver Startup Week 2017Front End Development for Back End Developers - Denver Startup Week 2017
Front End Development for Back End Developers - Denver Startup Week 2017
 
Polymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in RealtimePolymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in Realtime
 
JHipster for Spring Boot webinar
JHipster for Spring Boot webinarJHipster for Spring Boot webinar
JHipster for Spring Boot webinar
 
Learn reactjs, how to code with example and general understanding thinkwik
Learn reactjs, how to code with example and general understanding   thinkwikLearn reactjs, how to code with example and general understanding   thinkwik
Learn reactjs, how to code with example and general understanding thinkwik
 
L’enjeu du mobile pour le développeur Web, et comment Mozilla va vous aider
L’enjeu du mobile pour le développeur Web,  et comment Mozilla va vous aiderL’enjeu du mobile pour le développeur Web,  et comment Mozilla va vous aider
L’enjeu du mobile pour le développeur Web, et comment Mozilla va vous aider
 
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin   introduction-to-reactjsMuhammad azamuddin   introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
 
TechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google WorkboxTechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google Workbox
 
The Tale of 2 CLIs - Ember-cli and Angular-cli
The Tale of 2 CLIs - Ember-cli and Angular-cliThe Tale of 2 CLIs - Ember-cli and Angular-cli
The Tale of 2 CLIs - Ember-cli and Angular-cli
 
Enabling Microservices @Orbitz - DevOpsDays Chicago 2015
Enabling Microservices @Orbitz - DevOpsDays Chicago 2015Enabling Microservices @Orbitz - DevOpsDays Chicago 2015
Enabling Microservices @Orbitz - DevOpsDays Chicago 2015
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by DefaultJS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
 

Similar to ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS codebase

ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
Ortus Solutions, Corp
 
[Nuxeo World 2013] Roadmap 2014 - Technical Part
[Nuxeo World 2013] Roadmap 2014 - Technical Part [Nuxeo World 2013] Roadmap 2014 - Technical Part
[Nuxeo World 2013] Roadmap 2014 - Technical Part
Nuxeo
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Divante
 
Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSScalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JS
Galih Pratama
 
Introduction to Codenvy / JugSummerCamp 2014
Introduction to Codenvy / JugSummerCamp 2014Introduction to Codenvy / JugSummerCamp 2014
Introduction to Codenvy / JugSummerCamp 2014
Florent BENOIT
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!
David Gibbons
 
QCObjects 2020 Overview
QCObjects 2020 OverviewQCObjects 2020 Overview
QCObjects 2020 Overview
Jean Machuca
 
Introduction to Eclipse Che / EclipseCon 2014
Introduction to Eclipse Che / EclipseCon 2014Introduction to Eclipse Che / EclipseCon 2014
Introduction to Eclipse Che / EclipseCon 2014
Florent BENOIT
 
Testing Big in JavaScript
Testing Big in JavaScriptTesting Big in JavaScript
Testing Big in JavaScript
Robert DeLuca
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp
 
Passionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into ProxiesPassionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into Proxies
Harijs Deksnis
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
Katy Slemon
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
Matt Raible
 
235042632 super-shop-ee
235042632 super-shop-ee235042632 super-shop-ee
235042632 super-shop-ee
homeworkping3
 
Gretty: Managing Web Containers with Gradle
Gretty: Managing Web Containers with GradleGretty: Managing Web Containers with Gradle
Gretty: Managing Web Containers with Gradle
Andrey Hihlovsky
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
David Ličen
 
Exploring Google (Cloud) APIs & Cloud Computing overview
Exploring Google (Cloud) APIs & Cloud Computing overviewExploring Google (Cloud) APIs & Cloud Computing overview
Exploring Google (Cloud) APIs & Cloud Computing overview
wesley chun
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
Mikhail Kuznetcov
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSJS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
Yuriy Silvestrov
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 

Similar to ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS codebase (20)

ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
 
[Nuxeo World 2013] Roadmap 2014 - Technical Part
[Nuxeo World 2013] Roadmap 2014 - Technical Part [Nuxeo World 2013] Roadmap 2014 - Technical Part
[Nuxeo World 2013] Roadmap 2014 - Technical Part
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
 
Scalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JSScalable Front-end Development with Vue.JS
Scalable Front-end Development with Vue.JS
 
Introduction to Codenvy / JugSummerCamp 2014
Introduction to Codenvy / JugSummerCamp 2014Introduction to Codenvy / JugSummerCamp 2014
Introduction to Codenvy / JugSummerCamp 2014
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!
 
QCObjects 2020 Overview
QCObjects 2020 OverviewQCObjects 2020 Overview
QCObjects 2020 Overview
 
Introduction to Eclipse Che / EclipseCon 2014
Introduction to Eclipse Che / EclipseCon 2014Introduction to Eclipse Che / EclipseCon 2014
Introduction to Eclipse Che / EclipseCon 2014
 
Testing Big in JavaScript
Testing Big in JavaScriptTesting Big in JavaScript
Testing Big in JavaScript
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
Passionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into ProxiesPassionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into Proxies
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
 
235042632 super-shop-ee
235042632 super-shop-ee235042632 super-shop-ee
235042632 super-shop-ee
 
Gretty: Managing Web Containers with Gradle
Gretty: Managing Web Containers with GradleGretty: Managing Web Containers with Gradle
Gretty: Managing Web Containers with Gradle
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
Exploring Google (Cloud) APIs & Cloud Computing overview
Exploring Google (Cloud) APIs & Cloud Computing overviewExploring Google (Cloud) APIs & Cloud Computing overview
Exploring Google (Cloud) APIs & Cloud Computing overview
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSJS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 

More from Gavin Pickin

Itb 2021 - Bulding Quick APIs by Gavin Pickin
Itb 2021 - Bulding Quick APIs by Gavin PickinItb 2021 - Bulding Quick APIs by Gavin Pickin
Itb 2021 - Bulding Quick APIs by Gavin Pickin
Gavin Pickin
 
Containerizing ContentBox CMS
Containerizing ContentBox CMSContainerizing ContentBox CMS
Containerizing ContentBox CMS
Gavin Pickin
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLEAN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
Gavin Pickin
 
3 WAYS TO TEST YOUR COLDFUSION API
3 WAYS TO TEST YOUR COLDFUSION API3 WAYS TO TEST YOUR COLDFUSION API
3 WAYS TO TEST YOUR COLDFUSION API
Gavin Pickin
 
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Gavin Pickin
 
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
Gavin Pickin
 
BDD Testing and Automating from the trenches - Presented at Into The Box June...
BDD Testing and Automating from the trenches - Presented at Into The Box June...BDD Testing and Automating from the trenches - Presented at Into The Box June...
BDD Testing and Automating from the trenches - Presented at Into The Box June...
Gavin Pickin
 
How do I write Testable Javascript so I can Test my CF API on Server and Client
How do I write Testable Javascript so I can Test my CF API on Server and ClientHow do I write Testable Javascript so I can Test my CF API on Server and Client
How do I write Testable Javascript so I can Test my CF API on Server and Client
Gavin Pickin
 
Just Mock It - Mocks and Stubs
Just Mock It - Mocks and StubsJust Mock It - Mocks and Stubs
Just Mock It - Mocks and Stubs
Gavin Pickin
 
How do I write Testable Javascript?
How do I write Testable Javascript?How do I write Testable Javascript?
How do I write Testable Javascript?
Gavin Pickin
 
Getting your Hooks into Cordova
Getting your Hooks into CordovaGetting your Hooks into Cordova
Getting your Hooks into Cordova
Gavin Pickin
 
Setting up your Multi Engine Environment - Apache Railo and ColdFusion
Setting up your Multi Engine Environment - Apache Railo and ColdFusionSetting up your Multi Engine Environment - Apache Railo and ColdFusion
Setting up your Multi Engine Environment - Apache Railo and ColdFusion
Gavin Pickin
 

More from Gavin Pickin (12)

Itb 2021 - Bulding Quick APIs by Gavin Pickin
Itb 2021 - Bulding Quick APIs by Gavin PickinItb 2021 - Bulding Quick APIs by Gavin Pickin
Itb 2021 - Bulding Quick APIs by Gavin Pickin
 
Containerizing ContentBox CMS
Containerizing ContentBox CMSContainerizing ContentBox CMS
Containerizing ContentBox CMS
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLEAN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
 
3 WAYS TO TEST YOUR COLDFUSION API
3 WAYS TO TEST YOUR COLDFUSION API3 WAYS TO TEST YOUR COLDFUSION API
3 WAYS TO TEST YOUR COLDFUSION API
 
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
Take home your very own free Vagrant CFML Dev Environment - Presented at dev....
 
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
 
BDD Testing and Automating from the trenches - Presented at Into The Box June...
BDD Testing and Automating from the trenches - Presented at Into The Box June...BDD Testing and Automating from the trenches - Presented at Into The Box June...
BDD Testing and Automating from the trenches - Presented at Into The Box June...
 
How do I write Testable Javascript so I can Test my CF API on Server and Client
How do I write Testable Javascript so I can Test my CF API on Server and ClientHow do I write Testable Javascript so I can Test my CF API on Server and Client
How do I write Testable Javascript so I can Test my CF API on Server and Client
 
Just Mock It - Mocks and Stubs
Just Mock It - Mocks and StubsJust Mock It - Mocks and Stubs
Just Mock It - Mocks and Stubs
 
How do I write Testable Javascript?
How do I write Testable Javascript?How do I write Testable Javascript?
How do I write Testable Javascript?
 
Getting your Hooks into Cordova
Getting your Hooks into CordovaGetting your Hooks into Cordova
Getting your Hooks into Cordova
 
Setting up your Multi Engine Environment - Apache Railo and ColdFusion
Setting up your Multi Engine Environment - Apache Railo and ColdFusionSetting up your Multi Engine Environment - Apache Railo and ColdFusion
Setting up your Multi Engine Environment - Apache Railo and ColdFusion
 

Recently uploaded

Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 

Recently uploaded (20)

Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 

ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS codebase

  • 1. ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS codebase Gavin Pickin Into the Box 2019
  • 2. Who am I? ● Software Consultant for Ortus Solutions ● Work with ColdBox, CommandBox, ContentBox every day ● Working with Coldfusion for 20 years ● Working with Javascript just as long ● Love learning and sharing the lessons learned ● From New Zealand, live in Bakersfield, Ca ● Loving wife, lots of kids, and countless critters http://www.gpickin.com and @gpickin on twitter http://www.ortussolutions.com
  • 3. Fact: Most of us work on existing apps or legacy apps ● Very few people get to work on Greenfield Apps ● We have to maintain the apps we have given to us ● We might have yui, moo tools prototype jquery & a few more in real legacy app
  • 4. Fact: We can’t jump on the bandwagon of the latest and greatest javascript framework as they get released weekly ● There are lots of Javascript plugins, libraries and frameworks out there ● It felt like there was one released a week for a while ● It has calmed down, but still lots of options, can feel overwhelming ● There are libraries, Frameworks and ways of life, not all will work with your app
  • 5. Q: What are some of the new javascript frameworks?
  • 6. Q: How does VueJS fit into the javascript landscape? THERE CAN BE ONLY ONE
  • 7. Q: How does VueJS fit into the javascript landscape? Just kidding
  • 8. Q: How does VueJS fit into the javascript landscape? Comparison ( Vue biased possibly ) https://vuejs.org/v2/guide/comparison.html ● VueJS - 115k stars on github - https://github.com/vuejs/vue ● React - 112k stars on github - https://github.com/facebook/react ● AngularJS (1) - 59k stars on github - https://github.com/angular/angular.js ● Angular (2,3,4,5,6) - 39k stars on github - https://github.com/angular/angular ● Ember - 20k stars on github - https://github.com/emberjs/ember.js/ ● Knockout, Polymer, Riot
  • 9. Q: How does VueJS fit into the javascript landscape? Big Players share the same big wins ● Virtual Dom for better UI performance ○ Only update changes not everything ● Reactive and composable components ○ You change the data, the Framework changes the UI
  • 10. Q: How does VueJS fit into the javascript landscape? Why VueJS? ● Stable Progressive framework, with sponsors and solid community backing. ● Easy to learn and understand ( CFML Dev friendly concepts ) ● Simple and Flexible - Does not require a build system ● Awesome Documentation!!! ● Lightweight ( 20-30kb ) ● Great for simple components or full complex applications ● Official support for State Management ( Vuex ) and Routing ( Vue Router ) ● Great Dev Tools and CLI tools and IDE Tools / Plugins
  • 11. Q: Why do we want to add VueJS into our existing apps? ● Easy to get started ● Easy to learn ● Easy to get value ● Easy to integrate ● Easy to have fun ● Easy to find documentation
  • 12. Q: Why do we want to add VueJS into our existing apps? Extremely Flexible Most frameworks make you use their build system, their templates, and jump through so many hoops. ● You can just include the library/core and use it where you need it <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> ● Angular 1 was like that ● Angular 2,3,4,5 etc and React is not really like that ○ All or nothing approach essentially
  • 13. Q: Why do we want to add VueJS into our existing apps? Component Based ( if you want to ) ● Abstract away the logic and display code ● Compose your Applications with smaller pieces ● Easier reuse and code sharing ● Lots of great components available https://github.com/vuejs/awesome-vue
  • 14. Q: Why do we want to add VueJS into our existing apps? If you want to, you can: ● Build a full Single Page App ( SPA ) App ○ Including Server Side Rendering for additional speed and SEO benefits ● Build and Release Desktop apps ○ Windows and Mac with Electron ● Build and Release Mobile Apps ○ IOS and Android with Cordova ○ Vue Native ( similar to React Native )
  • 15. Q: How can we use some of the new technology in our existing apps? ● Better form elements ● Better UI/UX in general ● Form Validation - more flexible than CFInput ● Data tables - Search, Pagination Sorting, Computing powered by ColdFusion APIs ● SPA, Desktop and Mobile apps powered by ColdFusion APIs
  • 16. Show: Getting started with VueJS - Outputting Text Binding template output to data - {{ interpolation }} <h2>{{ searchText }}</h2> <script> new Vue({ el: '#app1', data: { searchText: 'VueJS' } }) </script>
  • 17. Show: Getting started with VueJS - Outputting Attributes Binding template output to data <h2 class=”{{ searchClass }}”>{{ searchText }}</h2> WON’T WORK <h2 v-bind:class=”searchClass”>{{ searchText }}</h2> WILL WORK <h2 :class=”searchClass”>{{ searchText }}</h2> WILL WORK - Shorthand <script> new Vue({ el: '#app1', data: { searchText: 'VueJS', searchClass: ‘small’ } })
  • 18. Show: Getting started with VueJS - Directives V-model <input v-model="searchText" class="form-control"> <script> new Vue({ el: '#app1', data: { searchText: 'VueJS' } }) </script>
  • 19. Show: Getting started with VueJS - Directives V-show - show or hide html elements ( CSS ) <button v-show="isFormValid">Submit</buttton> <script> new Vue({ el: '#app1', data: { isFormValid: false } }) </script>
  • 20. Show: Getting started with VueJS - Directives V-if- insert or remove html elements ( v-else-if is available too ) <button v-if="isFormValid">Submit</buttton> Function Call <button v-if="name === ‘’">Cancel</buttton> Inline evaluation <script> new Vue({ el: '#app1', data: { isFormValid: false, Name: ‘’ } }) </script>
  • 21. Show: Getting started with VueJS - Directives V-else Negates a prior v-if directive <button v-if="isFormValid">Submit</buttton> <button v-else>Cancel</buttton> <script> new Vue({ el: '#app1', data: { isFormValid: false } }) </script>
  • 22. Show: Getting started with VueJS - Directives V-for Loop through an array, struct, etc <li v-for="color in colors"> {{ color }} </li> <script type="text/javascript"> new Vue({ el: '#app1', data: { Colors: [ "Blue", "Red" ] }
  • 23. Show: Getting started with VueJS - Directives V-for Loop through an array, struct, etc <li v-for="(value,key) in person"> {{ key }}: {{ value }}<br> </li> <script type="text/javascript"> new Vue({ el: '#app1', data: { person: { FirstName: “Gavin”, LastName: “Pickin” } }
  • 24. Show: Getting started with VueJS - Directives V-on:click <button v-on:click=”submitForm”>Submit</button> <button @click=”cancelForm”>Cancel</button> Shorthand Event Modifiers: https://vuejs.org/v2/guide/events.html
  • 25. Show: Getting started with VueJS - Directives V-on:keyup.enter <button v-on:keyup.enter=”submitForm”>Submit</button> <button @keyup.esc=”cancelForm”>Cancel</button> Shorthand <button @keyup.esc=”alert(‘hi’);”>Say Hi</button> Shorthand & Inline
  • 26. Show: Getting started with VueJS - Directives More information on directives https://vuejs.org/v2/api/#Directives
  • 27. Show: Getting started with VueJS - Vue App Structure Options / Data - https://vuejs.org/v2/api/#Options-Data <script type="text/javascript"> new Vue({ el: '#app1', data: { num1: 10 }, methods: { square: function () { return this.num1 * this.num1 } }, computed: { aDouble: function () { return this.num1 * 2 }
  • 28. Show: Getting started with VueJS - Vue App Structure Life Cycle Hooks - https://vuejs.org/v2/api/#Options-Lifecycle-Hooks <script type="text/javascript"> new Vue({ el: '#app1', mounted: function() { setValues(); resetFields(); }, created: function() { doSomething(); } }) </script>
  • 29. Demo: Roulette mini game Simple roulette wheel. Start with 100 chips. Pick 5 numbers Spin the wheel. Each bet is 1 chip. Each win is 36 chips. Play until you run out of chips. Let’s have a look: http://127.0.0.1:52080/ https://github.com/gpickin/vuejs-cfsummit2018
  • 30. Demo: jQuery vs VueJS DOM Manipulation Pesticide Labels selection list for CSTC Safety This company is a safety training company. When they do Pesticide trainings, they need to select the pesticides the company works with. This little tool helps them select which pesticides they need in their documentation. As this list has grown, the responsiveness has dropped, dramatically. We’re going to test hiding 3500 table rows and then showing them again in jQuery vs VueJS. jQuery Version https://github.com/gpickin/vuejs-cfsummit2018
  • 31. Demo: jQuery vs VueJS DOM Manipulation Pesticide Labels selection list for CSTC Safety jQuery Version 1782ms hide 1859ms show Vue Items - V-SHOW https://github.com/gpickin/vuejs-cfsummit2018
  • 32. Demo: jQuery vs VueJS DOM Manipulation Pesticide Labels selection list for CSTC Safety jQuery Version 1782ms hide 1859ms show Vue Items - V-SHOW 415ms hide 777ms show Vue Items - V-IF https://github.com/gpickin/vuejs-cfsummit2018
  • 33. Demo: jQuery vs VueJS DOM Manipulation Pesticide Labels selection list for CSTC Safety jQuery Version 1782ms hide 1859ms show Vue Items - V-SHOW 415ms hide 777ms show Vue Items - V-IF 409ms hide 574ms show Vue Filtered Items Methods https://github.com/gpickin/vuejs-cfsummit2018
  • 34. Demo: jQuery vs VueJS DOM Manipulation Pesticide Labels selection list for CSTC Safety jQuery Version 1782ms hide 1859ms show Vue Items - V-SHOW 415ms hide 777ms show Vue Items - V-IF 409ms hide 574ms show Vue Filtered Items Methods 188ms hide 476ms show https://github.com/gpickin/vuejs-cfsummit2018
  • 35. Demo: jQuery vs VueJS DOM Manipulation Pesticide Labels selection list for CSTC Safety jQuery Version 1782ms hide 1859ms show Vue Items - V-SHOW 415ms hide 777ms show Vue Items - V-IF 409ms hide 574ms show Vue Filtered Items Methods 188ms hide 476ms show https://github.com/gpickin/vuejs-cfsummit2018
  • 36. Demo: Form Validation Vuelidate is a great validation library. Lots of options out there https://monterail.github.io/vuelidate/#sub-basic-form Note: I use this in Quasar Framework
  • 37. Demo: Datatable Pros: Lots of options out there Cons: Most of them require CSS to make them look good, so you might have to get a CSS compatible with your existing styles. https://vuejsfeed.com/blog/comparison-of-datatable-solutions-for-vue-js
  • 38. ColdBox API ColdBox APIs are powerful, with great features like ● Resourceful Routes ● Easy to understand DSL for Routing ● Routing Visualizer ● All the power of ColdBox caching and DI ● Modular Versioning ● JWT Tokens ( new and improved coming to ContentBox soon ) ● It can power your sites, PWAs, SPA Desktop and Electron apps
  • 39. ColdBox API Let’s look at some code.
  • 40. The next step in VueJS Apps
  • 41. What is Quasar? Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours: ● SPAs (Single Page App) ● SSR (Server-side Rendered App) (+ optional PWA client takeover) ● PWAs (Progressive Web App) ● Mobile Apps (Android, iOS, …) through Apache Cordova ● Multi-platform Desktop Apps (using Electron)
  • 42. What is Quasar? ● Quasar’s motto is: write code once and simultaneously deploy it as a website, a Mobile App and/or an Electron App. Yes, one codebase for all of them, helping you develop an app in record time by using a state of the art CLI and backed by best-practice, blazing fast Quasar web components. ● When using Quasar, you won’t need additional heavy libraries like Hammerjs, Momentjs or Bootstrap. It’s got those needs covered internally, and all with a small footprint!
  • 43. Why Quasar? Because of the simplicity and power offered to you out of the box. Quasar, with its CLI, is packed full of features, all built to make your developer life easier. Next we’ll show you a list, this is a non-exhaustive list of Quasar’s great aspects and features.
  • 44. Why Quasar? All Platforms in One Go One authoritative source of code for all platforms, simultaneously: responsive desktop/mobile websites (SPA, SSR + SPA client takeover, SSR + PWA client takeover), PWAs (Progressive Web Apps), mobile apps (that look native) and multi-platform desktop apps (through Electron).
  • 45. Why Quasar? The largest sets of Top-Class, fast and responsive web components There’s a component for almost every web development need within Quasar. Each of Quasar’s components is carefully crafted to offer you the best possible experience for your users. Quasar is designed with performance & responsiveness in mind – so the overhead of using Quasar is barely noticeable. This attention to performance and good design is something that gives us special pride.
  • 46. Why Quasar? Best Practices - Quasar was also built to encourage developers to follow web development best practices. To do this, Quasar is packed full of great features out of the box. ● HTML/CSS/JS minification ● Cache busting ● Tree shaking ● Sourcemapping ● Code-splitting with lazy loading ● ES6 transpiling ● Linting code ● Accessibility features Quasar takes care of all these web develoment best practices and more - with no configuration needed.
  • 47. Why Quasar? Progressively migrate your existing project Quasar offers a UMD (Unified Module Definition) version, which means developers can add a CSS and JS HTML tag into their existing project and they’re ready to use it. No build step is required.
  • 48. Why Quasar? Unparalleled developer experience through Quasar CLI When using Quasar’s CLI, developers benefit from: State preserving hot module reload (HMR) - when making changes to app source code, no matter if it’s a website, PWA, a Mobile App (directly on a phone or on an emulator) or an Electron app. Developers simply change their code, save the changes and then watch it get updated on the fly, without the need of any page refresh. State preserving compilation error overlay Lint-on-save with ESLint – if developers like linting their code ES6 code transpiling Sourcemaps Changing build options doesn’t require a manual reload of the dev server And many more leading-edge developer tools and techniques
  • 49. Why Quasar? Get up to speed fast The top-class project intitialization feature of the CLI makes getting started very easy for you, as a developer. You can get your idea to reality in record time. In other words, Quasar does the heavy lifting for you, so you are free to focus on your features and not on boilerplate.
  • 50. Why Quasar? Awesome ever-growing community When developers encounter a problem they can’t solve, they can visit the Quasar forum or our Discord chat server. The community is there to help you. You can also get updates on new versions and features by following us on Twitter. You can also get special service as a Patreon and help make sure Quasar stays relevant for you in the future too!
  • 51. Why Quasar? A wide range of platform support Google Chrome, Firefox, IE11/Edge, Safari, Opera, iOS, Android, Windows Phone, Blackberry, MacOS, Linux, Windows. Quasar Language Packs Quasar comes equipped with over 40 language packs out of the box. On top of that, if your language pack is missing, it takes just 5 minutes to add it.
  • 52. Why Quasar? Great documentation And finally, it’s worth mentioning the significant amount of time taken to write great, bloat-free, focused and complete documentation, so that developers can quickly pick up Quasar. We put special effort into our documentation to be sure there is no confusion. Get started in under a minute Having said this, let’s get started! You’ll be running a website or app in under a minute.
  • 53. Underlying technologies Vue, Babel, Webpack, Cordova, Electron. Except for Vue, which takes half a day to pick up and will change you forever, there is no requirement for you to know the other technologies. They are all integrated and configured in Quasar for you.
  • 54. Pick your flavor of Quasar https://v1.quasar-framework.org/start/pick-quasar-flavour
  • 55. Lets see it in action See some apps and some code
  • 56. Q: How can we learn more about VueJS? VueJS Website https://vuejs.org/ Informative and up to date ● Guide ● API ● Stye Guide ● Examples ● Cookbook
  • 57. Q: How can we get the demos for this presentation? My Github account https://github.com/gpickin/vuejs-cfsummit2018
  • 58. Q: How can we learn more about VueJS? ● Awesome VueJS Framework - Quasar Framework https://quasar- framework.org/ ● Vuex - State Management Pattern and Library https://vuex.vuejs.org/ ● Vue Router - Official Vue Router https://router.vuejs.org/
  • 59. Q: How can we learn more about VueJS? VueJS Courses ● Vue JS 2 - The Complete Guide on Udemy - Approx $10 ● Learn Vue 2 - Step by Step - By Laracasts - Free ● VueSchool.io - Several Courses - Some Free changing to Subscription ○ VueJS Fundamentals ○ Dynamic Forms with VueJS ○ VueJS Form Validation ○ VueJS + Firebase Authentication ○ Vuex for Everyone
  • 60. Thanks I hope you enjoyed the session. Some of the VueJS Code: https://github.com/gpickin/vuejs-cfsummit2018 Got questions? Hit me up on twitter at @gpickin Or in slack @gpickin ( cfml and boxteam slack ) Join Boxteam slack by going to boxteam.herokuapp.com and invite yourself