Assignment 3 Recommendations

The file above contains the git bundle from the code that I used in the week 5 tutorial. Once you download it, you can do git clone tutorial5.bundle and it will extract the code for you.

The MDN docs on web components are an excellent resource. However, I advise against using the shadow DOM. This is because it will stop all your CSS from cascading; instead, follow the template pattern that I have provided in the example code from the tutorial.

Again, I do stress that you do not have to use web components to get full marks in this assignment. If you feel more comfortable doing it another way, that is completely okay. I am just showing this as the way that I did and I personally found it easier to use (and probably those who have previous react experience may find it easier as well).

Structuring your project

By now, you would probably have quite a few (hundred to thousands of lines) of JavaScript in your project. I strongly recommend(!) that you eventually split these up into separate files.

If you are using web components, I would suggest having a separate file for each component, as they can become quite large.

How to deal with routing

It is imperative that you familiarise yourself with the web history API, particularly the pushState() method. You should ensure that your a tags do not result in the browser trying to navigate and fetch a new html file (you can usually do this by hooking into the click event for all a tags on the page and then calling preventDefault() on the event object).

For routing, I created a singleton AppRouter class. This class had a few methods, namely:

• handleNavigation()
  • This works best if you have some global dictionary in your web app that contains all of the possible routes that you can have in your app.
  • When the navigation is invoked, you would then change the custom web component rendered within the main component.
• navigateTo(route: string)
  • This should accept a route to navigate to, and then set some relevant state(!) before invoking the handleNavigation() method.

Handling offline mode

I suggest creating a wrapper class that controls all the data flow in your web app. You will use it to fetch data and store data. This could look something like having a DataSourceManager class, with methods like getChannels() or postMessage(content).

The reason I recommend this is because you can add in a caching layer in between your function call and network requests. This caching layer can be implemented as you wish, as long as it persists between reloads. Using LocalStorage is an option, but I ended up using IndexedDB as it supports other data types and is more like interacting with a database, if you are more comfortable with that.

When you fetch something using this data manager and you are offline, it can still return the data from your caching layer (this is the whole idea to get offline mode working).