Create a Framework front-end ?
Is that so hard?


Pourquoi cette question ?

- Un client me donne une maquette a faire.
- Complexe
- Trop bindings à faire
- Routing


Du coup, Framework custom ou
Framework existant ?

Quarante-deux ! cria Loonquawl.
Create a Framework front-end ?
Is that so hard?

Définis-moi un Framework...


Templating
Data bindings
Event handling
Life cycle
Routing
Directives
Etc...

Définis-moi un Framework...
Templating


Javascript templating refers to the client side data binding method implemented with the Javascript language

Définis-moi un Framework
Routing


So, if a user types that URL in their browser the user will see a detail view of that task. Also, if they're somewhere else in the app and navigate to that task view by clicking the task in their list, the page won't reload, but when you look at the URL bar in the browser, that's the page you're on.



Construis-moi un Framework..
Templating
html app
create a vdom on it



Construis-moi un Framework...
Data-binding
vDom
add new Data
re render vDom into Dom



Construis-moi un Framework...
Routing
ask for route
change current vdom
apply new vDom into Dom


Problématiques pendant le dev ?

- Utilisation de SNABBDOM, élément essentiel du Framework
- Ne pas oublier les .bind()
- Mauvaise gestion des erreurs
- Routing incomplet
- Data-binding incomplet
- etc..


Problématiques après le dev ?

- Qui va le maintenir / le faire évoluer ?
- Apprentissage du code par les autres développeurs ?
- Stabilité du code ?

On peut faire les bases des bases d'un vrai Framework. Mais dans le monde de l'entreprise on se rend vite compte que ce n'est pas viable !


Create a front end framework, is that so hard?



Aurais-tu fais différemment en ayant connaissance de ces problématiques ?
OUI !
VueJS <3
<you>Thanks</you>


https://github.com/f3ltron

https://www.linkedin.com/in/fgiraud42/
deck
By Florent Giraud
deck
- 1,219