The next picture shows what I have been doing – and what was going on in the world of web development (obviously by no means an exhaustive list – where are Cordova and React Native for example? or Flutter
I have made several attempts to embrace Angular and React – but it did not really click. I was busy doing many other things and I had never impressed anyone with my user interface design skills so it did not seem like a great loss. And after HelloWorld, these frameworks did not seem intuitive. However, to be able to put a face on my business logic, to prototype my ideas and to be able to spar with my colleagues who are good at this has been my desire to many years.
And now I have finally taken the plunge. After hearing many good things about Vue 3 I decided to make another effort to learn how to develop web applications as it is done today.
The good news: I like it! (the not so good news: I find this addictive!)
The hot reload mode during development that keeps the live running application under development in sync with the code is great – compared to the days of JSP and JSF the development turn around times have decreased from sometimes well of a minute to less than a second.
One of the great boons of web applications in this day and age is that there so many simple ways to deploy them. You do not need complex infrastructure (such as Java Application Server) or even any backend server at all. Using one of the many application hosting services (with free tiers) or the GitHub Pages feature I can make my web application readily available to my mother and other stakeholders. Other things that make life easier are CodePen and other live snippet testing environments and StackBlitz for full stack in-browser web app development environments (with Vite build tools and Node backend running through WebAssembly in the browser). Not to underestimate: the DevTools in the browser. Inspecting elements, debugging code execution and inspecting data structures and style compilation is so easy and powerful.
When I got started on my Vue journey, I quickly found out that as with so many topics in software there are many resources available that make the journey a lot easier. Tutorials, blog articles, StackOverflow, a little bit of ChatGPT, plugins, components and of course the Vue framework itself. I still know how to Google and I am able to quickly piece together information and turn it into features in my application: I am working on an Event Calendar application, one that allows my colleagues (more than 2500, spread over 25+ companies in one ecosystem) to explore all knowledge events anywhere in our ecosystem and sign up for them. My early efforts are on GitHub and I have published the application through GitHub Pages – for free and in an extremely simple way (using npm module gh-pages – see this article ); you can try it out here.
One challenge is to gather the information – for now in a CSV document that I manage based on Office365 Form Submissions from colleagues. The other is to publish the information in an attractive, accessible and easily searchable way. When I started working on the application, it was not hard to get to HelloWorld and to go from there to a simple list of events. No interaction, not sorting or filtering, no navigation, no i18n and no styling. But the information was there.
Then I looked at taking the next step – present the data in a rich datatable component with expandable rows, filters, sorting, styling. This really felt daunting at first. But with a little searching I bumped into PrimeVue – a distant successor to PrimeFaces: a JSF component framework that I worked with in 2007. PrimeVue turned out to offer a great DataTable component – that was very easy to add to my application and connect to my dataset. To leverage the many powerful features in this component feels much easier than I seem to remember from the JSF days where I did similar things.
After creating the DataTable I wanted to create an Outlook-style calendar view of all knowledge events inside and outside Conclusion. Again, at first a daunting task. Until (a few minutes later) I stumbled across the vue-cal component. Another rich component with incredible out of the box functionality, great documentation and live examples (on StackBlitz) that was easy to absorb into my application.
It has year/month/week/day overview with easy drilldown and rollup. It emits events that allow me to show a dialog for the selected event. It allows customization and styling. It makes me look good! And it is really intuitive to work with.
My whole web application at this point consists of fewer than a dozen files, most of them small and all of them straightforward:
As always, index.html is the starting point. Conceptually at least, it brings in main.ts that in turn initializes the Vue application with all its bells and whistles.
The structured way of working in which all pieces so nicely fit together is really a joy. I enjoy doing web development and am even satisfied with the results of my work. For the first time in a very long time.
If, like me, you have a (long) history with web development and you feel disconnected to the rich frontend development frameworks that took over in the last ten years or so, you may want to try your hand at this modern way of web development. Then, like me, you may enjoy Vue 3 and the whole development approach that it provides. It was so much easier, smoother, better and rewarding than In had anticipated. Of course I am still an incredible novice – but at least I can create a functional UI to demonstrate to my colleagues who do professional web app development what I have in mind with certain functional requirements. And perhaps surprise them with the fact that I too can still develop a thing or two.