Donnons d'abord un aperçu approximatif :

Ingénierie de projet
Direction du développement
Environnement professionnel
Résumé du cadre/compétences à maîtriser

Le résumé est placés premiers :

Le front-end en 2017 n'est pas tant plus cruel que plus standardisé. Ces deux dernières années, après quelques mois d'entraînements divers, ils sont sortis. et des dizaines de milliers proposés avec désinvolture. Les débutants avec des dizaines de milliers seront éliminés par le marché.
Les outils de développement/compilation front-end prennent progressivement forme, bien qu'ils ne soient pas aussi complets que les environnements IDE pour les langages de programmation de premier plan tels que object-c, java, et C, ils le sont. Le concept de modularité d'ingénierie a commencé à prendre racine dans le cœur des gens. Ceux qui écrivent du code HTML CSS Javascript original sont aujourd'hui soit de petits projets, soit des novices.
Le travail front-end est plus difficile et la direction est plus diversifiée

Supposons que je veuille entrer dans le gouffre du WEB développement front-end cette année

Le front-end web est mis ici en avant car de nombreux développements iOS et Android incluent désormais le terme « big front-end ». Principalement en raison de l'émergence de l'isomorphisme React, beaucoup d'entre eux ont commencé à être mélangés.

Tout d'abord, passons en revue le front-end dans l'impression de nos anciens camarades de classe :

Ancienne antiquité : Exportation d'images coupées PS
Débutant : Écrire du code avec Adobe Dreamweaver
Paresseux : UltraEdit, bloc-notes…

Peut-être qu'après être devenu compétent, vous pourrez simplement trouver quelque chose qui peut taper et démarrer écrire du code, mais j'ai rencontré un vieux vétéran du front-end avec de nombreuses années d'expérience. Il a simplement écrit un morceau de code à la main sans le vérifier parce qu'il était trop paresseux pour ouvrir l'éditeur, puis il l'a accidentellement tapé. le mauvais personnage, ce qui a presque mis fin à toute l'affaire du projet. Les personnes vraiment puissantes doivent être très prudentes à tout moment. Veuillez faire bon usage des fonctions de vérification et de correction des erreurs de l’EDI.

Contrairement au passé, si vous souhaitez commencer le développement Web front-end cette année (ci-après dénommé front-end), alors au moins vous n'avez pas à vous soucier de trop de compatibilité des navigateurs, mais cela ne veut pas dire que vous n'avez pas besoin de vous en soucier du tout, c'est juste que l'environnement de développement n'est pas aussi gênant qu'avant en raison de l'émergence de divers compilateurs.

Le défi le plus important auquel est confronté le front-end en Chine est :

Itérations de version du navigateur en retard.
J'ai acheté un téléphone portable auprès de l'une des 500 plus grandes sociétés de téléphonie mobile nationales. Quand j'ai vu qu'il était livré avec le noyau du webkit, il s'est avéré qu'il s'agissait de la version 2003 du webkit. Après tout, le noyau Android est également 4.x. Je ne sais toujours pas comment ils ont réussi à intégrer un noyau de navigateur aussi ancien dans un système Android relativement nouveau, et je ne sais pas ce que cela signifie. même avec la bande de base Qualcomm SOC, il est très difficile de mettre à niveau le système, sans parler des autres bandes de base Soc.

Avant la date limite, la version Android de WeChat était à peu près Chrome 35 (la dernière en date est Chrome 55) et est restée inchangée pendant un an, ce qui serait pour des raisons de stabilité.

UC, Baidu et d'autres navigateurs shell sont très populaires, mais ils n'appellent que le noyau du navigateur du système. Ne me dites pas qu'ils ont optimisé la vitesse de chargement. La vitesse de chargement est déterminée par le réseau. l'état et le matériel du système, cela a-t-il quelque chose à voir avec votre navigateur shell ? Donc je ne sais pas ce qui est écrit dans leurs dizaines de mégaoctets de capacité, et ça fait peur d'y penser.

En bref, à l'ère du bureau, nous sommes confrontés au cancer d'IE6, 7 et 8. À l'ère du mobile, nous sommes confrontés au cancer d'Android (national uniquement)

Recommander deux éditeurs :

ATOML'éditeur le plus populaire à l'heure actuelle
Texte sublime Un éditeur consciencieux, bien qu'il soit payant, ce n'est pas obligatoire, juste un rappel occasionnel
vscode Le plugin de base est parfait mais la mise à jour de les plug-ins tiers sont lents

Si un travailleur veut bien faire son travail, il doit d'abord affûter ses outils.

Le développement rapide des frameworks front-end signifie l'itération continue et rapide de divers plug-ins Bien qu'un grand outil semi-fermé comme Dreamweaver soit très puissant sur un aspect, il est évident que. Les mises à jour de version ne peuvent pas suivre le rythme de la communauté. Le rythme de mise à jour, même si j'ai installé la dernière version 2017 pour en faire l'expérience, j'ai toujours l'impression qu'elle n'est pas qualifiée pour cette époque

Ingénierie de projet

Évitez les rapports d'erreurs inutiles

Pour être honnête, même si c'est une bonne chose que le concept de développement frontal d'ingénierie ait enfin commencé à devenir populaire, en fait, il en est encore à ses balbutiements et n'est pas convivial pour novices. Il n'est pas possible de créer directement un projet comme xcode, puis de le configurer, puis d'écrire le code en un seul arrêt. Bien que la plate-forme macOS dispose de CodeKit qui a très bien fonctionné, l'intensité de la mise à jour ne peut pas suivre la vitesse de développement des différents frameworks. , il ne peut être utilisé qu'à titre de référence.

Maintenant, lors de l'écriture du front-end, vous devez au moins créer un environnement d'exploitation local (localhost) ou quelque chose comme ça. C'est une chose très, très basique. S'il vous plaît, ne le faites pas Double-cliquez sur le code HTML pour prévisualiser le code que vous avez écrit comme avant. Il y a une question à laquelle j'ai répondu des centaines de fois pour les débutants de certains groupes : XXXXX n'est pas autorisé par Access-Control-Allow-Origin , en gros, 99 % d'entre eux sont causés par un double-clic direct sur HTML (les 1 % restants sont causés par http cross-domain, etc. .)

Puisque vous devez configurer localhost, le déploiement d'IIS, d'un serveur OS, etc. est très gênant, du moins je pense que c'est le cas. Et cela implique également certains logiciels payants, etc., et le coût a beaucoup augmenté.

Grâce au développement de nodejs, Browsersync et le serveur de développement webpack peuvent désormais déployer rapidement un répertoire de projet, à condition que node soit installé.

Le front-end n'écrit plus directement CSS, HTML et JS

Bien que ce sous-titre soit un peu exagéré, c'est une tendance.
Le navigateur exécute Iron Triangle : css, html, js, ces fichiers nécessaires, si le navigateur existant reste inchangé, alors les ingénieurs du futur seront de moins en moins susceptibles d'écrire ces fichiers directement, et choisiront plutôt un outil de compilation. Vous pouvez l'écrire dans votre langue émergente préférée, puis le compiler dans un fichier 铁三角 que le navigateur peut reconnaître. Bien entendu, il n'est pas exclu que le navigateur puisse exécuter directement less, scss, ts et d'autres fichiers dans le. l'avenir. Tout cela est possible.

L'exemple le plus célèbre est que la syntaxe de jQuery a été absorbée par ES2015 et même par les navigateurs de la nouvelle ère avec un support natif intégré (il a même été signalé que les navigateurs auraient jQuery intégré)

CSS :

Maintenant, la plupart d'entre eux sont compilés dans des fichiers CSS ordinaires via less, scss, sass, etc.
Ensuite, le célèbre plug-in postCSS est utilisé pour compléter divers préfixes de navigateur.
Par exemple :

Dans le fichier less on écrit :

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}

Copier après la connexion

Le css compilé est comme ça :

.foo {
  display: -webkit-box;    
  display: -webkit-flex;    
  display: -moz-box;    
  display: -ms-flexbox;    
  display: flex;    
  -webkit-box-pack: center;    
  -webkit-justify-content: center;    
  -moz-box-pack: center;    
  -ms-flex-pack: center;    
  justify-content: center;    
  -webkit-box-orient: vertical;    
  -webkit-box-direction: normal;    
  -webkit-flex-direction: column;    
  -moz-box-orient: vertical;    
  -moz-box-direction: normal;    
  -ms-flex-direction: column;    
  flex-direction: column;
}

.foo .bar {    
  -webkit-box-flex: 0;    
  -webkit-flex-grow: 0;    
  -moz-box-flex: 0;    
  -ms-flex-positive: 0;    
  flex-grow: 0;    
  -webkit-flex-shrink: 0;    
  -ms-flex-negative: 0;    
  flex-shrink: 0;    
  -webkit-flex-basis: auto;    
  -ms-flex-preferred-size: auto;    
  flex-basis: auto;
}

.foo .bar:hover {    
  color: red;
}

Copier après la connexion

Cette efficacité, combien de temps vous faut-il pour écrire cette complétion à la main ? Peut-être que ça va me manquer. Par conséquent, que vous soyez responsable du salaire que votre patron vous donne, de vos parents pour votre vie, ou que vous soyez vous-même responsable de votre corps, veuillez utiliser des outils de compilation pour écrire vos CSS, HTML et JS.

Ce ci-dessus est un exemple utilisant CSS,

Il y a aussi pug (anciennement appelé jade) pour HTML, HAML
typescript pour JS, coffeeScript
Mais ici je veux parler de js dans En particulier, les nouvelles versions d'ES6 et ES7 sont en fait très parfaites
Il a toute la modularité syntaxique et ainsi de suite. Il peut ensuite être compilé en une version compatible avec les navigateurs populaires via le célèbre compilateur Babel. plutôt bien. , mais personnellement, je pense qu'il n'est pas nécessaire d'augmenter le coût de l'apprentissage en équipe, à moins qu'il ne s'agisse de votre passe-temps personnel.

Les projets à grande échelle ne peuvent éviter l'ingénierie MV*

Avec l'essor d'Ajax, le mode de pensée émergent des requirejs et une terminologie spéciale ne sont plus nécessaires
Avec le développement du front- fin et la maturité de nodejs, Il est impératif de séparer le front-end et le back-end À mesure que les projets front-end deviennent de plus en plus complexes, un système de modules robuste et clair est très important, sinon vous serez dupé à tout moment. .

Les frameworks MV* populaires incluent désormais

Angular 2
Vue.js 2.0
React
React-Native

Remarque : le framework MV* fait généralement référence à MVC, MVP, MVVM, etc. Cela n’a pas vraiment de sens de comprendre ce que cela signifie spécifiquement.

Je suis personnellement optimiste quant à vue2 et son bucket familial

Ces frameworks nécessitent inévitablement un compilateur, un répertoire de projet et nodejs.

Je ne parlerai pas de Koa2, Express Ceux qui sont intéressés peuvent le rechercher eux-mêmes, mais cela s'apprendra plus tard

Il est donc impératif de commencer maintenant et de concevoir votre projet, ne soyez pas trop gênant. Bien sûr, je ne fais qu'indiquer le chemin ici et ne donne pas une introduction approfondie. Je présenterai comment commencer à concevoir votre projet dans un article séparé à l'avenir.

Direction du développement

Le front-end a toujours eu deux directions :

Direction de l'interaction
Données direction

Ni noire ni biaisée, c'est une route très difficile à parcourir dans des directions opposées. C'est aussi très insuffisant.
En bref, choisissez simplement un chemin qui vous plaît et respectez-le. Parlons de quelques tendances dans ces deux directions cette année.

Direction interactive

La chose la plus tendance en 2016 est sans aucun doute la réalité virtuelle. Vers 2013, les ingénieurs de Google ont promu une vague de webGL, mais il y a eu divers problèmes de performances et de rendu. . (En fait, je ne pense pas que cela ait encore été fait)
Mais quoi qu’il arrive, webGL deviendra certainement populaire.

Pour l'instant, ceux qui sont plus susceptibles de continuer sont
Three.js et celui de Mozilla A-frame,
en particulier aframe a fait beaucoup de mouvements récemment, et ils coopèrent tous avec threejs pour démarrer webVR
Mais je vous recommande quand même d'apprendre d'abord webGL, puis de jouer à webVR.

Beaucoup de gens ne savent pas pourquoi ils n'ont pas démarré webGL. En effet, de nombreux algorithmes de rendu à virgule fixe à base d'algorithmes matriciels tridimensionnels peuvent donner le vertige au début, mais n'ayez pas peur, essayez Blender, un. Logiciel de modélisation open source, threejs dispose également de ce plug-in d'exportation pour le logiciel. Bien que blen4web facture des frais, vous pouvez toujours vous y référer.

D'autres bibliothèques ont été abandonnées ou ne sont soudainement plus disponibles.

Bien sûr, les amis dotés de compétences et de ressources financières exceptionnelles peuvent essayer unity3D

Conseils : essayez-le sur un téléphone mobile. L'écran de bureau Retina actuel... webGL ne peut vraiment pas être utilisé. , sans parler du Web, le rendu 3D natif est difficile sur les écrans Retina, mais vous pouvez définir les paramètres pour un rendu 1x, mais c'est juste un peu moche.

Au fait, pensez-vous que si vous êtes interactif, vous n'avez pas besoin d'apprendre des choses orientées données ? Ne soyez pas naïf, vous devez encore apprendre ce que vous devez apprendre, alors je dis que le chemin n'est pas facile.

Direction des données

Il ne fait aucun doute que c'est la voie orthodoxe sur laquelle tout le monde devrait s'entendre, et c'est aussi une direction qui a été développée de manière très globale. La route a été pavée par beaucoup. prédécesseurs. Divers frameworks MV*, divers middlewares de nœuds côté serveur et le grand front-end ont soudainement englouti la majeure partie du travail que le back-end devait initialement faire.
Le développement front-end et back-end séparé est imparable, et la visualisation Big Data est toujours très populaire
Si tout se passe bien, les personnes dans cette direction bénéficieront de promotions et d'augmentations de salaire si elles apprennent D3.js.

Digression : Il existe quelque chose appelé 微信小程序 que vous pouvez étudier pour améliorer vos compétences.

En fait, si vous avez le temps, vous pouvez jeter un œil au projet Chrome PWA comme moyen d'améliorer vos compétences.

Avis personnel de l'auteur : Avec autant de choses à faire, il vaut mieux utiliser la fonction Ajouter à l'écran d'accueil. Parfois, j’ai l’impression que Chrome n’est vraiment pas populaire dans le pays.

Environnement professionnel

L'environnement d'emploi actuel est en fait très adapté au front-end d'entrée de gamme, et il a éliminé les trois principaux navigateurs cancer de Microsoft (Taobao a été le premier à ne pas prendre en charge IE8, bravo), même dans Même si le noyau du webkit mobile n'est pas parfait, vous pouvez toujours écrire beaucoup d'effets web que vous souhaitez. De toute façon, les objets clients de l'ancienne version du noyau ne peuvent vous apporter aucun profit, il vaut donc mieux abandonner directement. Parce que seules les dernières technologies peuvent vous apporter des avantages et un sentiment d’accomplissement.

Divers outils front-end apportent progressivement de la commodité au développement front-end Bien que le déploiement précoce soit en effet problématique, laissez-moi vous demander, si vous n'avez même pas cette patience, je ne vois vraiment pas où. votre avenir est.

Alors ce à quoi nous devons faire face est aussi un facteur de force majeure. Je ne suis pas là pour vous encourager à faire quoi que ce soit. Parfois, certains blocages et certains supports d'apprentissage sont bloqués par erreur. Assurez-vous de ne pas abandonner et de trouver un moyen de briser le blocus. Laissez-moi vous donner un exemple. Supposons que vous souhaitiez utiliser npm pour installer le module de nœud. Ensuite, le premier problème auquel nous sommes confrontés concerne les blocages de force majeure et les restrictions de QoS des opérateurs. Certains amis m'ont recommandé Yarn, je l'ai essayé moi-même et j'ai été bloqué dans le désordre.

Je pense que npm peut être utilisé ici. Merci beaucoup à Taobao d'avoir forgé npm. Cela s'appelle cnpm. L'adresse de leur site Web est npm.taobao.org. Je n'entrerai pas dans les détails de l'utilisation et verrai par moi-même.

Cependant, parfois cela ne répond pas à nos besoins, comme certaines opérations en ligne de commande.

假设你有 SS 这种梯子。
那么你可以在命令行下做一些临时的 proxy 设置：
MacOS 终端（假设你梯子的端口是1087）：

export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"

Copier après la connexion

Windows 命令行（同样假设你的端口如下）：

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

Copier après la connexion

然后就可以愉快地 $ npm xxxxx… 或者 ATOM 的升级 package 也能这么干。

题外话：ATOM升级package不顺利的话，用这个方法然后命令行

apm install [packagename]

Copier après la connexion

总结:掌握的框架 / 技能

要会部署nodejs环境

webpack
babel
gulp
postCSS的插件

CSS:Less, scss
HTML:pug, haml (可选)
Javascript: ES6, ES7
WebComponents (可选)
Vue.js / React (反正掌握一款MV* 框架是必要的)

对了还有即将大热的 hotfix，代表作有：阿里热修复技术，据说饿了么，腾讯也出了。没去关注，但我个人觉得这个 apple 不会坐视不理的，毕竟你可以随时服务端修改APP绕过审核，这种外道招数我觉得可以学学但不要认真。

其它：

Angular 2 被小编你吃了？
Angular 3 开发组告诉我，你又得像 ng1 转 ng 2 一样，从头学一次。 so…你们玩得开心就好，真的，我的项目连平滑升级都做不到，我真心没办法陪你们玩。

JQuery est-il en train de mourir ? Il va mourir ! ?
Frère, attends. Il ne mourra pas. Même s'il meurt, il sera toujours intégré au support natif. Si vous souhaitez passer de jQuery au natif, mon oncle vous recommande le site Web pour apprendre :

http://youmightnotneedjquery.com
https://github.com/oneuijs/You-Dont-Need -jQuery

Où est l'interaction convenue ? Ce que vous avez mentionné ci-dessus est tous orientés données. AE bodymovin (
https://github.com/bodymovin/bodymovin ) Allez apprendre,

le svg est indispensable,

le croquis est un outil magique,

webGL Différentes personnes ont des opinions différentes, mais depuis les deuxième et troisième trimestres 2016, les grands géants de la technologie accumulent de la technologie, vous savez. Mais je ne le force vraiment pas.

Ensuite, j'ai aussi appris les données.