当前位置: 首页 > 科技观察

前端焦虑的学习计划

时间:2023-03-13 14:18:01 科技观察

最近也看了JoseAguinaga的博文2016年做前端是一种什么样的体验。这篇博文引起了广泛的关注和讨论,无论是在HackerNews上、Reddit或Medium,很多人参与了它的讨论。很早以前我也感受到了现在JavaScript生态的竞争,也专门调查了JavaScript库流行的现状,希望能在五光十色的库中找到一个真正适合大众的库。公认。但今天我希望更进一步,不只是抱怨现状,而是从我个人的角度给出一个逐步深入了解JavaScript生态系统的计划。(如果你还不懂HTML/CSS/JavaScript,可以看前端攻略:从路人甲到无敌英雄)。在本文中,我们将涵盖以下几个方面:现代JavaScriptWeb应用程序包含哪些部分?为什么不推荐jQuery?为什么React是一个不错的选择?为什么不需要先学习JavaScript?如何学习Redux?GraphQL解决了什么问题?下一步会去哪里?背景JavaScriptvsJavaScript在正式开始之前,我们首先要弄清楚我要说的和你目前所理解的是否一样。如果您在Google中搜索“学习JavaScript”或“JavaScript学习计划”,您可以获得大量的资料和教程来指导您如何学习。但实际上在我们真正的项目中,我们只是使用了一些比较简单的语法。换句话说,学习如何编写Web应用程序所需的80%可能包含在任何JavaScript书籍的前几章中。从另一个角度来看,真正的麻烦在于如何掌握整个JavaScript生态系统,其中包含无数的框架和库。但我相信这篇文章可以给你一些启发。JavaScript应用程序的构建块JavaScript状态:前端框架现状调查为了理解为什么现代JavaScript看起来很复杂,我们必须首先了解它是如何工作的。我们先来看一下2008年前后流行的所谓传统Web应用架构:1、服务器从数据库中获取数据。2.服务器读取数据并将其呈现为HTML。3.HTML文件发送给浏览器,浏览器将HTML转换为DOM树并显示。现在很多应用程序在客户端使用JavaScript来保证应用程序的交互性,但本质上浏览器是从接收HTML文件开始的。接下来,让我们比较一下2016年流行的所谓现代Web应用程序,通常是所谓的单页应用程序:你注意到区别了吗?与传统的Web应用相比,现在的服务器更多的是负责提供数据功能,渲染HTML文件的步骤则由客户端来处理。这种根本性的改变也会导致许多好的或坏的结果。好的一面是:对于某段内容,只发送数据比发送整个HTML文件要快得多。以单页应用为例,客户端可以刷新部分数据,而不需要刷新整个浏览器窗口坏的方面:由于现在数据的加载和渲染都在客户端,所以初始加载和渲染的时间会更长,这就是我们熟悉的状态管理工具令人厌恶的地方:随着客户端应用逻辑和交互越来越复杂,你需要掌握和服务端技术栈一样复杂的前端技术栈。Client-ServerSpectrum其实人才济济。接触现代前端开发技术栈的同学,尤其是刚从后端转前端的同学,都会有一个疑问。这么麻烦干嘛还要改?例如,如果用户想要得到一个2+2的结果,就完全没有必要将这个计算发送到服务器等待结果,浏览器完全有能力支持这种简单的计算。也就是说,如果你打算建立一个纯静态的内容站点,比如博客,那么直接在服务器端生成最终的HTML文件是一个不错的选择。但实际上,在很多web应用中,我们并不能很好的定义切分点,整个频谱是不连续的。不能先搭建一个纯服务端的应用,然后慢慢迁移到客户端。当你到达某个分裂点时,你必须停止这个迁移过程并重构大量代码,否则你将面临一个庞大且无组织的难以维护的垃圾代码库。这与不推荐使用jQuery的事实不谋而合。你可以把jQuery想象成一种磁带。房子修修补补固然好,但如果你想不断增加内容和功能,你会发现你的房子歪歪扭扭,到处都是狗皮膏药,越看越难看。大多数现代JavaScript框架更像是3D打印技术,在开始之前可能需要大量的准备时间,但它会给你一个更干净、更稳定的房子。第0周:JavaScript基础知识除非您是纯粹的服务器端应用程序开发人员,否则您必须了解一些JavaScript基础知识。如果您还不太了解,请不要担心,这里有一个很好的教程Codecademy的JavaScript课程。第一周:从React开始React的未来特性React入门和最佳实践在你了解了JavaScript的基本语法之后,我建议你接下来开始学习React。React是Facebook开发的开源UI库。也就是说,它着重于完成将数据渲染成HTML的步骤,也就是所谓的View层。不过需要注意的是,安利React并不是这里最好的库。这取决于项目,但我认为React是一个非常适合初学者的库:React不一定是最好的库React不一定是最轻量级的库,但它不是重量级的库。React不一定是最容易学的库,但并不难学。React不一定是最优雅的库,但看起来还是很舒服的。总而言之,React可能并不适合所有场景,但我认为它是所谓的最安全的,学习它不会伤害你。React还会指导您了解一些现代Web应用程序框架概念,例如组件、应用程序状态和无状态函数。***,React的整个生态系统非常繁荣。你可以在Github上找到很多React相关项目的可用组件,或者在StackOverflow上找到很多关于React的问题的答案。我个人推荐WesBos的ReactforBeginners课程。本课程涵盖了React从入门到高级实践的所有知识。第2周:你的第一个React项目使用Facebook的create-react-app快速搭建React开发环境在重构脚手架中掌握React/Redux/Webpack2的基本套路在这里我假设你已经完成了React的基础课程,如果你按照如果和我差不多,那么我猜你现在的状态可能是:我猜你已经忘记了一半以上的知识点你很想尽快付诸实践一个简单的个人项目也是不错的学习新技术的测试点。个人项目的范围可以从简单的单页应用程序到像Github客户端这样的复杂Web应用程序。在这里我建议您尝试创建一个简单的个人主页。但是我还是要补充一点,如果你打算用React做一个简单的静态内容页面,那就有点大材小用了。这里有一个很好的工具Gatsby,它是一个React静态网站生成器。在这里我推荐Gatsby作为你入门练习React的一个很好的参考项目,主要是因为:它提供了一个配置好的Webpack,可以为你省去很多学习配置的麻烦,并且可以根据你的动态设置所有路由目录结构HTML内容也可以由服务器呈现。生成的静态内容页面意味着你可以轻松部署在Github主页上第3周:精通ES6随着对React的了解越来越多,我很快觉得它很容易理解,但是还有很多语法我没有完全理解理解。比如我还不太熟悉ES6的一些常用特性:箭头函数对象析构ClassesSpreadOperator如果你对我不是很熟悉,那么建议花几天时间好好学习一下ES6的特性。如果喜欢上面推荐的React基础课程,也可以看看ES6forEverybody系列教程。但是,如果您正在寻找一些免费资源,可以阅读NicolasBevacqua的书PracticalES6。***,我还是要提一下,学习ES6的一个好方法就是复习和参考各种代码库,学习它们的用法和实践。Week4:TakingOnStateManagementThinking:我需要什么样的前端状态管理工具?你不一定需要Redux深入理解Redux:来自专家的10条Redux实战建议至此我们已经能够基于静态内容构建一个简单的React前端项目,但真正的Web应用项目不可能全是静态内容,他们需要从服务端获取数据,交给React进行动态渲染。最直观的做法是将数据逐层传递给组件,但这很容易导致整个系统混乱。例如,当两个组件需要显示相同的数据时,它们应该如何交互?这就是所谓的状态管理工具派上用场的地方。与将数据存储在组件中不同,您可以创建一个独立的全局单个ExampleStore来存储组件树的状态:在React生态系统中,最好的状态管理工具是Redux。Redux不仅可以帮你集中管理数据,还可以强制用户统一规范数据修改操作。你可以把Redux想象成一家银行。您不能直接进入您的帐户并修改帐户中的余额。您需要通过前台发出一系列指令来控制操作。Redux也是一样,它不允许你直接修改全局状态。您必须将Actions传递给Reducers,然后这些纯函数返回新的状态值。这样,整个系统的流程清晰可见、可追溯:同样,我们也在这里推荐一些Redux教程,以及一系列免费的Redux作者分享。Week5:BuildingAPIsWithGraphQLGraphQL初探:从REST到GraphQL,更完善的数据查询定义现在我们已经讨论了很多客户端开发需要的知识栈,但是对于有抱负的前端开发者来说还远远不够.且不说整个Node生态社区,我们还需要关注数据是如何从服务端传输到客户端的。这里重点介绍GraphQL,这是Facebook出品的一个标准,可以替代传统的RESTAPI。传统的RESTAPI允许用户通过暴露多个REST路由来访问某些数据集,例如/api/posts、/api/comments。GraphQL将多个后端REST接口集成到一个端点中,允许用户从一个端点获取所需的数据。Beyond&NextSteps章节内容有限。在我的调查中,我也提到Vue和Elm是优秀的框架。推荐有兴趣的朋友多了解下。此外,在学习了这些基础知识之后,你还可以学习以下方面的知识:服务器上的JavaScript(Node、Express……)JavaScript测试(Jest、Enzyme……)构建工具(Webpack……)类型系统(TypeScript、Flow……)Dealing在JavaScript应用程序中使用CSS(CSS模块、样式化组件……)用于移动应用程序的JavaScript(ReactNative……)用于桌面应用程序的JavaScript(Electron……)