I got the idea of building twitch-stream-countdown after having a hard time keeping track of the schedules of all the awesome people that I am watching live coding on Twitch. They usually post on Twitch and/or Twitter when they will be live and there is a Twitch plugin to show a countdown until the next stream but unfortunately my streamers don’t use it so I want to build a web page that fetches the latest tweet from Twitter or the latest comment from Twitch about the schedule of the next stream, it then automatically calculates the time difference and it shows a countdown of all the next streams in a descending order.
Coding in JavaScript has changed so much in the last few years and there are so many JavaScript libraries with new ones being released every day so my plan is to familiarize myself with the trends today before starting to code the application.
I want to build a single-page application and I already know HTML, CSS and JavaScript incl. jQuery so I could build the web page from scratch with plain vanilla JavaScript or I could use an existing framework that already includes everything to make the SPA work. This could save me some time so I can concentrate on the application itself instead of having to build all the plumbing as well.
The top JavaScript libraries for building user interfaces at the moment are Angular, React or Vue.js. There is actually a good article about this here: I just asked 23,000 developers what they think of JavaScript. Here’s what I learned.
Since I am new to these libraries, I want to go through the tutorials so I can decide which library I want to use.
The Quickstart and the Tutorial: Tour of Heroes with Angular was very helpful and comprehensive. While Angular is not exactly light-weight (it creates over 26 000 files with a new project), what I like is that angular just works out of the box in VSCode so I could start coding as soon as I created the project. I was able to code in Angular without any problems. TypeScript support and having the components separated in HTML, CSS an JS files are definitely a plus point for me. Coming from the C# world, dependency injection and services is all too familiar to me and I like having these concepts in JavaScript as well. The tutorial takes about 2-3 hours.
With React, components have a render() method to return what to display. My first impression is not completely positive, especially because React is all JavaScript and I don’t really like having all my HTML and CSS mixed in my JavaScript code. I vaguely remember that back in the early days of my web development career it was a bad practice to write HTML, CSS and JavaScript in the html file. Now we mix these three again into the JS file so I am a bit confused but many people seem to like React a lot. My VSCode doesn’t have the usual built-in IntelliSense for HTML and CSS in the JS file so I would have to install a JSX plugin to take advantage of this. On the plus side, React is slightly smaller than Angular but not much, ~21 000 files have been created with a new project. You can find the tutorial Intro to React here. An extension is recommended for JSX support in VSCode.
Vue includes a comprehensive guide about the core library and there is an additional guide about Vue Router. The website has some great examples as well: the TodoMVC shows how to use Vue in action and the HackerNews Clone shows the core libraries Vue, Vue Router for routing and Vuex for state management working together. Since I am building a simple app, I won’t be needing Vuex so I could create my single-page application simply with Vue and Vue Router. Vue also supports TypeScript and single file components but both require some setup in the code. With Vue, you can write the template or render() function and going through the guide, I have seen some HTML code for the template inside the JS code which I did not like so much but it looks like HTML could be imported from a file too. Vue also introduces .vue files that include HTML in <template> tag, CSS in <style> tag and JavaScript in <script> tag in one file. The Vetur extension is recommended for the .vue files in VSCode.
In every GitHub repo, you can check the single commits for every chapter of the tutorial. All in all, I found Angular having the best tutorial for newbies getting started with the library. React’s tutorial is a simple tac-tac-toe game built from scratch, I found it rather short but it includes the highlights of the library. Vue’s guide is very well explained but the introduction was slightly confusing at certain parts so I had to figure out some sections on my own, especially where to put particular pieces of code. The Intro is explained in the next chapters but I couldn’t have known this while going through the Intro. Unlike with Angular and React the chapters in the Vue guide do not build on top of each other with the goal of building a game at the end which I think it’s a pity.
Vue put together quite a good comparison with other frameworks. Both Vue and React recommend installing their own Dev Tools in the browser in order to debug the application better.
Regarding which library I liked best, it’s a matter of taste but I personally like to keep my HTML, CSS and JavaScript separate so that’s where Angular wins over React and Vue. Coming from C# and having done JavaScript a few years ago, TypeScript has been a breath of fresh air so Angular wins here too. Vue supports TypeScript too but it requires some setup. However having worked with HTML CSS and JavaScript makes Vue also a great candidate. Plus a Vue project is considerably smaller than Angular. On the other side, Angular is very easy to get started, the library is being refocused on enterprise solutions targeting large and complex applications but it an be used for simple applications as well.
As you can see, making the decision of which library to use is not easy but ultimately having an Angular expert at home who can help me when I get stuck 😉 tipped the scale in favor of Angular. Vue would be my second choice, even though it requires some setup so I can use it the way I want it and I prefer not having to spend time on that now. React comes in third, I feel like I just need more time to warm up to it, especially to this concept of having all the code in JS. I will definitely revisit React and Vue for future projects but right now I just want to start coding and it’s going to be with Angular. 🙂
P.S.: In the future, I will keep an eye out for Polymer, Reason and GraphQL.
I used Visual Studio Code for the tutorials with the following plugins:
- Short Paw (dark) – VS Code theme
- Vetur – Vue tooling for VS Code
FitGeekGirl 