Framework javascript pour une webapp (PWA)

Version imprimable

23/01/2021, 18h29
SuperCed

Framework javascript pour une webapp (PWA)

Hello,

je cherche un framwork ou une lib, ou un squelette qui me permettrait de développer une webapp android facilement.
En fait, il s'agirait même d'une progressive web app car j'aurais besoin que l'icône de la page reste sur le bureau Android.

Donc ce serait sympa si tout le process lié à l'aspect webapp soit déjà géré. Par contre, pas forcément besoin du push, et du mode offline. Donc pas forcément de service worker.

Je voudrais un framework avec une courbe d'apprentissage rapide et pas de compilation entre le code et le serveur (pas de webpack, babel, etc).

Une truc vraiment simple car c'est une webapp qui a une seule page avec quelques infos et quelques boutons qui déclenchent des requêtes ajax simples.
J'aimerais que la gestion de l'interface soit un peu jolie.

L'idée est de trouver un framework js qui me permette d'aller vite et de passer peu de temps en apprentissage.

Je connais déjà pas mal VueJS par exemple, mais là, je souhaite quelque chose de plus simple et compacte sans compilation.

Un squelette de webapp avec un bon CSS pourrait aussi me convenir, je n'ai pas encore fouillé tous les petits framworks JS qui existent, et il y en a pas mal...

Ou alors une genre de bootstrap mais en plus léger et plus moderne.

Merci!
27/01/2021, 12h16
krakatoa

tu le dis toi meme que tu n'a pas besoin d'un framework..

tu le fais sans framework !
27/01/2021, 12h57
SuperCed

En effet, c'est peut être le plus simple au final... C'était surtout pour le rendu graphique où je ne suis pas très bon.
27/01/2021, 13h47
krakatoa

et bien c'est le moment d'apprendre :)

pour le graphisme un framework ou lib ne t'aidera pas ;)
27/01/2021, 13h53
SuperCed

Ben un peu quand même quand tu utilises ViewJS avec Vuetify, tu as très peu de graphisme à faire, et c'est joli direct. Donc je cherche un peu la même chose, mais sans la lourdeur de compilation.
28/01/2021, 19h19
VirgApps

Bonjour,
Dans ce cas tu es des librairies CSS comme Bootstrap, Bulma, MaterializeCSS...
28/01/2021, 19h24
SuperCed

Oui, c'est ça ! Ca me va bien un truc graphique à la bootstrap, par contre, je connais celui-ci et j'aime pas. Je le trouve lourd et j'aime pas le système de grille.
Si quelqu'un connait un truc plus moderne et leger, ça m'intéresse !
29/01/2021, 08h51
SuperCed

Citation:

Envoyé par VirgApps

Bulma, MaterializeCSS...

Je viens de regarder ces 2 là, ils ont l'air top et très rapides à prendre en main !

Pour le coté webapp, vu que c'est juste le recourcis sur le bureau Android qui m'intéresse, je ferai un manifest, je crois que c'est ça qui gère cette fonctionnalité.
Même si c'est pas exactement ça, je trouverai un moyen de la coder rapidement.

Et pour les appels ajax, je vais faire du vanilla ou du jquery, les 2 sont sont rapides à coder.

Merci !

Si vous avez d'autres conseils sur les bootstrap like, je suis preneur, je sais qu'il y en a plein et c'est pas facile d'en trouver un. J'en cherche surtout un facile à mettre en place comme bulma. Il a l'air très bien celui là !
29/01/2021, 09h10
Doksuri

Bonjour, je ne veux pas casser l'ambiance, mais je me questionne quant a l'avenir des PWA i-programmer.info/news/87-web-development/14261-firefox-drops-support-for-pwa.html
29/01/2021, 09h49
SuperCed

Intéressant!

Bon, dans le cas qui m'interesse, il s'ahit plutôt d'une page web, avec la possibilité d'avoir un racourcis sur le bureau Android. Pas plus que ça, donc ce n'est pas une vraie PWA.

Mais c'est intéressant comme article, c'est vrai que le principe de PWA n'a jamais été ultra répandu au final, alors que ça permet quand même d'offrir un contenu commun pour les 2 OS mobiles principaux sans passer par des framework complexes.

Mais le résultat, c'est que ça n'a jamais vraiment pris. Peut être que l'absence des stores en est la cause.
29/01/2021, 10h07
Doksuri

meme si ce n'est qu'une page web... tout le concept est en place, donc ca reste une PWA....

sinon, pour repondre a ta question principale, personnellement, j'ai une PWA "type" qui comprends 4 fichiers... une page web index.html, une page web offline.html, un JS qui integre le serviceWorker, le service worker qui comprend les 3 listeners (install, activate & fetch) (le fetch gere le mode offline -offline.html- )
=> cette PWA fait juste un hello world !

quand je dois faire une nouvelle PWA, je recuper le squelette, et je continue
29/01/2021, 12h06
SuperCed

Si tu veux partager tes 4 fichiers templates, ça m'intéresse !

j'avais oublie aussi le fichier manifest

manifest.json

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    "name": "minimal pwa",
    "short_name": "minipwa",
    "description": "PWA minimaliste",
    "icons": [
        {
            "src": "tonIcon.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "https://tonDomain.ext",
    "background_color": "#cccccc",
    "theme_color": "#cccccc",
    "display": "standalone",
    "scope": "https://tonDomain.ext",
    "prefer_related_applications": false
}

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>ma pwa minimaliste</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<link rel="manifest" href="manifest.json">
	<meta name="theme-color" content="#cccccc" />
</head>
<body>
	<h1>yeah !</h1>
</body>
<script src="script.js"></script>
</html>

offline.html

Code:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>offline</title>
</head>
<body>
offline !
</body>
</html>

script.js

Code:

1
2
3
4
5
6
7
navigator.serviceWorker.register('sw.js')
    .then(registration => {
        // console.log('Service worker registration succeeded:', registration);
    })
    .catch(error => {
        // console.log('Service worker registration failed:', error);
    });

sw.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const cacheName = 'static-v1';
const assets = [
    'offline.html'
];
 
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName)
            .then(cache => {
                cache.addAll(assets);
            })
    );
});
 
self.addEventListener('activate', event => {
});
 
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(cacheRes => {
                return cacheRes || fetch(event.request);
            })
            .catch(() => caches.match('offline.html') )
    );
});

01/02/2021, 17h07
SuperCed

Merci, je vais essayer tes templates avec bulma.

Je vous dirai si ça va vite...