IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

L’entreprise Zeit annonce le framework Next.js en version stable


Sujet :

Bibliothèques & Frameworks

  1. #1
    Chroniqueur Actualités

    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2014
    Messages
    1 089
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2014
    Messages : 1 089
    Points : 26 555
    Points
    26 555
    Par défaut L’entreprise Zeit annonce le framework Next.js en version stable
    Zeit annonce le framework Next.js en version stable
    pour le rendu des applications React avec un routage côté client semblables aux applications universelles natives

    L’entreprise Zeit vient d’annoncer la sortie de la première version stable de Next.js, un framework permettant d’effectuer le rendu des applications web React par les serveurs avec un routage côté client qui se présente comme les applications universelles natives. Il est bâti sur React, Webpack et Babel. Pour les personnes extérieures à l’environnement, React est la bibliothèque JavaScript conçue par Facebook afin de créer des interfaces utilisateurs avec plus de facilité. Webpack est un outil permettant de grouper les modules avec les dépendances afin de générer des éléments statiques. Enfin, Babel est un transpileur de code ES6 en code ES5.

    Pour ce qui concerne Next.js, la mise en œuvre de ce projet est partie de la volonté d’améliorer les acquis dans le monde JavaScript. Nodejs a introduit la possibilité de concevoir les applications client-serveur avec JavaScript. À partir de là, beaucoup d’améliorations ont été apportées. Ce sont ces avancées qui ont favorisé la création de React pour le rendu des composants dans les pages web lorsque vos données changent.

    De même, l’un des concepts assez appréciés dans le monde JavaScript est le cycle de vie des composants. Il permet de faire passer les composants invoqués à travers différentes phases depuis sa création jusqu’à sa destruction. L’avantage avec une telle méthode est qu’elle permet de pouvoir mieux gérer les composants en décidant lequel sera mis à jour en premier, ou lequel changera d’état à tel moment ou sera détruit en dernière position.

    Next.js s’appuie sur ses acquis pour offrir un meilleur rendu des applications JavaScript. Selon les développeurs du projet, il se base sur 6 principes qui peuvent être listés comme suit :

    • Aucune installation à faire. Le fichier système prend la place de l’API tout : Next.js s’inspire de l’installation de Node.js afin de créer un sous-répertoire "pages" là où vos composants de haut niveau se situent. Pour Next.js, il suffit d’exécuter la commande $ npm install next –save et d’ajouter le script suivant à votre package JSON :

      Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      {
        "scripts": {
          "dev": "next"
        }
      }

      Une fois que cela est fait, le fichier système est l’API principale. Chaque fichier .js devient un chemin qui est automatiquement traité et rendu par le serveur, ce qui sous-entend que vous pourrez avoir un rechargement à chaud du code, un rapport d’erreurs, un mappage des sources et une transpilation pour les anciens navigateurs. Lorsque vous déclenchez un évènement, le composant est récupéré. S'il définit "getInitialProps", les données sont extraites. Si une erreur survient, _error.js est rendu. Après ces différentes étapes, la fonction "pushState" est exécutée et le nouveau composant est rendu. Par ailleurs, chaque composant de haut niveau reçoit une propriété d’URL avec plusieurs API.

    • Seul JavaScript est nécessaire : chaque route avec Next.js est un module ES6 qui exporte une fonction ou une classe qui étend les composants de React. Avec cette approche, souligne Zeit, un composant peut-être rendu directement, ou être importé et rendu par un autre composant de niveau supérieur. Par ailleurs, les transitions côté client entre les routes sont permises à travers un composant <link>.

    • Rendu automatique par le serveur et fractionnement du code : avec Next.js, chaque composant à l'intérieur des "pages/" obtient automatiquement un rendu par le serveur avec leurs scripts à l’intérieur. En outre, lorsque le code est chargé dynamiquement Next.js récupère une représentation dynamique de la page basée sur JSON qui contient également ses scripts. Cela implique qu’il va falloir effectuer des déclarations explicites d’importations des composants de React.

    • Récupération des données : Pour récupérer les données dynamiquement à partir du serveur et mettre à jour le rendu, Next.js s’appuie sur le même principe utilisé par React. Toutefois, il transpile certaines fonctionnalités comme (async/await) afin de contrôler ce le rendu par le serveur. Avec cette approche, Zeit explique que Next.js peut être utilisé avec les API REST, GraphQL et les bibliothèques de gestion des états telles que Redux. Par ailleurs, cette même méthode permet de charger différents types de données selon que le composant est rendu par le serveur ou affiché dynamiquement par le routage côté client.

    • L’anticipation pour une meilleure performance : pour donner d'autres possibilités à ceux qui veulent utiliser un rendu complet de leur application en plus du rendu étape par étape en fonction des évènements déclenchés, Zeit a mis en œuvre une technique au-dessus de Next.js qui permet de récupérer à l’avance la représentation JSON du composant par l’intermédiaire d’un service.

    • Un déploiement simple : Pour déployer une application Next.js, il suffit d’exécuter le code "next build" par "next start". Ensuite, vous invoquez le code "now" pour le déploiement.


    Zeit déclare en conclusion que « Nous avons créé Next.js parce que nous croyons que les applications isomorphes universelles sont une grande partie de l'avenir du web ».

    Source : Blog Zeit

    Et vous ?

    Que pensez-vous de Next.js ?

    Est-ce un framework de trop ? Ou pensez-vous qu’il a sa place vu ses fonctionnalités ?

    Voir aussi

    Facebook améliore React et React Native avec une nouvelle API d'accessibilité pour le support des applications d'assistance

    La Rubrique JavaScript, Forum JavaScript, Cours et tutoriels JavaScript, FAQ JavaScript

  2. #2
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    Par curiosité j'ai ouvert le lien et en une fraction de seconde 200% de CPU chrome figé et OS bloqué

    J'ai dû rebouter. pour confirmer même chose donc après un deuxième reboot je poste ce message.
    cette page Blog Zeit contient une vidéo qui affichait des rayures vertes. je crains une vidéo vérolée.

    A+JYT

Discussions similaires

  1. Réponses: 10
    Dernier message: 14/09/2016, 11h51
  2. Réponses: 0
    Dernier message: 13/04/2015, 19h16
  3. Réponses: 0
    Dernier message: 26/01/2015, 22h43
  4. [Python 3.X] [Annonce] Une introduction à Python 3 - nouvelle version
    Par lpointal dans le forum Contribuez
    Réponses: 0
    Dernier message: 18/01/2015, 12h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo