It all started with a tweet by Darek Gusto Wędrychowski, announcing his presence in the south of Italy. We intercepted the tweet and asked him to join us, to not lose the opportunity of having an international speaker and also a member of the core team of VueJS, one of the most famous frontend libraries of the world.
Two words about Vue: a project started in 2013 by Evan You, it has reached 100k stars on GitHub and this is an amazing accomplishment for a framework that has not been sponsored, like React or Angular, by one of the modern tech giants.
We managed to organise a Meetup in only six days (for those who are not familiar with community life, this means finding a location, buffet, speakers, spamming on social media and via mailing list… and since it’s a free event, hope that people will actually come!) with 40 people attending. For a small city like Salerno this felt as crowded as a Lady Gaga concert.
Michele Nasti: A brief history of web frameworks
Our night started with a history of frontend development. It all started with the browser war in the first years of the web, until JQuery came onto the scene. JQuery was the first library to spread at a planetary level and still has a lot of traction: 75% of the top 10k websites are still using JQuery and will probably never ditch it completely.
However, against the imperative approach used by JQuery, Angular1 become the first framework to undermine its leadership in the frontend space. The main advantage of Angular1 was the declarative approach: instead of explicitly modifying pieces of the DOM on user interactions, we could delegate to the library the DOM manipulation and focus on reasoning about its state.
The next iteration of frameworks is the one we are currently living in: React, Angular2+, and VueJS. React was the first to introduce the Virtual DOM concept, a virtual in memory representation of the DOM that was synced with the DOM when it was more convenient. This provided a huge boost in performance. Together with VueJS they share a very small API that can be extended to every use case a web developer might need today. There was much more to say but…we are here for VueJS, aren’t we?
Darek Gusto Wędrychowski: The state of VueJS
Our second talk was held by Darek, and it was divided in two parts. The first part is on the state of VueJS and its future. Many key points were touched upon:
- VueJS 3 is coming! VueJS core is being rewritten but the nice thing is that the API will not change, and developers don’t need to learn anything new to use it.
- The core team is reorganising its internal structure, to eliminate bottlenecks in VueJS development. There are many steps taken in this direction, for example…
- VueJS will accept RFCs (Request for Comments) for new features. These will be publicly discussed on GitHub and they can be centred on every aspect of VueJS: syntax, new features, pitfalls, etc.
- There will also be a guide for contributors: at the moment, if you want to contribute to VueJS, it is very difficult to understand all the modules you may need to touch for a single edit. With this guide the team will hope to make it easy for those who like to help Open Source in a factive way.
- Following this, VueJS will move to monorepo with a better split code: right now the code is in one npm package. Moving each feature into its own package will allow contributors to focus on one part of code without having to learn how the whole source works.
- The next VueJS version will allow treeshaking, so if you don’t need a specific subset of functionalities of VueJS, you can strip it down from the bundle.
- Future versions will be time based, every six months there will be a new version, with an LTS (Long Term Support) every 18 months.
- Authors of popular Vue modules will be part of the Vue core group that will take decisions, to avoid breakings on new Vue versions.
- A community guide is being written. Vue documentation will remain a place where you can learn Vue and also a reference for developers; the community guide will contain recipes, helpers, best practices.
- Another effort is the document The state of VueJS, that contains testimonials of companies that have adopted VueJS in production and fell in love with it. It is also the best place to find arguments for “convincing your boss” to adopt Vue.
NuxtJS
After this introduction about the future of VueJS, Darek introduced us the real topic of his talk: NuxtJS. Nuxt is mostly known to be VueJS server-side rendered, but it is way more than that. Infact, it is VueJS with best practices included.
NuxtJS uses an approach of convention over configuration and that’s why if you install it you will be able to generate your first project out of the box, with a simple configuration file that is very simple to use, just a js object.
Nuxt is already configured to produce a server-side rendered VueJS application, bundled together with all the modern stuff you need to produce production-ready code (webpack, babel, etc. already configured).
In addition to this, Nuxt allows to create statically generated web applications or single page applications, by adjusting some easy settings.
And that’s it: in his demo Darek showed us the Nuxt folder structure (that practically contains sensible defaults to start coding), how easy it is to integrate a new page, or to add authentication, to perform an ajax call with axios, etc.
Gabriele Di Simone: Experiments in VueJS
Gabriele was our last speaker and provided a deep dive of his company’s pipeline in building websites.
It all starts with defining the core visual elements of an app, using tools like Vue Design System to keep things consistent.
The next step is to start a component division process that will try to devise the root components of a webapp: some components are part of the design, others will be part of the domain and finally, others will be part of the views. Buefy was chosen as a library for design components, such as buttons and calendars, being extremely simple and clean.
The next step is about handling the application logic: the proposed approach is to use statecharts by wrapping Vuex with libraries like XState, in order to handle very complex scenarios that may rise.
Finally, the chosen data layer is Apollo GraphQL with a self-made framework and the app goes live to the web using Zeit Now.sh. How many buzzwords in one product!
Well, this was a great Meetup. Not only for the quality of the speakers and of the special guest, but also for the people that make these kinds of events a nice way of connecting with other people, start new collaborations and improve the development quality of our town. Events like this push us to do better and better and we (as DevDay) only want to have fun doing what we enjoy: connecting passionate developers doing what we love, coding!
