I started web development in the ’90s. Plain HTML and JavaScript, some images and perhaps a little bit of CSS. Static websites. I have made quite a journey since those days. And then about a decade ago I got lost. I had gone through Java Servlets, JSPs (Java Server Pages) and Java Server Faces (JSF). I had embraced AJAX (in fact, I had “invented” it myself using background posts of IFRAMEs before it was even called AJAX). Full focus on server side UI development. Then HTML5 started happening, The web browser evolved into a monster – a desktop application server with tremendous and ever increasing capabilities, just check out the wealth of browser APIs available today.
Rich JavaScript frameworks appeared, starting with AngularJS. And I lost touch. I heard about single page applications (SPA) and the rise of the M-V-VM architecture. TypeScript appeared, build tools such as WebPack and later Vite(JS) captured audiences. Of course the term “reactive” popped up – in several contexts. But I was out of it.
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!)
Many of the things I learned with HTML and JavaScript and CSS still are valid. And much of what I learned with JavaServerFaces – a server side UI Component framework – is easily translated to the way Vue works with components and with model bindings. The reactivity in Vue applications is quite amazing: I hardly have to do anything to have changes in state have the effect I intend it to have. This feels so much easier than all the AJAX based client-server round trips and the complex and slow DOM manipulation to get the synchronization I wanted.
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.
For some reason, I have had some conceptual struggles and perhaps even a little emotional challenge with the concept of transpilation. I was used to developing the JavaScript and HTML in exactly the way the browser would process it. The build time step that takes my stuff and turns it into executable, optimized JavaScript and HTML bundles that then is processed by the browser was hard to really come round to. I cannot explain it – it just took time. You could consider this weird: the Maven process that turned my JSF application into a deployable WAR or EAR file did even more than WebPack or Vite does, so what is my problem?
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.
Community
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.
The Vue 3 site and its Getting Started section is a great starting point. “The tutorial and guide only require basic HTML and JavaScript knowledge, and you should be able to follow along without being an expert in any of these.” I have also made use of the book Frontend Development Projects with Vue.js 3 – Second Edition Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco Published by Packt Publishing.
