简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  2017年はフロントエンドを書きたいと聞きましたが？

2017年はフロントエンドを書きたいと聞きましたが？

大家讲道理
大家讲道理オリジナル
2017-01-23 14:32:421467ブラウズ

まず、大まかなプレビューをしてみましょう:

  • プロジェクトエンジニアリング

  • 開発の方向性

  • プロフェッショナルな環境

  • 習得すべきフレームワーク/スキルの概要

小さな結び目前:

  • 2017 年のフロントエンドは、より残酷であるというよりも、より標準化されています。過去 2 年間で、さまざまなトレーニングを経て、何万、何万というものを気軽に提供した初心者が現れました。数カ月は市場から排除されるだろう。

  • フロントエンド開発ツール/コンパイルツールは、object-c、java、C+ などのトップクラスのプログラミング言語の IDE 環境ほど完成度は高くありませんが、徐々に形になってきています。エンジニアリングのモジュール性の概念が人々の心に根付き始めている今日、オリジナルの HTML CSS Javascript コードを作成する人は、小規模なプロジェクトか初心者です。

  • フロントエンドの仕事はより挑戦的で、方向性はより多様です

今年はWEBフロントエンド開発のピットに入りたいとします

Webフロントエンドが重視される理由これは、多くの iOS および Android 開発者がこの大きなフロントエンドのタイトルに参加しているためです。主に React 同型性の出現により、それらの多くが混在し始めました。

まず、昔の同級生の印象でフロントエンドを復習しましょう:

  • 古いアンティーク: PS カット画像のエクスポート

  • 初心者: コードを書くための Adob​​e Dreamweaver

  • 怠け者: UltraEdit、notepad++...

習熟してからタイプできるものを見つけてコードを書き始めてもいいかもしれませんが、長年の経験を持つフロントエンドの先輩に出会いましたエディタを開くのが面倒だったので、コードを確認せずに手書きで送信してしまい、間違った文字を入力してしまい、プロジェクト全体が終了してしまいました。 本当に力のある人は、常に細心の注意を払う必要があります。 IDEのエラーチェック・修正機能を上手に活用してください。

これまでとは異なり、今年 Web フロントエンド開発 (以下、フロントエンド) を始めたい場合は、少なくともブラウザーの互換性についてあまり心配する必要はありませんが、そうではありません。ということは全く気にする必要はありませんが、開発環境が以前とは異なるものになっているだけです。さまざまなコンパイラの出現により、過去には非常に多くの落とし穴がありました。

中国のフロントエンドが直面している最も深刻な課題は、

ブラウザのバージョンのイテレーションの遅れです。
中国のトップ 500 の携帯電話会社の 1 つから携帯電話を入手したところ、それが 2003 リリースの Webkit バージョンであることがわかり、当時は非常にショックを受けました。 Android カーネルも 4.x ですが、どのようにしてこのような古いブラウザ カーネルを比較的新しい Android システムに組み込むのかはわかりません。クアルコム SOC ベースバンド、システムのアップグレードは非常に困難であり、さらに他の SOC ベースバンドについては話さないでください。

WeChat の Android バージョンは、期限前はおおよそ Chrome 35 (最新は Chrome 55) で、安定性のためと言われている 1 年間変更されていません。

UC、Baidu、その他のシェルブラウザは非常に人気がありますが、それらはシステムのブラウザカーネルを呼び出すだけです。読み込み速度はネットワークステータスとシステムハードウェアによって決まります。シェルブラウザは関係ありますか？そのため、数十メガバイトの容量に何が書かれているのかわかりませんし、考えると恐ろしいです。

つまり、デスクトップ時代にはIE6、7、8のガンに直面しており、モバイル時代にはAndroid（国内のみ）のガンに直面しているということです

おすすめのエディター2つ:

  • ATOM 現在最も人気のあるエディター

  • 崇高なテキスト 良心的なエディター、有料ではありますが、強制ではなく、時々思い出させるだけです

  • vscode 基本的なプラグインは完璧ですが、サードパーティのプラグインの更新は遅いです

仕事をうまくやり遂げたいなら、まずツールを磨く必要があります。

フロントエンド フレームワークの急速な開発は、さまざまなプラグインの継続的かつ迅速な反復を意味します。そのため、Dreamweaver のような大規模で半クローズドなツールは、ある面では非常に強力ですが、バージョンの更新が追いつかないことは明らかです。最新の 2017 バージョンをインストールして体験した後でも、これは今の時代に適していないように感じます

プロジェクトエンジニアリング

意味のないエラー報告は避けてください

正直に言うと、フロントの概念はありますが、エンド開発エンジニアリングがようやく普及し始めました。これは良いことですが、実際にはまだ初期段階にあり、初心者には優しくありません。 xcode のようなプロジェクトを直接作成し、それを構成し、その後コードを記述することをワンストップで行うことはできません。macOS プラットフォームには CodeKit があり、非常にうまく機能していますが、更新の激しさはさまざまなフレームワークの開発速度に追いつきません。 . 参考としてのみ使用できます。

さて、フロントエンドを書くときは、少なくともローカルオペレーティング環境 (localhost) などを構築する必要があります。これは非常に基本的なことです。しないでください 以前のように、HTML をダブルクリックして、作成したコードをプレビューすることは、一部のグループの初心者向けに私が何百回も答えてきた質問です。 Access-Control-Allow-Originで許可されていますが、基本的に99％はHTMLを直接ダブルクリックしたことによるものです（残りの1％はhttpクロスドメインなどによるもの）ローカルホストを確立する必要があるため、その後、IIS、OSサーバーなどを展開します。これはすべて非常に面倒です、少なくとも私はそう思います。 また、有料ソフトなども含まれており、コストもかなり高くなりました。

nodejs の開発のおかげで、node がインストールされていれば、Browsersync と webpack 開発サーバーはプロジェクト ディレクトリを迅速にデプロイできるようになりました。

フロントエンドはCSS、HTML、JSを直接書くことはなくなりました

このサブタイトルは少し大げさですが、トレンドです。
ブラウザは Iron Triangle を実行します: css、html、js、これらの必要なファイルが変更されない場合、将来エンジニアはこれらのファイルを直接記述することができなくなり、代わりにコンパイル ツールを使用して独自のファイルを選択することになります。好みの新興言語で記述し、ブラウザが認識できるファイルにコンパイルします。もちろん、将来的にはブラウザが直接、less、scss、ts などのファイルを実行できる可能性も否定できません。 。 铁三角

最も有名な例は、jQuery の構文が ES2015 に吸収され、ネイティブ サポートが組み込まれた新時代のブラウザーにも採用されたことです (過去には、ブラウザーに jQuery が組み込まれているとさえ報告されました)

CSS:

現在、それらのほとんどは、scss、sass などを通常の CSS ファイルにコンパイルして

、有名な postCSS プラグインを介してさまざまなブラウザーのプレフィックスを完成させています。
例:

less ファイルでは次のように記述します: 

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}
コンパイルされた CSS は次のようになります: 

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

この効率性とこの完成度を使用すると、手動で書くのにどれくらい時間がかかりますか? もしかしたら見逃してしまうかも知れません。 したがって、上司から与えられる給与に責任がある場合でも、親に人生の責任がある場合でも、自分の身体に責任がある場合でも、css、html、js を記述するにはコンパイル ツールを使用してください。

上記はCSSを使用した例です

HTML用のpug(以前はjadeと呼ばれていました)、JS用のHAML
typescript、coffeeScriptもありますが、ここでは特にES6とES7の新しいバージョンについて話したいと思います。実際には非常に完璧です。
構文のモジュール化などに必要なものがすべて揃っており、有名な Babel コンパイラーを通じて一般的なブラウザーと互換性のあるバージョンにコンパイルできます。typescript は非常に優れていると思いますが、個人的にはこれが優れていると思います。個人的な希望がない限り、チームの学習コストを増やす必要はありません。

大規模プロジェクトでは MV* エンジニアリングを避けることはできません

Ajax の台頭により、requirejs の新たな思考モードといくつかの特別な用語はもはや必要ありません

フロントエンドの開発と nodejs の成熟により、MV* エンジニアリングは不可欠ですフロントエンドとバックエンドを分離するため、フロントエンドのプロジェクトはますます複雑になっており、堅牢で明確なモジュール システムが非常に重要です。そうしないと、いつでも騙されてしまいます。

人気の MV* フレームワークに

  • Angular 2

  • Vue.js 2.0

  • React

  • React-Native

注：MV* フレームワークとは一般に MVC を指しますが、 MVP 、 MVVM など、実際のところ、理解していてもあまり意味がありません。

私は個人的に vue2 とそのファミリー バケットについて楽観的です

これらのフレームワークには必然的にコンパイラー、プロジェクト ディレクトリ、nodejs が必要です。

Koa2、Express については話しません。興味がある人は自分で調べてください。しかし、それは後で学びます

ですから、今すぐ始めてプロジェクトを設計することが不可欠です。あまり面倒なことはしないでください。もちろん、ここでは道筋を示すだけであり、詳細な紹介はしません。プロジェクトのエンジニアリングを開始する方法については、今後別の記事で紹介します。

開発の方向

フロントエンドには常に 2 つの方向がありました:

  • インタラクションの方向

  • データの方向

インタラクティブな方向は黒でも偏見でもありませんが、従うのは非常に困難な道です。それも非常に不足しています。
要するに、好きな道を選んで、それに固執するだけです。今年のこれら 2 つの方向におけるトレンドについてお話しましょう。

インタラクション

2016 年に最も注目されているのは間違いなく VR です。2013 年頃、Google エンジニアは WebGL の波を押し進めましたが、当時はさまざまなパフォーマンスとレンダリングの問題が完全には解決されていませんでした。 (実際にはまだできていないと思います)
でも、何があってもwebGLは必ず普及します。

今のところ、フォローされる可能性が高いのは
Three.js还有 Mozilla 搞的A-frame、
特にaframeは最近多くの動きをしており、threejsと協力してwebVRを開始しています
しかし、ここではまだ、最初にwebGLを学ぶことをお勧めしますそして、webVR を再生します。

多くの人は、なぜ webGL を始めないのかわかりません。確かに、多くの 3 次元マトリックス アルゴリズムの固定小数点レンダリングは最初はめまいを引き起こす可能性がありますが、恐れることなく、オープン ソースの Blender を試してみてください。 Threejs にはこのエクスポート プラグインもあります。 blen4webは有料ですが、参照することは可能です。

他の図書館は放棄されているか、突然利用できなくなりました。

もちろん、優れたスキルと経済的余裕のある友人はunity3Dを試すことができます

ヒント: 携帯電話で試してみてください...WebGLは実際には使用できません、ましてやWebはネイティブ3Dです。 Retinaディスプレイではレンダリングはできませんが、パラメータを設定して1xレンダリングすることはできますが、少し見苦しいです。

ところで、インタラクティブであればデータ指向のことを学ぶ必要はないと思いますか? 世間知らずにならないでください。学ぶべきことはまだ学ばなければなりません。ですから、その道は簡単ではないと私は言います。

データの方向性

これが誰もが同意するべき正統な道であることは間違いなく、多くの先人によって非常に包括的に開発されてきた方向性でもあります。さまざまな MV* フレームワーク、さまざまなサーバー側ノード ミドルウェア、および大規模なフロントエンドが、バックエンドが本来実行しなければならなかった作業のほとんどを突然飲み込んでしまいました。
フロントエンドとバックエンドの開発の分離は止まらず、ビッグデータの視覚化は依然として非常に人気があります
すべてがうまくいけば、この方向の人々は D3.js を学ぶことで昇進や昇給の恩恵を受けるでしょう。

余談:スキルアップとして勉強できる微信小程序というものがあります。

実際、時間があれば、スキルを向上させる方法として Chrome PWA プロジェクトを検討することができます。

著者の個人的な意見: やるべきことがたくさんあるので、ホーム画面に追加機能を実行する方が良いでしょう。中国では本当に Chrome が普及していないのではないかと時々感じることがあります。

プロフェッショナルな環境

現在の雇用環境は、実際にはエントリーレベルのフロントエンドに非常に適しており、モバイルであっても Microsoft の 3 つの主要なガン ブラウザ (淘宝網は初めて IE8 をサポートしません。よくできています) を排除しました。 webkit カーネルは完璧ではありませんが、それでも必要な Web エフェクトをたくさん書くことができます。いずれにせよ、古いバージョンのカーネルの顧客オブジェクトはまったく利益をもたらさないので、直接あきらめたほうがよいでしょう。最新のテクノロジーだけが恩恵と達成感をもたらすことができるからです。

様々なフロントエンドツールが徐々にフロントエンド開発に利便性をもたらしていますが、初期段階でのデプロイは確かに面倒ですが、これくらいの忍耐力がないと本当に見えません。あなたの未来はどこにあるのか。

そして、私たちが直面しなければならないことも不可抗力の要因です。私はあなたに何かをするよう勧めるためにここにいるわけではありません。時々、いくつかのブロックやいくつかの学習教材が誤ってブロックされることがあります。これを諦めずに、ブロックを突破する方法を見つけてください。例として、npm を使用してノード モジュールをインストールしたいとします。次に、私たちが直面する最初の問題は、いくつかの不可抗力のブロックとオペレーターの QoS 制限です。何人かの友人が私に糸を勧めましたが、ブロックされました。

ここではnpmが使えると思います。npmをフォークしてくれたタオバオにとても感謝しています。 これは cnpm と呼ばれるもので、その Web サイトのアドレスは npm.taabao.org です。詳しい使用方法については、後で説明します。

ただし、コマンドラインでの一部の操作など、これがニーズを満たさない場合もあります。

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

jQueryは死につつある? 彼は死ぬつもりだ！ ?
お兄さん、ちょっと待ってください。 jQuery からネイティブに移行したい場合は、心配しないでください:

合意されたインタラクションの方向性は何ですか?上で述べたことはすべてデータ指向です。
AE + bodymovin (https://github.com/bodymovin/bodymovin) 行って学びましょう、

svgは不可欠です、

sketchは魔法のツールです、

webGLは意見の問題ですが、 2016 年の第 2 四半期と第 3 四半期、大手テクノロジー大手はすべてテクノロジーを蓄積しています。でも本当に強制はしません。

それから私は彼からデータを学びました。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フロントエンド面接に関するよくある質問次の記事：フロントエンド面接に関するよくある質問

関連記事

続きを見る