JavaScript Frameworks and Libraries

[MUSIC] 0:00 You can do some really complex things with JavaScript, and 0:04 there are many ways to do the exact same thing. 0:07 The features of years 2015 and beyond are introducing even more ways. 0:10 You'll see in here lots of varying opinions favoring one method or 0:14 style or another. 0:18 So to help you make some of the low level decisions, increase efficiency, and 0:19 build projects faster, 0:23 developers often use a frontend JavaScript encrypted framework or library. 0:25 Many frameworks and libraries help you write clean modern JavaScript, and they 0:28 allow you to use reliable and effective software design patterns from the start. 0:32 A common use case for a JavaScript framework is to build single page web 0:37 applications that run in the browser. 0:41 So let's talk about some frameworks and libraries you may have heard about or 0:44 might come across in your work, or while talking with fellow developers. 0:47 The three big ones are React, Vue, and Angular. 0:51 React developed by Facebook is one of the most popular JavaScript libraries. 0:55 React makes building and maintaining the user interface of your application 1:00 faster and easier by breaking it up into smaller reusable components. 1:03 React started out as a UI library for the web browser. 1:08 But the patterns and tools it provides are so useful that it's been extended to 1:12 mobile development with the React Native framework. 1:16 And Vue.js is another popular framework that shares many similarities with React. 1:20 Except that Vue offers more tools out of the box, it's smaller in file size and 1:24 a little bit easier to pick up. 1:29 Vue also makes it easier to create your entire UI or 1:30 just build an enhance only small parts of your project's UI. 1:34 Now Angular on the other hand, is a full-fledged JavaScript framework, with 1:38 more functionality than most JavaScript frameworks and libraries out there. 1:42 Angular, maintained by Google, is referred to as a complete solution. 1:46 Because it comes with all the tools necessary to build complex, single page, 1:51 web apps without dependency on any other frameworks or plug-ins. 1:55 React, Vue, and Angular are traditionally client side frameworks and libraries. 1:59 They run in the browser, and by default, produce DOM as output and 2:04 manipulate the DOM of the rendered page. 2:09 But React, Vue, and Angular also have their server side counterparts built by 2:11 the open source JavaScript community. 2:15 For example, Next.js is a popular framework for server rendered React apps. 2:17 Next, includes a lot of complex configuration right out of the box. 2:23 Like routing, preventing unnecessary code from loading, 2:27 easy deployment to production, and lots more. 2:31 And Nuxt is a higher level framework for 2:34 creating server side rendered apps with Vue. 2:36 Nuxt makes it easier to share code between the client and 2:39 the server, so you can focus on your applications logic. 2:42 Now to implement server side rendering in an Angular application, 2:45 developers use the Angular universal library. 2:49 These server side frameworks, pre-load your app on a web server and 2:52 send render HTML when the browser requests it. 2:57 Then you perform the usual DOM manipulation and updates client site. 3:00 This can result in faster paced loads and better SEO. 3:04 As you learned, JavaScript frameworks and libraries provide loads of flexibility to 3:08 developers and much needed structures to their projects. 3:12