Ich habe gehört, dass Sie 2017 Frontend schreiben möchten?

Geben wir zunächst eine grobe Vorschau:

• Projektentwicklung

• Entwicklungsrichtung

• Berufliches Umfeld

• Zusammenfassung der zu beherrschenden Rahmenbedingungen/Fähigkeiten

---

Die Zusammenfassung ist Erster Platz:

• Das Frontend im Jahr 2017 ist nicht so viel grausamer, sondern standardisierter. In den letzten zwei Jahren kamen sie nach einigen Monaten verschiedener Schulungen heraus und beiläufig angebotene Zehntausende werden vom Markt eliminiert.

• Front-End-Entwicklungstools/Kompilierungstools nehmen allmählich Gestalt an, obwohl sie nicht so vollständig sind wie IDE-Umgebungen für hochrangige Programmiersprachen wie Object-C, Java, und C+, das sind sie. Das Konzept der technischen Modularität hat begonnen, in den Herzen der Menschen Fuß zu fassen. Diejenigen, die heutzutage ursprünglichen HTML-CSS-Javascript-Code schreiben, sind entweder kleine Projekte oder Anfänger.

• Front-End-Arbeit ist anspruchsvoller und die Richtung vielfältiger

---

Angenommen, ich möchte in die Grube von WEB vordringen Frontend-Entwicklung in diesem Jahr

Das Web-Frontend wird hier hervorgehoben, da viele iOS- und Android-Entwickler mittlerweile den Begriff „großes Frontend“ verwenden. Vor allem aufgrund des Aufkommens des React-Isomorphismus begannen viele von ihnen miteinander zu vermischen.

Lassen Sie uns zunächst das Frontend im Eindruck unserer alten Klassenkameraden überprüfen:

• Alte Antiquität: PS-Schnittbildexport

• Neuling: Code schreiben mit Adobe Dreamweaver

• Fauler Mensch: UltraEdit, Notepad++ …

Vielleicht können Sie, nachdem Sie sich damit auskennen, einfach etwas finden, mit dem Sie tippen und loslegen können Ich habe Code geschrieben, aber ich habe einen alten Front-End-Veteranen mit langjähriger Erfahrung getroffen. Er hat einfach einen Code von Hand geschrieben, weil er zu faul war, den Editor zu öffnen, und ihn dann versehentlich eingegeben der falsche Charakter, der fast das gesamte Projekt beendet hätte. Eine wirklich mächtige Person sollte jederzeit sehr vorsichtig sein. Bitte nutzen Sie die Fehlerprüfungs- und Korrekturfunktionen der IDE.

Anders als in der Vergangenheit müssen Sie sich, wenn Sie dieses Jahr mit der Web-Front-End-Entwicklung (im Folgenden als Front-End bezeichnet) beginnen möchten, zumindest nicht um allzu viele Browserkompatibilitäten kümmern, sondern Das bedeutet nicht, dass Sie sich überhaupt nicht darum kümmern müssen, es ist nur so, dass die Entwicklungsumgebung aufgrund des Aufkommens verschiedener Compiler nicht mehr so ​​problematisch ist wie zuvor.

Die größte Herausforderung für das Frontend in China ist:

Verzögernde Browserversionsiterationen.
Ich habe ein Mobiltelefon von einem der 500 größten inländischen Mobilfunkunternehmen gekauft, als ich sah, dass es mit dem Webkit-Kernel ausgestattet war. Damals war ich ziemlich schockiert. Schließlich ist der Android-Kernel auch 4.x. Ich weiß immer noch nicht, wie sie es geschafft haben, einen so alten Browser-Kernel in ein relativ neues Android-System zu stopfen, und ich weiß natürlich nicht, was das bedeutet. Selbst mit dem Qualcomm SOC-Basisband ist es sehr schwierig, das System zu aktualisieren, ganz zu schweigen von anderen SoC-Basisbändern.

Vor Ablauf der Frist war die Android-Version von WeChat ungefähr Chrome 35 (die neueste ist Chrome 55) und blieb ein Jahr lang unverändert, was der Stabilität dienen soll.

UC, Baidu und andere Shell-Browser sind sehr beliebt, aber sie rufen nur den Browser-Kernel des Systems auf. Sagen Sie mir nicht, dass die Ladegeschwindigkeit vom Netzwerk bestimmt wird Status und Systemhardware, hat das etwas mit Ihrem Shell-Browser zu tun? Ich weiß also nicht, was in ihren Dutzenden Megabyte an Kapazität geschrieben steht, und es ist beängstigend, darüber nachzudenken.

Kurz gesagt, im Desktop-Zeitalter stehen wir vor dem Krebsgeschwür von IE6, 7 und 8. Im mobilen Zeitalter stehen wir vor dem Krebsgeschwür von Android (nur inländisch)

Empfehlen Sie zwei Editoren:

• ATOMDer derzeit beliebteste Editor

• Sublime Text Ein gewissenhafter Redakteur, obwohl er bezahlt wird, ist er nicht obligatorisch, nur eine gelegentliche Erinnerung

• vscode Das Basis-Plug-in ist vollständig, aber das Update von Plug-Ins von Drittanbietern sind langsam

Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.

Die schnelle Entwicklung von Front-End-Frameworks bedeutet die kontinuierliche und schnelle Iteration verschiedener Plug-Ins. Obwohl ein großes, halbgeschlossenes Tool wie Dreamweaver in einem Aspekt sehr leistungsfähig ist, ist das offensichtlich Versionsaktualisierungen können nicht mit der Aktualisierungsrate mithalten, selbst wenn ich die neueste Version von 2017 installiert habe, um sie zu erleben, habe ich immer noch das Gefühl, dass sie für diese Ära nicht geeignet ist

Projektentwicklung

Vermeiden Sie bedeutungslose Fehlerberichte

Um ehrlich zu sein, ist es zwar gut, dass das Konzept der technischen Front-End-Entwicklung endlich populär geworden ist, aber tatsächlich steckt es noch in den Kinderschuhen und ist nicht freundlich damit Anfänger. Es ist nicht möglich, ein Projekt wie xcode direkt zu erstellen, es dann zu konfigurieren und dann den Code in einem Schritt zu schreiben. Obwohl die macOS-Plattform über CodeKit verfügt, das sich sehr gut bewährt hat, kann die Update-Intensität nicht mit der Entwicklungsgeschwindigkeit verschiedener Frameworks mithalten . Es kann nur als Referenz verwendet werden.

Jetzt müssen Sie beim Schreiben des Frontends zumindest eine lokale Betriebsumgebung (localhost) oder ähnliches erstellen. Dies ist eine sehr, sehr einfache Sache. Bitte nicht Doppelklicken Sie auf den HTML-Code, um eine Vorschau des von Ihnen geschriebenen Codes anzuzeigen. Es gibt eine Frage, die ich für Neulinge in einigen Gruppen hunderte Male beantwortet habe: XXXXX ist durch Access-Control-Allow-Origin nicht erlaubt , im Grunde werden 99 % davon durch direktes Doppelklicken auf HTML verursacht (die restlichen 1 % werden durch domänenübergreifendes HTTP usw. verursacht). .)

Da man localhost einrichten muss, ist die Bereitstellung von IIS, Betriebssystemserver usw. sehr mühsam, zumindest denke ich, dass dies der Fall ist. Und es handelt sich auch um kostenpflichtige Software und dergleichen, und die Kosten sind stark gestiegen.

Dank der Entwicklung von NodeJS können Browsersync und der Webpack-Entwicklungsserver jetzt schnell ein Projektverzeichnis bereitstellen, vorausgesetzt, Sie haben Node installiert.

Das Frontend schreibt CSS, HTML und JS nicht mehr direkt

Obwohl dieser Untertitel etwas übertrieben ist, handelt es sich um einen Trend.
Der Browser führt Iron Triangle aus: CSS, HTML, JS, diese notwendigen Dateien. Wenn der vorhandene Browser unverändert bleibt, werden Ingenieure in Zukunft diese Dateien immer weniger direkt schreiben und stattdessen ein Kompilierungstool wählen. Sie können es in Ihrer bevorzugten neuen Sprache schreiben und es dann in eine 铁三角-Datei kompilieren, die der Browser erkennen kann. Natürlich ist es nicht ausgeschlossen, dass der Browser weniger, scss, ts und andere Dateien direkt ausführen kann Zukunft. Das ist alles möglich.

Das bekannteste Beispiel ist, dass die Syntax von jQuery von ES2015 und sogar von New-Age-Browsern mit integrierter nativer Unterstützung übernommen wurde (es wurde sogar berichtet, dass Browser integriertes jQuery hätten)

CSS:

Jetzt werden die meisten davon über less, scss, sass usw. in gewöhnliche CSS-Dateien kompiliert.
Dann wird das berühmte postCSS-Plug-in verwendet, um verschiedene Browser-Präfixe zu vervollständigen.
Zum Beispiel:

In die weniger Datei schreiben wir:

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

Das kompilierte CSS sieht so aus:

.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;
}

---

Diese Effizienz, Wie lange brauchen Sie, um diese Vervollständigung handschriftlich zu schreiben? Vielleicht werde ich es vermissen. Unabhängig davon, ob Sie für das Gehalt verantwortlich sind, das Ihr Chef Ihnen gibt, Ihre Eltern für Ihr Leben oder Sie selbst für Ihren Körper verantwortlich sind, verwenden Sie bitte Kompilierungstools, um Ihre CSS-, HTML- und JS-Dateien zu schreiben.

Das Obige ist ein Beispiel für die Verwendung von CSS,

Es gibt auch Pug (früher Jade genannt) für HTML, HAML
Typescript für JS, CoffeeScript
Aber hier möchte ich über JS in sprechen Insbesondere die neuen Versionen von ES6 und ES7 sind tatsächlich sehr perfekt. Sie verfügen über die gesamte Syntaxmodularität und können dann über den berühmten Babel-Compiler in eine Version kompiliert werden ziemlich gut, aber ich persönlich bin der Meinung, dass es keinen Grund gibt, die Kosten für das Lernen im Team zu erhöhen, es sei denn, es ist Ihr persönliches Hobby.

Großprojekte kommen an MV*-Engineering nicht vorbei

Mit dem Aufstieg von Ajax sind die aufkommende Denkweise von requirejs und einige spezielle Terminologien nicht mehr notwendig

Mit der Entwicklung von Front- End und die Reife von NodeJS. Da Front-End- und Back-End-Projekte immer komplexer werden, ist ein robustes und klares Modulsystem sehr wichtig, sonst werden Sie jederzeit getäuscht .

Zu den beliebten MV*-Frameworks gehört jetzt

• Angular 2

• Vue.js 2.0

• Reagieren

• React-Native

Hinweis: MV*-Framework bezieht sich im Allgemeinen auf MVC, MVP, MVVM, usw. Es macht nicht wirklich Sinn zu verstehen, was es konkret bedeutet.

Ich persönlich bin optimistisch, was vue2 und seinen Familien-Bucket angeht.

Diese Frameworks erfordern zwangsläufig einen Compiler, ein Projektverzeichnis und NodeJS.

Ich werde nicht über Koa2, Express sprechen. Interessierte können es selbst recherchieren, aber es wird später gelernt

Daher ist es unbedingt erforderlich, jetzt anzufangen und Ihr Projekt zu konzipieren. Seien Sie nicht zu mühsam. Natürlich zeige ich hier nur den Weg und gebe keine ausführliche Einführung, sondern werde in Zukunft in einem separaten Artikel vorstellen, wie Sie mit dem Engineering Ihres Projekts beginnen.

Entwicklungsrichtung

Das Frontend hatte schon immer zwei Richtungen:

• Interaktionsrichtung

• Daten Richtung

Weder schwarz noch voreingenommen, es ist ein sehr schwieriger Weg, in entgegengesetzte Richtungen zu gehen. Es fehlt auch sehr daran.
Kurz gesagt: Wählen Sie einfach einen Weg, der Ihnen gefällt, und bleiben Sie dabei. Lassen Sie uns dieses Jahr über einige Trends in diese beiden Richtungen sprechen.

Interaktive Richtung

Das heißeste Ding im Jahr 2016 ist zweifellos VR. Um 2013 herum haben die Google-Ingenieure eine Welle von WebGL gefördert, aber es gab verschiedene Leistungs- und Rendering-Probleme . (Eigentlich glaube ich nicht, dass es schon fertig ist)
Aber egal was passiert, WebGL wird definitiv populär werden.

Im Moment ist es wahrscheinlicher, dass
Three.js und Mozillas A-frame weitermachen,
insbesondere aframe hat in letzter Zeit viele Schritte unternommen und sie alle arbeiten mit ihnen zusammen threejs zum Starten von webVR
Aber ich empfehle trotzdem, dass Sie zuerst webGL lernen und dann webVR spielen.

Viele Leute wissen nicht, warum sie nicht mit webGL begonnen haben. Viele dreidimensionale Matrixalgorithmen mit Festkomma-Rendering können die Leute am Anfang schwindelig machen, aber keine Angst, versuchen Sie es mit Blender Als Open-Source-Modellierungssoftware verfügt ThreeJS auch über dieses Export-Plugin für die Software. Obwohl blen4web eine Gebühr erhebt, können Sie sich trotzdem darauf beziehen.

Andere Bibliotheken wurden entweder aufgegeben oder waren plötzlich nicht mehr verfügbar.

Natürlich können Freunde mit herausragenden Fähigkeiten und finanziellen Mitteln Unity3D ausprobieren

Tipps: Probieren Sie es auf einem Mobiltelefon aus. Das aktuelle Retina-Desktop-Display ... webGL kann wirklich nicht verwendet werden Ganz zu schweigen vom Web ist natives 3D-Rendering auf Retina-Displays schwierig, aber Sie können die Parameter auf 1x-Rendering einstellen, aber es ist einfach ein bisschen hässlich.

Glauben Sie übrigens, dass Sie, wenn Sie interaktiv sind, keine datenorientierten Dinge lernen müssen? Seien Sie nicht naiv, Sie müssen noch lernen, was Sie lernen müssen, also sage ich, dass der Weg nicht einfach ist.

Datenrichtung

Es besteht kein Zweifel, dass dies die orthodoxe Route ist, auf die sich alle einigen sollten, und es ist auch eine Richtung, die von vielen sehr umfassend entwickelt wurde Vorgänger. Verschiedene MV*-Frameworks, verschiedene serverseitige Node-Middleware und das große Front-End verschlangen plötzlich den Großteil der Arbeit, die das Back-End ursprünglich leisten musste.
Die getrennte Front-End- und Back-End-Entwicklung ist unaufhaltsam und die Big-Data-Visualisierung ist immer noch sehr beliebt
Wenn alles gut geht, werden Menschen in dieser Richtung von Beförderungen und Gehaltserhöhungen profitieren, wenn sie D3.js lernen.

Exkurs: Es gibt etwas namens 微信小程序, das Sie als Fähigkeitsverbesserung studieren können.

Wenn Sie Zeit haben, können Sie sich sogar das Chrome PWA-Projekt ansehen, um Ihre Fähigkeiten zu verbessern.

Persönliche Meinung des Autors: Da es so viele Dinge zu tun gibt, ist es besser, die Funktion „Zum Homescreen hinzufügen“ zu nutzen. Manchmal habe ich das Gefühl, dass Chrome in China wirklich nicht beliebt ist.

Berufliches Umfeld

Das aktuelle Arbeitsumfeld eignet sich tatsächlich sehr gut für Front-End-Einsteiger und hat die drei wichtigsten Krebsbrowser von Microsoft eliminiert (Taobao war der erste, der dies nicht unterstützte). IE8, gut gemacht), auch wenn der mobile Webkit-Kernel nicht perfekt ist, können Sie dennoch viele gewünschte Webeffekte schreiben. Einige der Kundenobjekte der alten Version des Kernels können Ihnen jedoch keinen Gewinn bringen alle, also ist es besser, direkt aufzugeben. Denn nur die neueste Technologie kann Ihnen Vorteile und Erfolgserlebnisse bringen.

Verschiedene Front-End-Tools machen die Front-End-Entwicklung nach und nach komfortabler. Obwohl die frühe Bereitstellung tatsächlich mühsam ist, kann ich Sie nicht einmal fragen, wo die Geduld liegt Deine Zukunft ist.

Dann müssen wir uns auch mit einem Faktor höherer Gewalt auseinandersetzen. Ich bin nicht hier, um Sie zu ermutigen, etwas zu tun. Bitte geben Sie dies nicht auf und finden Sie einen Weg, die Blockade zu durchbrechen. Angenommen, Sie möchten npm verwenden, um das Knotenmodul zu installieren. Das erste Problem, mit dem wir konfrontiert sind, sind einige Blockaden aufgrund höherer Gewalt und QoS-Einschränkungen von Betreibern. Einige Freunde haben mir Garn empfohlen und wurden blockiert.

Ich denke, npm kann hier verwendet werden. Vielen Dank an Taobao für das Forken von npm. Es heißt cnpm. Ihre Website-Adresse ist npm.taobao.org. Ich werde nicht näher auf die Verwendung eingehen.

Manchmal entspricht dies jedoch nicht unseren Anforderungen, beispielsweise bei einigen Vorgängen unter der Befehlszeile.

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

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

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

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

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

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

apm install [packagename]

总结:掌握的框架 / 技能

• 要会部署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…你们玩得开心就好，真的，我的项目连平滑升级都做不到，我真心没办法陪你们玩。

Stirbt jQuery? Er wird sterben! ?
Bruder, warte. Es wird nicht sterben. Selbst wenn es stirbt, wird es trotzdem in die native Unterstützung integriert. Wenn Sie von jQuery auf nativ umsteigen möchten, empfiehlt Ihnen mein Onkel die Website:

• http: //youmightnotneedjquery.com

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

Wo ist die vereinbarte Interaktion? Was Sie oben erwähnt haben, ist alles datenorientiert.
AE + bodymovin ( https://github.com/bodymovin/bodymovin ) Gehen Sie und lernen Sie,

SVG ist unverzichtbar,

Skizze ist ein magisches Werkzeug,

webGL Unterschiedliche Menschen haben unterschiedliche Meinungen, aber seit dem zweiten und dritten Quartal 2016 haben große Technologiegiganten Technologie angehäuft, wissen Sie? Aber ich erzwinge es wirklich nicht.

Dann habe ich auch die Daten gelernt.