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.
Its a brand new design powered by a lean setup, using ProcessWire for easy content management and a slick frontend based on Vue.js, Quasar and a heavily customized Uikit theme.
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:
Code can get messy without a clear strategy. ProcessWire does not impose any limits on how you output your data, so you need to come up with a solution to structure your frontend code on your own. Also, code could needs to be duplicated in the frontend using JavaScript if it has some dynamic aspects, like rendering content in a different format; e.g. when you switch from a list to a grid-view.
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:
Fun
Developing a backend with ProcessWire has already been great fun — now developing the frontend the fun continues!
Fast
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:
I even developed my first somewhat bigger ProcessWire Module “PageQueryBoss” to easily grab the data using the awesome ProcessWire APIand return it as a single JSON file in a matter of days.
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:
Conclusion
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.
