专治前端焦炙的进修计划

本文翻译自A-Study-Plan-To-Cure-Javascript-Fatigue。笔者看到内里的几张配图实在美丽，随手翻译了一波。
本文从属于笔者的Web Frontend Introduction And Best Practices:前端入门与最好实践。

近来我也读了Jose Aguinaga的博文2016年里做前端是怎样一种体验。这篇博客激发了普遍的关注与议论，无论是在Hacker News照样Reddit照样Medium上，都有许多人介入到了它的议论中。我也是很早之前就觉获得了如今Javascript生态圈中的群雄逐鹿，而且我还专程对如今Javascript库盛行近况举行了观察，愿望能够在奇光异彩的形形色色的库中寻找到真正的为群众所接收的。不过本日我愿望能够更进一步，不单单议再埋怨近况，而是从我个人的角度来给出一个逐渐深切进修Javascript生态圈的计划。（假如你尚对HTML/CSS/Javascript并不相识，那末能够浏览前端攻略：从路人甲到英雄无敌）。而在文本中我们会触及以下几个方面:

• 一个当代的Javascript Web运用会包括哪些部份

• 为什么不引荐运用jQuery？

• 为什么React是个不错的挑选

• 为什么并不须要你起首学透Javascript？

• 怎样进修ES6语法

• 缘何与怎样进修Redux?

• GraphQL究竟处置惩罚了什么问题？

• 下一步又会走向何方

Background

Javascript vs Javascript

在正式最先之前，我们先要搞清楚我所要说的和你如今邃晓的是否是同一个东西。假如你在Google中搜刮‘Learn Javascript’或许‘Javascript study plan’，你能获得一坨一坨的材料与教程指点你怎样进修。不过实际上在我们的实在项目中，我们只会用到一些相对简朴的语法。换言之，能够你在进修Web运用编写中所须要的80%的学问点都包括在了任何一本Javascript书本的前几章。另一个角度来讲，真正贫苦的点在于怎样掌握悉数Javascript生态圈，这里包括了数不尽的框架与库。不过我置信本文能够给你一点启发。

Building Blocks Of Javascript Apps

• State Of Javascript：前端框架近况观察

为了便于邃晓当代Javascript为啥看起来怎样复杂，我们起首要邃晓其事情道理。我们起首来看下2008年摆布盛行的所谓传统Web运用的架构:

1.服务端从数据库中猎取数据。
2.服务端读取这些数据然后衬着到HTML中。
3.HTML文件被发送到浏览器，浏览器将HTML转化为DOM树而且展现出来。

如今许多的运用会在客户端运用Javascript来保证运用的可交互性，不过本质上浏览器照样从收到HTML文件最先。下面我们再比较下2016年盛行的所谓当代Web运用，典范的就是所谓的单页运用:

注重到区分了吗？与传统的Web运用比拟，如今的服务端更多的承担起是供应数据的功用，而衬着HTML文件这一步交由客户端举行处置惩罚。这一个根本性的变化也会致使许多或好或坏的效果，好的一方面呢:

• 关于某一块内容，仅仅发送数据会比发送悉数HTML文件快许多

• 以单页运用为例，客户端能够革新部分数据而不须要革新悉数浏览器窗口

坏的方面:

• 因为如今数据的加载与衬着放在了客户端，初始加载与衬着会消耗更长的时刻

• 如今须要在客户端供应一个存储与治理数据的处所，也就是我们如今所熟习的状况治理东西

恶心的处所:

• 跟着客户端运用逻辑与交互的日渐复杂，你须要掌握像服务端手艺栈一样复杂的前端手艺栈

The Client-Server Spectrum

实际上许多才打仗当代前端开辟手艺栈的同砚，特别是才从后端转前端的同砚都邑有个疑问，既然这么贫苦为什么还要举行改变？举个例子，假如用户愿望获得2+2的效果，一定不须要我们将这个盘算发送到服务端然后守候效果，浏览器完整能够支撑这类简朴的盘算。换言之，假如你是盘算构建一个地道的静态内容站，比如博客如许的，那末在服务端直接天生终究的HTML文件是个不错的挑选。不过实际上许多Web运用中我们并不能很好地界定这个支解点，而且悉数光谱并非一连的，你并不能先构建一个地道的服务端运用然后慢慢地向客户端迁徙。当到达某个支解点时，你不能不住手这类迁徙历程而去重构大批的代码，或许你就会面临一个复杂无序难以保护的渣滓代码库。

这一点与不发起运用jQuery不约而同，你能够将jQuery看作胶带一类的存在。关于屋子的修修补补异常不错，然则假如你想不断地增添内容与功用，你就会发明你的屋子歪七扭八，随处都是狗皮膏药，越看越丑。而大部份的当代Javascript框架则是更像3D打印手艺，能够在最先之前须要大批的准备时刻，然则它能还你一个更整齐稳固的衡宇。

Week 0:Javascript Basics

除非你是一个地道的服务端运用程序开辟者，你一定晓得些Javascript基础的内容。假如你还不是很相识的话那末也不须要忧郁，这里引荐个不错的教程Codecademy’s Javascript lessons。

Week 1:Start With React

• React的将来特征

• React 入门与最好实践

在你相识了Javascript基础语法学问以后，我引荐你下一步最先进修React。

React是由Facebook开辟而且开源的UI库，换言之，其专注于完成将数据衬着到HTML这一步骤，也就是所谓的View层。不过须要注重的是，我在这里并非安利React为最优异的库，这个是因项目而定的，不过我以为React是个挺不错的适宜初学者的库：

• React不一定就是最受迎接的库，不过其受迎接水平相称高

• React不一定是最轻量级的库，不过其谈不上是一个重量级的库

• React不一定是最简朴易学的库，不过其并不难学

• React不一定是最文雅的库，不过其看上去照样很舒心的

总而言之，React并不一定适用于一切的场景，然则我以为它是所谓最平安的，学了不吃亏。React还会指导你去相识一些像组件、运用状况与无状况函数等等当代Web运用框架的观点。末了，React的悉数生态圈异常繁华，你能够从Github上有关React的项目中找到许多可用的组件，或许在Stack Overflow上找到许多关于React的答疑解惑。我个人是比较引荐Wes Bos的React for Beginners这一课程。这课程包括了React从入门到最好实践的悉数学问。

Week 2:Your First React Project

• 运用Facebook的create-react-app疾速构建React开辟环境

• 在重构脚手架中掌握React/Redux/Webpack2基础套路

到了这里我假定你已完成了React的基础课程，假如你跟我差不多的话，那末我预计你如今的状况多是:

• 估摸着你已忘了一大半学过的学问点

• 你很想能够尽快付诸实践

尽人皆知，实践是进修某个框架的不贰法诀，而且最先一个简朴的个人项目也是进修新手艺的不错的实验点。一个个人项目能够是简朴的单页运用，也多是像Github客户端如许复杂的Web运用。这里我引荐你能够尝试着去做一个简朴的个人主页。不过照样要补充一句，假如你盘算用React做一个简朴的静态内容页就有点牛鼎烹鸡了，这里引荐一个不错的东西Gatsby，这是一个React静态网站天生器。

这里我把Gatsby引荐为你能够在开端实践React阶段一个不错的参考项目，重要是因为:

• 其供应了设置好的Webpack，能够省去你许多进修设置的懊恼

• 能够基于你目次构造动态设置路由

• 一切的HTML内容一样能够服务端衬着

• 天生的静态内容页意味着你能够简朴地就能够布置在Github主页上

Week 3:Mastering ES6

跟着我进修React的深切，我很快就觉获得了如今能够看得懂简朴的代码示例，不过另有许多语法尚不能完整邃晓。举例来讲，我还不熟习ES6中的一些罕见特征:

• Arrow functions

• Object destructing

• Classes

• Spread Operator

假如你跟我一样也不是很熟习，那末发起能够花个几天时刻来认真进修下ES6的特征。假如你喜好上面引荐的React基础课程，那末你也能够看下ES6 for Everybody系列教程。不过假如你想找点免费的资本，那末这里引荐Nicolas Bevacqua’s book, Practical ES6.。末了，我照样想提到下关于ES6的好的进修方法就是回忆参照林林总总的代码库，进修人家的用法与实践。

Week 4:Taking On State Management

• 思索:我须要怎样的前端状况治理东西?

• 你不一定须要Redux

• 深切邃晓Redux:10个来自专家的Redux实践发起

到这里我们已能够构建基于静态内容的简朴的React的前端项目，不过实在的Web运用项目不能够满是静态内容，他们须要从服务端猎取数据然后交与React举行动态衬着。最直观的做法就是将数据一层一层地通报给组件，不过这很轻易激发悉数体系的杂沓。比如当两个组件须要去展现一样的数据时刻，它们应当怎样交互呢？
这也就是所谓状况治理东西的用武的地方，不同于将你的数据寄存到组件内，你能够建立一个自力的全局单例Store来为组件树寄存状况:

在React的生态圈中，最著名的状况治理东西当属Redux。Redux不仅能够协助你集合治理数据，还能强迫运用者关于数据的修正操纵举行一致范例。

你能够将Redux设想为银行，你并不能直接进入本身的账户然后修正账户中的余额，你须要经由过程前台来发出一系列的指令掌握操纵。Redux也是如许，并不许可你直接修正全局状况，你必须将Actions传入Reducers，然后由这些纯函数来返回新的状况值。如许悉数体系的流程就清晰可见而且可回溯:

一样的，我们这里也引荐一些Redux 教程，以及免费的Redux作者的系列分享。

Week 5: Building APIs With GraphQL

• GraphQL初探:从REST到GraphQL，更完美的数据查询定义

如今我们已议论了许多客户端开辟中所须要的学问栈，不过关于有寻求的前端开辟者而言这远远不够。不谈悉数Node生态社区，我们还须要注重这个服务端的数据是怎样通报到客户端的。这里要偏重引见下GraphQL，一个由Facebook出品的能够替换传统的REST API的规范。

传统的REST API会经由过程暴露多个REST路由来许可用户接见些数据集，比如/api/posts,/api/comments。而GraphQL将多个后端的REST接口整合为单个端点，许可用户从单个端点猎取所须要的数据。

Beyond & Next Steps

章节所限，在我的观察里也提到Vue与Elm都是很优异的框架，引荐有兴致的朋侪能够相识下。别的，在学完了这些基础学问，你还能够相识以下几个方面:

• Javascript on the server (Node, Express…)

• Javascript testing (Jest, Enzyme…)

• Build tools (Webpack…)

• Type systems (TypeScript, Flow…)

• Dealing with CSS in your Javascript apps (CSS Modules, Styled Components…)

• Javascript for mobile apps (React Native…)

• Javascript for desktop apps (Electron…)