mirror of https://github.com/01-edu/public.git
mini-framework project
This commit is contained in:
parent
d913a76331
commit
c705a1e61f
|
@ -0,0 +1,103 @@
|
|||
## mini-framework
|
||||
|
||||
Now that you have already used a framework of your choice, you must now implement some features on a framework of your own. That's right, you are going to create a framework.
|
||||
|
||||
Be aware that a framework is different from a library. When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you.
|
||||
|
||||
### Objectives
|
||||
|
||||
Your framework should implement:
|
||||
|
||||
- Abstracting DOM
|
||||
- Easier Routing
|
||||
- State Management
|
||||
- Event Handling
|
||||
|
||||
### Instructions
|
||||
|
||||
Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that when executed `npm start` at the root of the folder, it runs the app. The user testing your framework will have to implement some simple code in order to test the features described bellow.
|
||||
|
||||
#### Abstracting DOM
|
||||
|
||||
You will have to implement a way to handle the DOM. The DOM can be seen as a big object, like in the example below:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<div class="nameSubm">
|
||||
<input type="text" placeholder="Insert Name" />
|
||||
<input type="submit" placeholder="Submit" />
|
||||
</div>
|
||||
</html>
|
||||
```
|
||||
|
||||
The html above can be written as:
|
||||
|
||||
```json
|
||||
{
|
||||
"tag": "html",
|
||||
"attrs": {},
|
||||
"children": [
|
||||
{
|
||||
"tag": "div",
|
||||
"attrs": {
|
||||
"class": "nameSubm"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"tag": "input",
|
||||
"attrs": {
|
||||
"type": "text",
|
||||
"placeholder": "Insert Name"
|
||||
}
|
||||
}, //</input>
|
||||
{
|
||||
"tag": "input",
|
||||
"attrs": {
|
||||
"type": "submit",
|
||||
"placeholder": "Submit"
|
||||
}
|
||||
} //</input>
|
||||
]
|
||||
} //</div>
|
||||
]
|
||||
} //</html>
|
||||
```
|
||||
|
||||
With this in mind you can manipulate the DOM more easily in JS. And that is what you will do using a method. Here are some methods you can use:
|
||||
|
||||
- [Virtual DOM](https://bitsofco.de/understanding-the-virtual-dom/) - Using a second DOM with the wanted changes, to compare with the real DOM and change just what is needed
|
||||
- [Data Binding](https://docs.microsoft.com/en-us/dotnet/desktop-wpf/data/data-binding-overview?redirectedfrom=MSDN) - binds together two data sources and keeps them synchronized
|
||||
- [Templating](https://medium.com/@BuildMySite1/javascript-templating-what-is-templating-7ff49d97db6b) - refers to the client side data binding method implemented with the JavaScript language.
|
||||
|
||||
There are a lot of ways to achieve this. Above are just some examples, what matters is that the DOM must respond to certain actions of the user.
|
||||
|
||||
---
|
||||
|
||||
#### Easier Routing
|
||||
|
||||
Routing is the process of selecting a path for traffic in a network. And, as you may have already realized, routing in JS can sometimes be a little bit confusing, so what you will need to do, is to implement a new routing system that is more intuitive and simpler.
|
||||
|
||||
Also take in consideration that all kind of URLs must be supported, like for example queries in the URL from GET requests (example: `http://something.com/users?id=31&tkn=31inasdasni213n1i23ni213ojo`) or not found pages.
|
||||
|
||||
---
|
||||
|
||||
#### State Management
|
||||
|
||||
The state of an app can be seen as the outcome of all of the actions that the user has taken since the page loaded. In other words, if a user clicks on a button to execute an action, the state should then change.\
|
||||
What you will need to do is to implement a way to handle this state. Remember that multiple pages can need to interact with the same state, so you need to find a way to let the state be reachable at every time.
|
||||
|
||||
---
|
||||
|
||||
#### Event Handling
|
||||
|
||||
You will also have to implement a way to handle the events triggered by the user, like: scrolling, clicking, certain keybindings, etc.... Note that this new way of handling events must different from the `addEventListener()` method that already exists.
|
||||
|
||||
---
|
||||
|
||||
This project will help you learn about:
|
||||
|
||||
- Web Development
|
||||
- Frameworks
|
||||
- DOM
|
||||
- Routing
|
||||
- State of an Application
|
Loading…
Reference in New Issue