You will need NPM and nvm on your computer to study this material

Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome

1. Install o update the study-lenses package globally
   • $ npm install -g study-lenses (if you do not have it installed)
   • $ npm update -g study-lenses (if you already have it installed)
   • Didn't work? you may need to try:
     • (mac) $ sudo npm install -g study-lenses
   • having trouble updating?
     • try this: $ npm uninstall -g study-lenses && npm install -g study-lenses
2. Fork and clone this repository:
   1. fork the HackYourFuture repository to your personal account
      • [email protected]:HackYourFutureBelgium/architecture.git
   2. clone your fork to your computer
   3. when there are updates to the module:
      1. update your fork with a PR
      2. pull the changes from your fork to your computer
3. Navigate to the module repository in terminal
   • $ cd architecture
4. Run the study command from your CLI
   • $ study
5. The material will open in your default browser, you're good to go!
   • you can read the study-lenses user guide from your browser by navigating to localhost:xxxx?--help

If you use windows and get this error:

• ..dy.ps1 cannot be loaded because running scripts ...

follow the instructions in this StackOverflow answer, that should take care of it ; )

• 🥚 State: You understand the concept of state as the data stored in your application at each moment. You can explain how state is rendered into a user interface, and can explain how each user interaction reads/writes from state.
• 🥚 Persistence: You can explain what persistence means and how it can be implemented in the browser using localStorage. When you encounter a bug in your code based persisted data, you can use localStorage.clear() and a page refresh to reset your project's state.
• 🥚 Data-First Development: You understand applications as data + user interactions. You can demonstrate this by starting your planning process with the data you will need and building a user interface to show that data to a user.
• 🥚 Architecture & Layers: You can explain what software architecture is and the importance of layers for testing, collaboration, and maintenance. These are the layers you will learn to use, from the "back" to the "front":
  • Data Access: This layer is responsible for persisting your data, reading and writing from wherever it is stored. This layer has no fancy logic, it just gets things and puts things away again.
  • Business Logic: This layer is responsible for all the important actions in your application. The Business Logic layer does not ever interact directly with the user or the user interface. Instead it takes in JS data from the Presentation layer, reads/writes state via the Data Access layer, and returns new data for the Presentation Layer to render.
  • Presentation: This is the layer you studied in Separation of Concerns. It renders program state for the user, and handles their interactions. It's possible to different presentation layers for the same business logic!
• 🥚 Function Roles: You can use these new function roles while planning and developing your projects:
  • Data Access: Functions that insert (create), find (read), save (update), remove (delete) entries in your saved data. These are provided for you in this module. Data Access functions can only import utils and other data access functions.
  • Business Logic: Functions that take in JS data, read/update state, and return new data. these can be called from handlers, components, or other business logic. Business Logic functions can only import utils, data-access and other business-logic functions.
  • Handlers: The same role as in Separation of Concerns, only now with a few more restrictions. Handlers can not use data directly or use data access functions. They can only import Business Logic, Components and Utils.
  • Custom Events: Functions that return a new CustomEvent with your choice of .type, and data stored in the it's .details property. These will be very helpful for creating testable and reuseable components in your frontend. Custom Events can only import utils
• 🥚 Development Steps:
• 🐣 Nested Data: Given a nested data structure containing arrays, objects and primitive values, you can 1) access a given value 2) update a given entry 3) filter the data
• 🐣 Matching a JSON Schemas: You can write an object or array that matches a JSON schema.
• 🐣 Using a Library: You can select which functions from the /data-access library to use in your Business Logic functions. This includes reading the documentation, tests and source code to understand how the Data Access functions work.
• 🐣 Stateful Testing: You can pass and write unit tests for stateful functions - using beforeEach to reset state before each test, and testing for the correct side-effects in state.
• 🐥 TDD + Reverse Engineering: Given unit tests for the business logic and an obfuscated demo of the interface, you can build a working application that passes the tests and matches the demo.
• 🐥 Writing a JSON Schemas: You can write a JSON schema that matches several data instances.

• Intro to Architecture - abstraction! layers!

• examples

  • 🥚 /function-roles: learn about the function roles you will be using in this module
  • 🥚 /stepped: study HTML/CSS/JS projects built up step-by-step (only examples)
  • 🥚 /separated: study HTML/CSS/JS projects that have been separated by concern (only examples)
• exercises
  • 🐣 /json-schemas: learn to describe JS data using a schema, and how to validate data against a schema.

• Intro to Architecture - abstraction! layers!

one big group project for the whole module

Build a JS quiz! There is some starter data for you in ./quiz-data, you can copy-paste it into the architecture starter's /data folder to get started.

There is some code already in the starter repository, it's just there so you can see how the folder structure works. Your group will want to remove the extra code before getting started (there are comments to help you find what's important to keep ).

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [ ] [Docs](https://github.com/_/_/tree/_/docs/README.md)
- [/planning](https://github.com/_/_/tree/_/planning)
  - [ ] communication plan
  - [ ] constraints
  - [ ] backlog
  - [ ] wireframe
  - [ ] development strategy
  - [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)