专治前端焦虑的学习方案

时间  2019-11-05
标签 前端 焦虑 学习 方案 繁體版
原文   原文链接

本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到里面的几张配图着实漂亮，顺手翻译了一波。
本文从属于笔者的Web Frontend Introduction And Best Practices:前端入门与最佳实践。javascript

最近我也读了Jose Aguinaga的博文2016年里作前端是怎样一种体验。这篇博客引起了普遍的关注与讨论，不管是在Hacker News仍是Reddit仍是Medium上，都有不少人参与到了它的讨论中。我也是很早以前就感受到了目前JavaScript生态圈中的群雄逐鹿，而且我还特意对目前JavaScript库流行现状进行了调查，但愿可以在奇光异彩的各式各样的库中寻找到真正的为大众所接受的。不过今天我但愿可以更进一步，不只仅再抱怨现状，而是从我我的的角度来给出一个逐步深刻学习JavaScript生态圈的方案。（若是你尚对HTML/CSS/JavaScript并不了解，那么能够阅读前端攻略：从路人甲到英雄无敌）。而在文本中咱们会涉及如下几个方面:css

  • 一个现代的JavaScript Web应用会包含哪些部分前端

  • 为何不推荐使用jQuery？vue

  • 为何React是个不错的选择java

  • 为何并不须要你首先学透JavaScript？react

  • 如何学习ES6语法webpack

  • 缘何与如何学习Redux?git

  • GraphQL到底解决了什么问题？es6

  • 下一步又会走向何方github

Background

JavaScript vs JavaScript

在正式开始以前，咱们先要搞清楚我所要说的和你目前理解的是否是同一个东西。若是你在Google中搜索‘Learn JavaScript’或者‘JavaScript study plan’，你能获得一坨一坨的资料与教程指导你如何学习。不过实际上在咱们的真实项目中，咱们只会用到一些相对简单的语法。换言之，可能你在学习Web应用编写中所须要的80%的知识点都包含在了任何一本JavaScript书籍的前几章。另外一个角度来讲，真正麻烦的点在于如何掌握整个JavaScript生态圈，这里包含了数不尽的框架与库。不过我相信本文能够给你一点启示。

Building Blocks Of JavaScript Apps

为了便于理解现代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

在你了解了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

到了这里我假设你已经完成了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

到这里咱们已经可以构建基于静态内容的简单的React的前端项目，不过真实的Web应用项目不可能全是静态内容，他们须要从服务端获取数据而后交与React进行动态渲染。最直观的作法就是将数据一层一层地传递给组件，不过这很容易引起整个系统的混乱。譬如当两个组件须要去展现一样的数据时候，它们应该如何交互呢？
这也就是所谓状态管理工具的用武之处，不一样于将你的数据存放到组件内，你能够建立一个独立的全局单例Store来为组件树存放状态:

在React的生态圈中，最著名的状态管理工具当属Redux。Redux不只可以帮助你集中管理数据，还能强制使用者对于数据的修改操做进行统一规范。

你能够将Redux想象为银行，你并不能直接进入本身的帐户而后修改帐户中的余额，你须要经过前台来发出一系列的指令控制操做。Redux也是这样，并不容许你直接修改全局状态，你必须将Actions传入Reducers，而后由这些纯函数来返回新的状态值。这样整个系统的流程就清晰可见而且可回溯:

一样的，咱们这里也推荐一些Redux 教程，以及免费的Redux做者的系列分享。

Week 5: Building APIs With GraphQL

如今咱们已经讨论了不少客户端开发中所须要的知识栈，不过对于有追求的前端开发者而言这远远不够。不谈整个Node生态社区，咱们还须要注意这个服务端的数据是如何传递到客户端的。这里要着重介绍下GraphQL，一个由Facebook出品的能够替代传统的REST API的标准。

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

Beyond & Next Steps

章节所限，在个人调查里也提到Vue与Elm都是很优秀的框架，推荐有兴趣的朋友能够了解下。另外，在学完了这些基础知识，你还能够了解如下几个方面:

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程