Learning modern JS

Back in October 2023, I embarked on a journey to enhance my JavaScript skills, diving headfirst into modern JavaScript technologies such as ES7, React, and TypeScript. This blog post is a reflection on that journey, the challenges I faced, the progress I've made, and the lessons I've learned along the way.

Balancing this self-imposed challenge with my daily job wasn't easy. Juggling work responsibilities with the demands of learning new technologies required a significant amount of discipline and time management. There were moments when it felt overwhelming, but looking back nine months later, I'm happy with the progress I've made. However, it's important to note that the learning process never truly ends; there's always something new to discover and master.

The Best Way to Learn: Dive into Coding

From my experience, the best way to master a new programming language or framework is by jumping straight into coding. While YouTube tutorials can be a great starting point (and I can certainly recommend a few!), it's crucial to start writing your own code as soon as possible. Tutorials can only take you so far; the real learning happens when you face the challenges of actual coding.

A practical approach is to pick a real-world use case and implement it. This method forces you to confront the kinds of issues you would encounter in a real project. Simple demos or proofs of concept (POCs) often allow you to sidestep the tough parts by adjusting requirements or avoiding them altogether, but tackling a real-world problem doesn't afford you that luxury.

Finding the Right Project

To apply what I was learning, I reached out to friends and family for ideas on web applications. They provided an excellent use case: a customer-facing website for a small travel agency, complete with a booking system and a back-office portal for managing trips, bookings, and client data. This project presented a real need for an application, which made it an ideal learning experience.

The project took me about three months to complete, with a focus on learning and applying new concepts. I dedicated time to understanding ES7 features, React's component-based architecture, and TypeScript's static typing system. Each of these technologies brought its own set of challenges and learning opportunities.

ES7, or ECMAScript 2016, introduced a number of features that modernized JavaScript development. I explored async/await for handling asynchronous operations more cleanly and other enhancements that made the code more concise and readable.

React, with its component-based approach, revolutionized the way I thought about building user interfaces. Breaking down the UI into reusable components made the development process more modular and maintainable. The virtual DOM and React's efficient update mechanism improved performance, which was particularly important for the interactive elements of the travel agency's website.

TypeScript added a layer of type safety to JavaScript, helping me catch errors early in the development process. The strong typing system and powerful tooling support made the codebase more robust and easier to maintain. Although there was a learning curve, especially coming from a dynamically-typed language background, the benefits quickly became apparent.

The Outcome

The end result of my efforts is a functional customer-facing website for a small travel agency. The site features a booking system and a partially completed back-office portal for managing trips, bookings, and client data. Although the back office isn't fully finished and there's always room for improvement, I'm proud of what I've accomplished. More importantly, I achieved my learning goals and gained valuable hands-on experience.

If you're interested in seeing the result of my efforts, you can check out the live client-facing portal here: Discover Crete. You can also check recorded tour of client facing portal as well as back-office application. To learn more about tools and frameworks used see project description.

Final Thoughts

Embarking on this journey was challenging but incredibly rewarding. The process of learning through doing, facing real-world problems, and building a functional application has been an invaluable experience. I encourage anyone looking to master a new programming language or framework to dive in, start coding, and embrace the challenges along the way. The progress and satisfaction you'll achieve will be well worth the effort.

Happy coding!