Le développement Web est tellement intéressant ! Mais JavaScript est... intimidant.
Tout le reste dans le développement Web est un jeu d'enfant pour vous, mais lorsque vous approfondissez JavaScript, vous ne pouvez pas vous empêcher de ressentir un sentiment tragique de "tout le monde est réveillé mais vous êtes seul" - tout comme les autres, tout le monde connaît d'importants contenus de connaissances de base que vous ne connaissez pas, et ces contenus peuvent vous aider à comprendre toutes les connaissances.
La vérité est qu'il vous manque effectivement des éléments importants pour résoudre le problème.
De plus, le développement front-end est devenu fou.
Prenez une chaise et asseyez-vous. Il est temps d'écrire une application JavaScript.
La première étape consiste à préparer votre environnement de développement local et à l'exécuter. Alors Gulp ou Grunt, attendez, non... Les scripts NPM aussi !
Utiliser WebPACK ou Browserify ? Exiger.js ? Vous passez à ES6 ? Ou ajouter trop de Babel à votre prétraitement ?
BDD ou tests unitaires réguliers ? Quel cadre d’assertion faut-il utiliser ? Bien sûr, exécuter les tests à partir de la ligne de commande serait bien, alors peut-être que PhantomJS fonctionnerait aussi ?
Angular ou React ? Braise ? Colonne vertébrale?
Vous avez lu de la documentation React, "Redux est un conteneur d'état prévisible pour les applications JavaScript." Vous en avez certainement besoin.
Laissez-moi vous aider à comprendre pourquoi je dis que tout cela est si fou. Commençons par un exemple et passons ensuite aux jolies images.
Il s'agit d'une application "Bonjour le monde !" pour React.
// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Pas complètement terminé.
$ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
Il manque en fait quelques étapes ici, comme l'installation de Browserify et ce que vous devez réellement faire pour le faire fonctionner sur le Web une fois que vous avez fait cela, car cela ne produit pas réellement de message. Quel est le contenu de la page ? ¯ _（ツ）_ /¯
Après avoir terminé cela, vous aurez enfin besoin d'un fichier appelé bundle.js, qui contient la nouvelle application React Hello World—— Le programme compte 19 374 lignes de code. Et il vous suffit d'installer Browserify, Babelify et React-Dom, et de considérer des milliers de lignes de code inconnues.
Marc est presque prêt à implémenter son application React « Hello World » pic.twitter.com/ptdg4yteF1
—— Thomas Fuchs (@thomasfuchs) 12 mars 2016
Écrivons une application Hello World en utilisant du code JavaScript simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Hello World</title>
</head>
<body>
<p id="container"></p>
<script>
document.body.onload = function(){
var container = document.getElementById("container");
container.innerHTML = '<h1>"Hello, world!"</h1>';
}
</script>
</body>
</html>C'est tout. 18 lignes de code. Vous pouvez copier/coller dans le fichier index.html, double-cliquer et le charger dans votre navigateur. Finition.
Si à ce stade vous pensez : « Attendez une minute, React peut faire bien plus que cette petite chose que vous venez d'écrire, et vous ne pouvez pas écrire une application JavaScript de cette façon ! » gros La plupart du temps) c'est vrai, mais il faut quand même faire un petit pas pour comprendre pourquoi tout est fou.
Voici les photos promises.
La grande majorité des applications Web JavaScript sur lesquelles vous travaillerez se situeront quelque part au milieu de la courbe en cloche. Et au milieu, si vous commencez avec une pile React complète, vous sur-concevoirez massivement votre application dès le départ.
C'est pour ça que tout devient fou. La plupart de ces outils vous semblent nécessaires pour résoudre des problèmes, mais vous n'avez jamais rencontré un tel problème et vous ne rencontrerez jamais un tel problème à l'avenir.
Même image :
Parce que par défaut tout le monde surconçoit ses applications et s'en rend compte, le développement Javascript est devenu trop verbeux.
Comment démarrer une application JavaScript ? Dois-je utiliser un outil comme React ou Angular ? Dois-je utiliser un gestionnaire de paquets ? Si ce n'est pas le cas, que devez-vous faire ? Des tests sont-ils nécessaires ? Le balisage doit-il être généré en Javascript ? Ce sont toutes des questions que vous devriez vous poser avant de lancer une énorme pile technologique fournie par défaut.
Lorsque vous lancez une application JavaScript, la clé est de choisir un point sur la courbe en cloche qui est juste en avance sur le niveau de complexité que vous pensez que l'application finira par atteindre.
Je ne mentirai pas, il faut de l’expérience pour vérifier cela. Mais il y a ici un point idéal qui vous permettra de lancer la plupart des applications JavaScript : jQuery plus des modèles côté client et des outils de construction très simples pour concaténer et réduire les fichiers de produits (en supposant que votre architecture backend ne le fasse pas déjà) si cela est fait. ).
Si vous savez comment créer correctement une application Javascript, vous commencerez alors à comprendre comment, quand et pourquoi utiliser un framework ou npm/requir/webPack ou ES6, quand écrire des tests et quand vous devriez prendre la peine de créer votre teste l'exécution locale ou l'exécution dans le navigateur, etc., toutes ces questions se posent.
Vous souhaitez combler ces lacunes avec vos connaissances en développement JavaScript ? Vous voulez éviter de vous sentir dépassé et de sur-ingénierie massivement vos applications JavaScript au cours du processus ? C’est ce sur quoi je me concentrerai plus tard, alors restez à l’écoute !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
