Minor Web Development - Web App From Scratch
The coming three weeks you will create a client side web app during this course. Based upon data from an API of your choice, you create an overview and detail page of the items retrieved from the API. On the overview page you add a filter / sort functionality, so that you can filter the items. You write as much vanilla code as possible, and avoid to use frameworks or libraries (with the exception of a micro library here and there) as much as possible. You will increasingly give structure to the code as the course progresses.
16 hours have been scheduled to work on this course this week (Monday and Tuesday). Try to plan your work well! In the meantime, progress is monitored in standup meetings and classroom meetings. Your code will be reviewed at Friday. Any issues will be placed in your GitHub repository.
Breakdown the web app in features. Add routes and states. Rendering detail pages
Manipulate data and templating. Split code into modules. Reflect on what you made.
- Create actor diagram (Monday)
- Creating an interaction diagram (Monday)
- Refactor code (Monday)
- Handle routes to the detail pages (Monday)
- Implement a template engine (Tuesday)
Visualize where your code lives in a comprehensible way. Ensure that all objects, properties, methods and any variables and functions are included. Look at the included documentation see how you do this. Put the actor diagram in your README.md of the forked repo.
Perform the step-by-step of the documentation below.
Documentation Actor and Interaction diagram
Overview of the symbols you can use and their meaning
How does the interaction between user and app work? For example, when will data be loaded? Which use cases are possible? We will do the assessment based on this diagram and your actor diagram. Put the interaction diagram in your README.md of the forked repo.
Perform the step-by-step of the documentation below
Documentation Actor and Interaction diagram
Overview of the symbols you can use and their meaning
Now that you have gained a better understanding, using the diagrams, it may be time to refactor the structure of your app. In other words, how are you going to code or refactor the various actors and the dependencies between them in your app? Which design patterns do you use? Look carefully at the criteria in the [rubric] and make sure that your code meets these.
JavaScript Design Patterns
Advanced JavaScript concepts
On a single page web app you will have to create the URLs (or routes) to the different "pages" in JavaScript. For example if you want to be able to navigate to a detail page. You can do this by using the hash (#) in the url, in combination with the hashchange event. Making a router yourself is quite complicated, so this is a good opportunity to use a micro library. Routie.js is a simple hash router that you can use.
Link the items on the overview pages to unique URLs and handle these routes. Make sure that you can also navigate back to the overview page.
http://microjs.com/#router
Routie - hash router
Use a template engine to render the data to HTML. Add the Transparency.js template engine (https://github.com/leonidas/transparency) to your application. Or use a different template engine of your own choice. Using the previously retrieved data and the template engine, generate the HTML that you want to display in the overview section. Also generate detail sections of the individual items from the list.