热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

专治前端焦炙的进修计划

本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到内里的几张配图实在美丽,随手翻译了一波。本文从属于笔者的WebFrontendIn

本文翻译自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…)


推荐阅读
  • 深入解析JVM垃圾收集器
    本文基于《深入理解Java虚拟机:JVM高级特性与最佳实践》第二版,详细探讨了JVM中不同类型的垃圾收集器及其工作原理。通过介绍各种垃圾收集器的特性和应用场景,帮助读者更好地理解和优化JVM内存管理。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文将介绍如何使用 Go 语言编写和运行一个简单的“Hello, World!”程序。内容涵盖开发环境配置、代码结构解析及执行步骤。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 数据管理权威指南:《DAMA-DMBOK2 数据管理知识体系》
    本书提供了全面的数据管理职能、术语和最佳实践方法的标准行业解释,构建了数据管理的总体框架,为数据管理的发展奠定了坚实的理论基础。适合各类数据管理专业人士和相关领域的从业人员。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了 GWT 中 PopupPanel 类的 onKeyDownPreview 方法,提供了多个代码示例及应用场景,帮助开发者更好地理解和使用该方法。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文探讨了Hive中内部表和外部表的区别及其在HDFS上的路径映射,详细解释了两者的创建、加载及删除操作,并提供了查看表详细信息的方法。通过对比这两种表类型,帮助读者理解如何更好地管理和保护数据。 ... [详细]
  • 本文介绍如何利用动态规划算法解决经典的0-1背包问题。通过具体实例和代码实现,详细解释了在给定容量的背包中选择若干物品以最大化总价值的过程。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
author-avatar
mobiledu2502882721
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有