ProcessWire & Vue.js — a Lovestory
Introducing the all new ICF Conference Website.
What would happen if we were equipped to fearlessly face the daily challenges and live a life without fear?
This question is at the core of our next ICF Conference in 2019 in Zurich. Its also the question we set out to answer in terms of developing the new website; the all new ICF Conference website is our most advanced website in terms of technology — taking advantage of the latest web-technologies.
We built on the ICF Ladieslounge website as a solid foundation and took our learnings from building our last Conference Booklet PWA (Progressive Web App) and applied it to the new website.
Some highlights of the new ICF Conference website:
- Completely decoupled backend and frontend
- Custom design based on Uikit frontend framework
- Changing of languages happens instantly, no page-reload required
- Easy content updates thanks to ProcessWire
- All data is transferred using a single request returning custom JSON
Why did we use this approach?
Since we found ProcessWire a year ago, we fell in ❤️ with this unknown but beautiful CMF / CMS. ProcessWire has so many advantages:
- Easy to learn due to an extensive yet simple API borrowing from jQuery
- Powerful and clever features
- No bloat: build exactly what you need
- Solid core features: everything from multi-language to custom fields to a solid role and access rights system
- A great community
While ProcessWire is very lean, flexible, yet powerful and brings some cool features like inline Frontend-Editing — rendering HTML using the CMS and PHP has some disadvantages:
That’s why we went for a decoupled approach where we use only ProcessWire to edit data and then pass it to the frontend with a single request returning everything as JSON-data. With this approach, we only need a single file of about 144 lines of code in the backend.
As for developing the frontend, we like with Vue.js for the same reasons as we like ProcessWire:
- Easy to learn
- Flexible: mix and match, build a SPA (Single Page App) or just use it for a single small feature
- No bloat: Need a router? Add it. Need a store? Add it. Don’t need it? Leave it.
Main advantages using this technology-stack:
Developing a backend with ProcessWire has already been great fun — now developing the frontend the fun continues!
There were some major speed improvements while developing the ICF Conference website using these frontend-technologies:
- The whole Webpack SPA stack, Vue.js / Vue Router / Vue X (store) was easy to setup thanks to Quasar
- Developing the frontend using Vue.js is easy — everything can be separated using components
- Quasar brings hot reloading during development:
Using ProcessWire to tailor the data is also crazy fast. With a few clicks, you can customize your data models, add new fields and structure your templates. Everything is powerful and flexible. From image handling to the role-model. Editing is also easy thanks to a clever backend with great features:
Flexible & User Friendly
The result is a SPA that we could easily turn into a full PWA — this also has some advantages for the end-user. Changing the language for example does not reload the page, but only the content, resulting in a seamless and fast user-experience:
We have been fan of ProcessWire and Vue.js for some time. This is our first project where we bring these two technologies together — it was tremendous fun and at the same time the development was fast and easy.
Do you use WordPress but never used ProcessWire? Do you know jQuery but not Vue.js? Now is the time to dig into these — hopefully you will love developing with it as much as we do.
About ICF Church
ICF is a non-denominational church with a biblical foundation that was birthed out of the vision to build a dynamic, tangible church that is right at the heartbeat of time.