![\"Logo\"](\"https://github.com/NicolasBoyer/wapitis/blob/master/ui/logo.png?raw=true\"){kind=logo}
\r\n\r\n \r\n
\r\nCHANGELOG / DOCUMENTATION\r\n
\r\n\r\n> WebApp utiliTies est un set d'outils pour développer et compiler une application web avec ou sans client lourd. Il ne s'agit pas d'un framlework. Il ne contient pas de composants préexistants (cela sera l'objet d'un autre projet).\r\n>\r\n> L'idée est de faciliter la mise en oeuvre de composants grâce aux web components et à la surcouche qui y est apportée, et de rendre leur compilation plus simple.\r\n>\r\n> Afin de faciliter la compilation de cette application, des scripts en ligne de commande permettent très rapidement d'initialiser, de tester et de publier en production pour une sortie sur le Web ou dans une application packagée pour Windows, IOS ou Android.\r\n\r\n[](#technologies-utilises)\r\n\r\n## 🠺 Technologies utilisées\r\n\r\nPour développer plus facilement et permettre une mise en place plus facile des composants, Wapitis utilise les [webcomponents](https://developer.mozilla.org/fr/docs/Web/Web_Components). Plus particulièrement une surcouche y est apportée ajoutant encore plus de simplicité.\r\n\r\nCette surcouche fonctionne un peu comme [LitElement](https://lit-element.polymer-project.org/). Au lieu d'étendre HTMLElement, le composant créé étend une classe de base appelé `Component` permettant:\r\n- d'accéder simplement au cycle de vie du composant\r\n- d'appliquer un style\r\n- de créer des propriétés dynamiques ou non\r\n- de mettre à jour le contenu\r\n\r\nLe langage utilisé est [typescript](https://www.typescriptlang.org), permettant un contrôle plus poussée des types et des classes et une aide à la saisie facilitée.\r\n\r\nPour mettre à jour le contenu, Wapitis se base sur [lit-html](https://lit-html.polymer-project.org/) qui vous permet d'écrire des modèles HTML en JavaScript à l'aide de template et d'expressions JavaScript intégrées. lit-html identifie les parties statiques et dynamiques de vos modèles afin qu'il puisse mettre à jour efficacement uniquement les parties modifiées.\r\n\r\nEn utilisant lit-html, Wapitis met à jour le contenu dans des shadow DOM et ajoute une API pour gérer les propriétés et les attributs. Il est alors possible de décider quelles propriétés seront observées et les éléments sont alors mis à jour de façon asynchrone seulement à l'endroit où les propriétés changent ou interagissent avec le contenu.\r\n\r\nUne librairie de fonctions est également disponible afin de permettre d'accéder rapidement aux différents éléments du DOM ou du shadow DOM.\r\n\r\nAfin de faciliter la diffusion, Wapitis utilise [FuseBox](https://fuse-box.org) pour compiler rapidement des versions de dev ou de prod. Ajoutons à cela l'utilisation d'[electron](https://electronjs.org/) pour concevoir des applications sous forme de client lourd installable et de [Capacitor](https://capacitorjs.com/) pour créer des applications mobiles sous Android ou IOS, le tout intégré de façon simple et facilement accessible.\r\n\r\nL'utilisation des lignes de commandes permet ainsi d'accéder rapidement et facilement à toutes ces fonctions sans avoir besoin de configurer quoi que ce soit.\r\n\r\n[](#disclaimer)\r\n\r\n## 🠺 Disclaimer\r\n\r\nIl existe d'autres librairies plus connues ou plus puissantes comme React ou LitElement, alors pourquoi Wapitis ?\r\n\r\nPremièrement, de mon côté, cela me permet un contrôle sur tous les élements composants cet outil, qu'il s'agisse de ce que je veux intégrer et de comment cela est codé. D'autre part cela assure que ce qui est inclus est utile.\r\n\r\nEnfin il s'agit d'un outil complet de création de WebApp, icluant tout ce qui est nécessaire, avec simplicité.\r\n\r\nAfin de gérer correctement l'affichage de lit-html et typescript, j'utilise pour ma part [Visual Studio Code](https://code.visualstudio.com/) avec quelques plugins dont :\r\n- [wapitis-plugin](https://marketplace.visualstudio.com/items?itemName=NicolasBoyer.wapitis-plugin)\r\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\r\n\r\nLors de l'installation d'un executable via electron, windows a un avertissement lié à son application smart screen. Les seules solutions pour éviter cette avrtissement sont :\r\n- signer l'application (ce qui coute de l'argent)\r\n- ignorer cette alerte\r\n- désactiver smart screen ;)\r\n\r\n**TODO :**\r\n- Gestion d'une liaison avec IndexedDB dans le Service Worker pour les données provenant d'une base de données\r\n\r\n[](#features)\r\n\r\n## 🠺 Features\r\n\r\n- Générer une application web grâce à [FuseBox](https://fuse-box.org)\r\n- Générer une application [electron](https://electronjs.org/)\r\n- Intégration de [Capacitor](https://capacitorjs.com/) permettant de compiler une app android ou ios\r\n- Mise à jour asynchrone du DOM grâce à [lit-html](https://lit-html.polymer-project.org/)\r\n- Utilisation possible de jsx via l'import d'un fichier jsx.ts\r\n- Divers méthodes disponibles grâce à l'import du fichier log.ts, dom.ts, shadowDom.ts et utils.ts\r\n- Créer vos components et vos classes et générer votre application via des lignes de commande\r\n- Surcouche des web components à travers une classe de base permettant de simplifier la mise à jour de contenus et l'accessibilité au cycle de vie et aux différentes méthodes\r\n- Styler et surcharger les styles directement dans les composants\r\n- Utilisation de SVG pour gérer les icons\r\n- Pré-intégration d'un service-worker, permettant à la web app de fontionner hors ligne\r\n\r\n\r\n[](#license)\r\n\r\n## 🠺 License\r\n\r\nLicensed under [MIT](https://opensource.org/licenses/MIT).\r\n","readmeFilename":"README.md","homepage":"https://nicolasboyer.github.io/wapitis","repository":{"type":"git","url":"git+https://github.com/NicolasBoyer/wapitis.git"},"bugs":{"url":"https://github.com/NicolasBoyer/wapitis/issues"}}