Skip to content

Latest commit

 

History

History

session-1

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
instructions
instructions
 
 
notes
notes
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 

README.md

Wanda's Wisdom: Session 1

In this session, we look at how to convert a simple JavaScript web application into TypeScript with some basic alterations.

Installing and Running the Repo

  1. Make sure you have already forked the main repository to your own account and cloned it to your local computer
  2. Within the Slalom Quests directory, enter into this app's folder and the subfolder for the first session: cd wandas-wisdom/session-1
  3. Switch to the start branch: git checkout start
  4. Install all Node modules: npm i
  5. Start the app: npm run start

The last command will build then serve the app by using webpack, allowing you to view it at http://localhost:8080. Any changes you make to the code will automatically update the running site. Any errors will be displayed in your terminal.

Explaining the Code

A plain JavaScript app could be handled with just three files:

  • an HTML file with the structure to display on the site
  • a CSS file with the styling for the site
  • a JS file with all the code for manipulating the site

However, we did not use that structure for this app. We chose to deviate from a vanilla JS app for two reasons:

  • to make it easier to convert it to a TypeScript app
  • to make it easier to introduce TypeScript concepts

Let's walk through some of those key deviations before looking more closely at the file structure.

Helps with Converting to TypeScript

  • Node: Since TypeScript needs to be installed as a module in a repo in order to use it, we initialized this repo with Node, so we can avoid the hassle of adding a package.json afterwards. To convert to TypeScript, we only need to import some additional modules.
  • webpack: While TypeScript does not need a webpack in order to run, using that module can make working with a TypeScript app that much easier. TypeScript code needs to be transpiled to JavaScript code before it can be used in a live app. Furthermore, multiple TypeScript files need to be mapped appropriately in order for them to interact appropriately. Finally, it's useful to be able to change the code and instantly be able to see the results live. The webpack allows us to achieve all those benefits without needing to write additional code. The webpack can also handle a simple JS app. To ensure the webpack can handle TypeScript, we only need to add some additional code to the webpack.config.js file.

Helps with Introducing TypeScript

  • multiple files with modules: Multiple files help you to isolate key functionalities and deal with them piece-wise instead of all at once. Modules allow the functions to interact with one another directly within their JS files instead of needing to interact indirectly after importing all of them separately into the HTML file.
  • data files with limited content: While the quotes file helpfully provides an array of quote objects, the other files in the data folder merely provide single strings. This gives you a chance to work with simple data structures in isolation.
  • utilities files with redundant functionality: Basic functions may be redundant, but they are also a great way to introduce basic concepts. For instance, you would probably never use a function to convert a string to all caps. For one thing, you already have a built-in JS string method to do that (.toUpperCase()). For another, you would probably want to handle that in CSS instead of JS. However, it's good practice for how to write a function that takes a string as an argument and returns a string as the result.

File Structure

  • public: HTML and CSS files
  • src: JS files
    • data: non-functional files with raw data to use in other files (e.g., the quotes array)
    • utilities: helper functions (e.g., makeAllCaps)
    • generators: functions to create DOM elements (e.g., createDescription)
    • mutators: functions to change DOM elements (e.g., replaceTags)

If you look in the HTML file, you'll notice two interesting features: it contains an empty body tag, and it imports a JS file with a name that doesn't match any of the existing JS files. The body will be filled in by the JS code (specifically, the functions from the generators folder), and the mystery file will be generated by the webpack when the app is run (and stored in a dist folder that the webpack will also generate).

Guides for the Session

Notes

Markdown files walking through the key concepts covered in this session have been provided in the notes folder.

Instructions

Markdown files with steps for how to solve the problem for this session have been provided in the instructions folder.

Resources