The Modernize or Die Podcast - Conference Edition

VueJs SPA and Mobile App with Rest APIs with Gavin Pickin

This podcast is a special podcast for attendees or undecided attendees, to get a view of what the workshop has to offer, from the Trainers themselves, Gavin Pickin and Daniel Garcia. This workshop will walk us through creating a Quiz Game app with a ColdBox REST API backend and a VueJS Application, written in the Quasar Framework. We will start with the concept, design our database, plan our API, write some tests, build our API, create our Quasar Framework App, and write some VueJS to hit those API Endpoints. This Quiz game will have a real-world use case, as it brings back to life an old ColdFusion / ColdBox concept, delivered in a fresh new way.

Who is the audience for the workshop?

The audience for this workshop is a CFML Developer who wants to use a Javascript Framework for a front end, powered by a CFML REST API backend.

Why should I take the workshop?

You will learn how to build a REST API using a combination of scaffolding templates, modules (quick, qb, cbsecurity), routing, and best practices.

This workshop will also use VueJS and the Quasar Framework, including top-class project initialization with Quasar CLI, making getting started very easy for you as a developer. You can turn your idea into reality in record time. Quasar does the heavy lifting for you, so you are free to focus on your features, not the boilerplate.

If you have thought of creating a Single Page App (SPA), a Progressive Web App (PWA), or deploy to Windows, MacOS, iOS, Android, or Browser Extension, this workshop will show you how to write one codebase and deploy it to multiple target platforms.

What will the workshop cover

1. Creating a ColdBox REST API
2. Creating Database Tables via Migrations
3. Setting up our Database Models and Services
4. Use API Resourceful Routes
5. Using Postman to preview API Responses
6. Creating a Quasar Application
7. Exporting the Application to SPA
8. Exporting the Application to Windows / Android

If we have time, we will also talk about nice to-haves like

• API Documentation
• API Testing
• Swagger UI Tooling

Prerequisites

Programming Knowledge: Basic knowledge of API concepts, Javascript, and ColdFusion.

Hardware and software: A laptop with the package managers for CFML (CommandBox) and Javascript (Node and NPM). You will need a Code Editor (VS Code or your choice of IDE) and a MySQL client to connect to your database.

We will be using MySQL 8, so it is recommended you have MySQL 8 installed locally or Docker to run MySql 8 Container with our Docker Compose file. You will see significant performance benefits running the database locally vs. running a remote DB, which we will provide as a backup.

Required

• CommandBox
• Node / NPM
• Postman
• IDE
• MySQL DB Client

Preferred

• VS Code
• MySQL 8

Recommended VS Code Extensions

• TBD

You will leave the workshop with:

You will have all the building blocks you need and walk away with a working REST API and VueJS Application, including a Windows / Android app.

You will leave with an understanding of:

1. Best Practices for Creating ColdBox REST APIs
2. How to consume those APIs from a VueJS Javascript frontend
3. Quasar Framework, and how it can write code once and simultaneously deploy it as a website, a Mobile App, and an Electron App.

To make sure you get all of the information as we release it, we'll blog about it here, or subscribe to the Ortus Solutions youtube channel or watch this episode and all the others on the playlist.