00:00:00 Not that long ago, in 2015, React.js entered the scene.
00:00:06 However, even the journey of JavaScript in the IT industry hasn't been exceptionally long.
00:00:13 Originally developed by Brandon Icke at Netscape in 1995, JavaScript gained significant popularity during the early 2000s.
00:00:23 This was largely due to Google's ingenious utilization of JavaScript to introduce interactive and dynamic features for map exploration.
00:00:34 Subsequently, developers were introduced to frameworks and libraries, including jQuery, Angular, Node.js, React, and most recently,
00:00:44 Next.js.
00:00:46 These technologies have revolutionized the web development landscape, offering developers various new capabilities.
00:00:54 Now, you might wonder why is this information relevant to the context of this course?
00:01:00 The significance lies in the fact that it highlights the timeless truth that change is constant.
00:01:08 As we continue to advance and evolve as a society and as developers, our tools and technologies will naturally progress alongside us.
00:01:19 We have no other option but to embrace and adapt to these changes.
00:01:24 It serves as a reminder that our willingness to embrace new ideas and technologies is essential for growth and success of the ever-changing IT industry landscape.
00:01:38 These technologies and tools share a common purpose, to enhance work efficiency and improve performance.
00:01:46 In this era, we can still use vanilla JavaScript to create websites using HTML and CSS without a doubt.
00:01:55 However, when it comes to developing applications on a large scale, the efficiency of using the latest technologies surpasses that of traditional approaches.
00:02:06 To showcase and experiment with this concept, we have created a video on how to create a website using HTML and CSS on our YouTube channel.
00:02:16 You can personally analyze the amount of code and the level of efficiency demonstrated in the video.
00:02:22 To provide a brief glimpse of the evolution in JavaScript coding practices, here is the well-known hello world.
00:02:31 but in this case, we're gonna explore it in various frameworks, starting from the core JavaScript language itself.
00:02:39 Vanilla JavaScript.
00:02:41 Here, we have a button and then a document.getElementById, to which we append an event listener, and once we click it, we alert Hello World.
00:02:53 With the jQuery in the other hand, we can select the button in a simpler way, call the .click, and then do the alert.
00:03:01 Then we have Angular, which has a component selector and a template, and then a class that shows the alert message.
00:03:10 It's a similar situation in React, where we have a class, a method showMessage appended to that class, and then a return with a button that has an onClick message.
00:03:22 Okay, okay, but this is quite weird.
00:03:25 From what we can all see here, there's an increase in the amount of code being written.
00:03:30 It appears to be in complete opposition to what I mentioned earlier.
00:03:35 Are you thinking the same?
00:03:37 If we look at it solely from this perspective, you could definitely feel that the original language and framework require less code.
00:03:46 However, it is important to consider the bigger picture.
00:03:50 And that's what truly matters, doesn't it?
00:03:52 In reality, we don't just build Hello World projects.
00:03:56 We undertake more substantial projects that demand more utilization of various frameworks and tools to achieve the desired functionality and scalability.
00:04:08 We could have talked about the big picture of using React or even Angular or vanilla code, but that is not the primary focus of this course.
00:04:17 However, it is worth mentioning a few foundational reasons why these new tools make development more efficient.
00:04:25 1. Architecture React and Angular follow a component-based architecture.
00:04:33 encouraging code reusability.
00:04:36 For instance, if you create a component like a button, you can use it anywhere in the application as often as needed.
00:04:44 This reusability enhances the maintainability and scalability of the application.
00:04:50 2. Virtual DOM The virtual DOM is a lightweight representation of the actual DOM.
00:04:59 It facilitates efficient and optimized updates to the user interface, resulting in improved performance.
00:05:07 Simply put, it tracks changes within the application and performs a so-called diffing process by comparing the previous version of the virtual DOM with
00:05:17 the new version.
00:05:18 It identifies the differences and updates the real DOM accordingly.
00:05:24 Number three, ecosystem and community.
00:05:27 Modern libraries like React have vibrant and active communities.
00:05:32 This provides developers with abundant resources, extensive documentation, reusable code packages, bug fixes, and support.
00:05:43 And there are many other libraries and framework-specific reasons that you can explore.
00:05:48 But to truly appreciate the impact, I would once again recommend visiting YouTube videos we created, where you can experience firsthand what it takes to
00:05:58 build a simple landing page using two different tools to measure the efficiency of these tools.
00:06:05 The first one is the Sushi website built using plain HTML and CSS, and the second one is building a modern landing page using React.js.
00:06:16 But hey, are you in the wrong course?
00:06:19 Where does Next.js come into the picture?
00:06:22 As mentioned earlier, as we continue to progress, technology also advances.
00:06:28 jQuery addressed the limitations of vanilla JavaScript, then React emerged to overcome the shortcomings and loopholes of jQuery.
00:06:38 However, even React has its own challenges, which have now been addressed by another tool called Next.js.
00:06:48 It's a big misconception that Next.js is a new language or a library.
00:06:54 No, Vercell and the team behind Next.js embarked on a unique approach to develop a framework encompassing client-side, meaning front-end,
00:07:04 and server-side, meaning backend, functionalities within a single application.
00:07:10 Guillermo Rauch, the original creator of Next.js and the mastermind behind Socket.io, began working on this idea in 2016. Over the course of a year,
00:07:23 Guillermo and his team continuously added new features such as file-based routing, automatic code splitting, hybrid rendering,
00:07:31 internationalization, image and font optimization, and many, many more.
00:07:37 The relentless dedication of the Vercell developers coupled with their ability to transform diverse ideas into reality has caught the attention of Meta,
00:07:47 previously known as Facebook, the creators of React.js.
00:07:53 Meta now explicitly recommends that developers use Next.js as their primary tool instead of relying solely on React.
00:08:02 It's an extraordinary achievement by the Vercell team.
00:08:06 And that's why we as developers now need to shift our focus to using the latest and greatest version.
00:08:13 Next 15 and beyond to build highly capable and production-ready applications.
00:08:19 This exciting evolution opens up new possibilities and opportunities for creating advanced web applications.
00:08:27 And this is just the beginning.
00:08:30 So I just wanted to take a moment and let you know what an amazing developer you are.
00:08:37 Not a lot of people want to learn the latest and greatest of what the technology allows us to do.
00:08:43 And you are here watching this course.
00:08:46 So, let's move on to the next lecture.
