Unit 6: Frameworks & Libraries

Unit Essential Questions

You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.

Client-Side Frameworks

  • What is a client-side framework and what purpose does it serve?

NodeJS and Asynchronous Programming

  • What’s the difference between sync vs async code?
  • What is NodeJS and how can it be used?
  • What’s the difference between blocking vs non-blocking code and sync vs async code?

React (a.k.a. ReactJS)

  • What is ReactJS and how can it be used?

Jekyll

  • What is Jekyll and how can it be used?

Unit Readings

Client-Side Frameworks

Before we try to use any frameworks, we should clarify what a framework actually is and what purposes it serves.

  • Read Introduction to client-side frameworks and/or Watch JavaScript frameworks explained in 90 seconds
    • Note that while some folks, including the video above, include jQuery as a ‘framework’, it’s technically a library. BootStrap, which we’ve also learned about, is also a library. Knowing the distinction between libraries and frameworks isn’t too important but when in doubt, refer to documentation and use the language the developers of the library or framework use. To learn more about ‘inversion of control’, which is the technical determining factor between libraries and frameworks, read The Difference Between a Framework and a Library.

NodeJS and Asynchronous Programming

So far, we’ve been focusing exclusively on client-side programming. Client-side programming enables us to display pre-created content on a browser– think of how you have to fully code your site line by line for it to show up on your browser. With client-side programming, even if you add dynamic behaviour to your site such as a dark mode, for example, you have to code exactly what that means before it’s actually available to the user. Server-side programming allows us to dynamically create and receive content– not just display it. That means that not only can we change what the user has access to, but the user can also communicate with us and our code. Using APIs is an example of server-side programming, which is why if you try to perform an API call locally by simply opening your code file, you’ll get an error; to successfully make an API call from a local page, you have to run a local server.

Given that many frameworks, including NodeJS, make use of asynchronous programming, it’s helpful to have a basic understanding of what asynchronous programming is and how to utilize it correctly. That being said, you don’t need to be an expert on asynchronous programming. However, the more comfortable you are with these ideas, the easier debugging will be. We’ve actually already used async JavaScript: when we worked with fetch() for connecting to APIs.

NodeJS, a popular JS framework, allows us to create a server environment. NodeJS is especially popular– and powerful– because of its use of non-blocking asynchronous programming which make it particularly memory efficient and fast. If you’re familiar with threading, the concept of blocking and non-blocking code may be familiar. As we learned above with asynchronous programming, sometimes we want our code to perform multiple actions at once. However, if a task is taking up all the available bandwidth of our computer, we won’t be able to simultaneously perform another task. Here is where NodeJS is especially impressive: it uses a single thread and still performs non-blocking asynchronous programming!

React (a.k.a ReactJS)

React is a library (though many refer to it as a framework) that allows you create components or parts of a webpage that can be reused across your site. React is very popular as a means of reducing code repetition.

Jekyll

Similar to React, Jekyll also allows you to break up your HTML into subparts that can be reused across a site. Rather than using JS like React does, it relies on Ruby. However, web developers don’t need to know Ruby to program their pages and can use Markdown, HTML, CSS, and Liquid to develop their sites. Additionally, Jekyll is fully supported by Github Pages which allows you to host a site for free.

Unit Lab

This assignment will have you expand on your site’s capabilities by using relevant frameworks and/or libraries. Make sure to refer to the unit readings for helpful reference material as well as additional resources.

Description

Think about where your website is at and where you want it to be:

  • Which of the libraries and frameworks we learned about (Node, React, Jekyll) would help provide the kind of functionality you’re interested in?
  • Which of the libary’s or framework’s features are you most interested in utilizing?
  • What needs aren’t met by these libraries and frameworks?

There are tons of libraries and frameworks to help you create the website and web apps of your dreams. If the ones we’ve covered aren’t meeting your site’s needs, take some time to explore the additional options below, or do your own research to identify one or more libraries or frameworks that’ll make your site easier to implement.

  • anime.js: “a lightweight JavaScript animation library”
  • d3.js: “the JavaScript library for bespoke data visualization”
  • ExpressJS:”fast, unopinionated, minimalist web framework for Node.js”
  • Express Handlebars: “a Handlebars view engine for Express which doesn’t suck”
  • Handlebars:”minimal templating on steroids”
  • Highcharts: “for developers to create charts and dashboards for web and mobile platforms”
  • Leaflet Maps: “an open-source JavaScript library for mobile-friendly interactive maps”
  • p5.js: “a friendly tool for learning to code and make art”
  • Paper.js: “an open source vector graphics scripting framework”
  • Three.js: “a 3D library that tries to make it as easy as possible to get 3D content on a webpage”
  • Vega: “a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs”

Once you’ve identified which library/ies and/or framework(s) you want to use:

  1. If you’re using more than one library and/or framework, make sure they’re compatible with each other
  2. Review the documentation for your choice(s)
  3. Download the software necessary
  4. Complete the setup necessary to integrate or migrate your site
  5. Start working on implementing your missing/wanted functionality

Support Videos

Given the variety of use cases and tools everyone is using, rather than including a single recorded lecture, I’m including a few videos/tutorials below for the three main tools (Node, React, Jekyll) presented in the readings. Keep in mind you’re not required to use all three, or any of the three for that matter. If you decide to use a different library and/or framework, it’s up to you to find the necessary tutorials and documentation. That being said, the course staff will be available to support you as best they can in finding resources and debugging your code.

Node

Node + Express

React

Jekyll

What to Submit

Submit a short reflection in written, audio, or video form addressing the questions below. Additionally, include screenshot(s) or video(s) demonstrating your successfull installation and setup.

  • What library/ies and/or framework(s) are you using and why?
  • After reviewing the documentation for your choice(s), how comfortable are you in you ability to pick it up and use it successfully over the next two weeks?
  • How did the installation and setup go?
  • How far along did you get with implementing your missing/wanted functionality?
  • What roadblocks or barriers, if any, are you experiencing?

Remember all submissions are done through Canvas.

Requirements

  1. Submission addresses all five reflection questions
  2. Submission includes screenshot(s) or video(s) demonstrating successfull installation and setup of ALL chosen library/ies and/or framework(s)

Additional Resources

Node

React

Jekyll

results matching ""

    No results matching ""