Learning JavaScript Frameworks

For the past couple of months, I have been playing around with 3 different Javascript frameworks to see what all the hype is all about! Most of the stuff I develop is written in ASP.Net MVC/C#/MS-SQL as this is the stack technology that I am most familiar and comfortable with. So I decided to get out of my comfort zone and explore some of these Javascript frameworks that I have been reading about lately. The 3 frameworks I decided to learn were Vue.js, Angular (2+) and React. Below are some of my notes and observations on each of these frameworks.

Vue

This was the first framework I tired out after reading a few articles about it on reddit. A lot of the talk around VueJS revolves around how easy it is to learn and also how fast it is when compared to other javascript frameworks. Per the advice of a lot of the people online, I went ahead and visited their web site and worked thru their guide. For the most part I found VueJS to be very easy to follow and thus easy to learn. The content on VueJS’s site is very well written and very informative.

After going thru a good portion of their guide I felt I needed a full fledged tutorial that I could follow along to so that I could really sink my teeth into learning VueJS. Thru the recommendation of the Reddit VueJS community, I came across a course on Udemy by Max Schwarzmuller called VueJS 2 - The Complete Guide (including VueJS Router & Vuex) and immediately paid the $10.00 special offer for the course! For anyone that really wants to learn VueJS, this is the course that I would highly recommend! Max’s style of teaching is great and as long as you follow along with his examples/projects you’ll truly get your money’s worth out of this course!

My overall impression of VueJS was a positive one. However, there were a few things that I felt were lacking from the library. With VueJS, just like ReactJS you only get the ‘V’ in the MVC pattern. You still have bring in other libraries for routing, state management, http calls and user interfaces. VueJS does provide you with a really nice cli tool (just like angular and react) called vue-cli which makes working with VueJS much more pleasant. In the end, I was hoping for a more complete framework as it was a bit overwhelming to learn other libraries that can integrate with VueJS to build a basic appplication.

Angular (2+)

The next Javascript framework I picked up was Angular (2+). Like VueJS, I started learning this framework by following their tutorial on their site! Unlike VueJS (or ReactJS), Angular is a complete Javascript framework that not only provides you with the ability to build your own user interface components, but also gives you routing, 2-way data binding, dependency injection and the ability to submit http requests! Angular uses TypeScript as the language that you use to build applications with. Luckily, Angular only uses some basic features of TypeScript that didn’t really overwhelm me and made the learning of Angular much easier (I did have some basic TypeScript knowledge before when I played around with TypeScript when it first came out a few years ago). Anyone that has used C# in the past will feel very comfortable with typescript and should be able to pick up just enough typescript to build angular applications!

Learning Angular was tough for me because there were so many things that you had to keep in the back of your mind when builing applications in this framework. One of the things that really tripped me up were the concepts of modules. In reality, this should not have given me any problems (modules are similar to namespaces in c#) as modules allow you to organize your angular code in a more effective manner. But for some reason it was really hard for me to ingest how these concepts applied to Angular while going thru their tutorial. As a result, I decided to find a video course in Angular that I could follow along with. Thru the use of my recent VS Subscription from work, I was able to find a great video on plurasight that really helped me solidify my knowledge of this framework. For anyone interested, the course I took is called Angular: Getting Started by Debora Kurata. The course was easy to follow along to and Deborah is a great at explaining the core features of Angular! At the end of the course, I felt comfortable that I could start using Angular to port one of my ASP.NET MVC applications to Angular and I was able to re-create most of the functionality I had implemented in ASP.NET MVC fairly quickly!

In my opinion, one of Angular’s biggest strength is providing the developer with all the bells and whistles that he/she will need to build a enterprise ready application (UI framework excluded) but this too is part of one of it’s weakness as it can be intimidating to learn how all of these different features work. For example, having to learn RxJs (which was a great thing to be exposed to) made grasping some concepts in Angular unnecessarily more difficult. As a result of this, I felt like I needed to see at least one more framework, ReactJs.

React

The last Javascript framework I played around with was ReactJs. This is currently the hot framework I am always seeing articles on the Reddit Programing community. Like VueJs, ReactJs is only a library (not a framework) that helps you to write just the ‘V’ in MVC. This was not my first time using ReactJs as I had attempted to learn it a few years ago to see if I could use it in some of the web applications I was building at the time (I ended up using jQuery to add the type of interactivity I needed). At that time, I felt that ReactJS was too much of an overkill to use for my needs. I got excited about ReactJS when I read an article on dev.to and started looking for tutorials/video courses to revisit this library once more!

One thing I did differently (when compared to the other two Javascript frameworks referenced above) to learn ReactJs was to first find a video course online that I could follow along to. Because of my previous experience with ReactJs I didn’t want to go thru a video course that was long. Luckily I was able to find a Plurasight course that met my needs of learning the basics of ReactJS and do it in under 2 hours! The course I found is called React.js Getting Started by Samer Buna. The whole course was only 1 hour and 43 minutes long and Samer’s teaching style was great! I followed along with his examples and felt really excited about this library. React’s API is very simple and once you understand the basics of Components (both functional and class-based) along with state management and component life cycles you can pretty much get started building simple yet pretty powerful web applications!

After finishing up Samer’s course, I decided to do something different to continue my journey learning ReactJS. Instead of going to React’s web site to follow their tutorial I decided to look around and see if I could find a book that I could use to learn more about it. Samer’s course was short, and I just felt like I needed to spend a bit more time and effort to really get ReactJs. In the past, I would have gone to my local book store and bought a book on ReactJS, but since bookstores are pretty rare these days (at least around my area) I searched high and low and came to a book by Robin Wieruch called the Road to Learn ReactJS that I settled on. First of all, the price of being free was great! The book is only 157 pages, but is filled with great tips on what you need to know to use ReactJs (i.e. ES6) and how to think about when working with ReactJs (i.e. think immutability). Robin uses his experience of learning ReactJS to provide his readers with lots of great information. The book is for people learning ReactJs for the first time, so he only gives you the information that he thinks you’ll need when first starting out with ReactJs (i.e. no Redux!!). After reading the book, I was able to build a simple HackerNews clone pretty quickly. The experience I got from working on this application and the knowledge I gained by reading his book allowed me to also pick up and learn React Router and react-strap to build my small HackerNews-clone!

I gotta say that React’s simple API has made learning and using this library not only fun to use but I am also considering using it to build other personal and work applications. I really do like that you use plain old javascirpt (with some ES6 thrown into the mix) to build the logic/functionality in ReactJs! It’s made using javascript fun again! Even though you have to learn how to use other libraries (i.e. Redux, React Router, etc.) and integrate them into your own ReactJs apps, so far it has not been a big issue for me and this was something I did not expect at all from ReactJs!

Honorable Mention: Knockout

There is one more framework I’d like to mention called Knockout.js. This is also a library that like Vue and ReactJs allow you to add interactivity to your web applications. Knockout uses the MVVM Pattern where you have your Models (i.e. entities your application is concerned with), you then have your View Models (VMs) that are a mix of html and knockout declarations that can make your application much more interactive. I actually used knockout to add some interactivity to an internal web application for work and I was very happy with the results. Knockout has been around for a few years, and it’s not really in the news a lot (at least I don’t see it being mentioned in my feeds that much) but it’s a pretty stable library. The experience learning it and applying my knowledge to an actual project made learning the other 3 javascript frameworks much easier and for that I will be forever thankful to knockout!

Final Thoughts

Overall, I am very happy with the things I have learned in the past few months. Life has been a bit busy lately with our growing baby son, maintenance on our house and projects at work so I haven’t really put in as much time as I would like on these frameworks. But the time and effort I did in to learn/use these frameworks will hopefully payoff in the near future. My goal for now is to continue to play around with ReactJs and try to build an application that uses a web api I created to access active directory and see how much functionality I can add to it! Whatever I build, and whatever lays ahead in the not so far future I am looking forward to using my knowledge and skills to build awesome web applications! Thanks for reading!