Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

JavaScript Frameworks and Libraries

3:15 with Guil Hernandez

Developers often use a JavaScript framework or library to help increase efficiency and build projects faster. Many frameworks and libraries allow you to use reliable and effective software design patterns from the start.

Resources

  • 0:00

    [MUSIC]

  • 0:04

    You can do some really complex things with JavaScript, and

  • 0:07

    there are many ways to do the exact same thing.

  • 0:10

    The features of years 2015 and beyond are introducing even more ways.

  • 0:14

    You'll see in here lots of varying opinions favoring one method or

  • 0:18

    style or another.

  • 0:19

    So to help you make some of the low level decisions, increase efficiency, and

  • 0:23

    build projects faster,

  • 0:25

    developers often use a frontend JavaScript encrypted framework or library.

  • 0:28

    Many frameworks and libraries help you write clean modern JavaScript, and they

  • 0:32

    allow you to use reliable and effective software design patterns from the start.

  • 0:37

    A common use case for a JavaScript framework is to build single page web

  • 0:41

    applications that run in the browser.

  • 0:44

    So let's talk about some frameworks and libraries you may have heard about or

  • 0:47

    might come across in your work, or while talking with fellow developers.

  • 0:51

    The three big ones are React, Vue, and Angular.

  • 0:55

    React developed by Facebook is one of the most popular JavaScript libraries.

  • 1:00

    React makes building and maintaining the user interface of your application

  • 1:03

    faster and easier by breaking it up into smaller reusable components.

  • 1:08

    React started out as a UI library for the web browser.

  • 1:12

    But the patterns and tools it provides are so useful that it's been extended to

  • 1:16

    mobile development with the React Native framework.

  • 1:20

    And Vue.js is another popular framework that shares many similarities with React.

  • 1:24

    Except that Vue offers more tools out of the box, it's smaller in file size and

  • 1:29

    a little bit easier to pick up.

  • 1:30

    Vue also makes it easier to create your entire UI or

  • 1:34

    just build an enhance only small parts of your project's UI.

  • 1:38

    Now Angular on the other hand, is a full-fledged JavaScript framework, with

  • 1:42

    more functionality than most JavaScript frameworks and libraries out there.

  • 1:46

    Angular, maintained by Google, is referred to as a complete solution.

  • 1:51

    Because it comes with all the tools necessary to build complex, single page,

  • 1:55

    web apps without dependency on any other frameworks or plug-ins.

  • 1:59

    React, Vue, and Angular are traditionally client side frameworks and libraries.

  • 2:04

    They run in the browser, and by default, produce DOM as output and

  • 2:09

    manipulate the DOM of the rendered page.

  • 2:11

    But React, Vue, and Angular also have their server side counterparts built by

  • 2:15

    the open source JavaScript community.

  • 2:17

    For example, Next.js is a popular framework for server rendered React apps.

  • 2:23

    Next, includes a lot of complex configuration right out of the box.

  • 2:27

    Like routing, preventing unnecessary code from loading,

  • 2:31

    easy deployment to production, and lots more.

  • 2:34

    And Nuxt is a higher level framework for

  • 2:36

    creating server side rendered apps with Vue.

  • 2:39

    Nuxt makes it easier to share code between the client and

  • 2:42

    the server, so you can focus on your applications logic.

  • 2:45

    Now to implement server side rendering in an Angular application,

  • 2:49

    developers use the Angular universal library.

  • 2:52

    These server side frameworks, pre-load your app on a web server and

  • 2:57

    send render HTML when the browser requests it.

  • 3:00

    Then you perform the usual DOM manipulation and updates client site.

  • 3:04

    This can result in faster paced loads and better SEO.

  • 3:08

    As you learned, JavaScript frameworks and libraries provide loads of flexibility to

  • 3:12

    developers and much needed structures to their projects.

You need to sign up for Treehouse in order to download course files.

Sign up