PM一年级生 - 英文学前端

已注销
517 阅读25分钟

前言

大概是8月中旬开始学习前端，中间的假期断断续续休息，到今天差不多一个半月，有了一点入门的样子，于是想做一个分享与自我总结，从零开始的心得体会以及自己觉得好的学习材料，希望给同样其他专业/行业的自学朋友们一点启发。

首先说一下我的背景，大学的专业是纯文科，而且是文科中的文科，毕业了都不知道从事什么工作的专业（笑），唯一的长处就是英文和日文都很好吧（但是因为不是语言类的专业出身，还是蛮难找工作的...）。毕业以后成为了一名小小的PM，初入职场，不敢称自己是什么“经理”。在工作过程中，因为经常要与开发组的前辈们交流，觉得自己还是有必要了解技术的，Git、MySQL、HTTP协议等，因为工作需要都一点一点在学习；学习过程中，发现自己真的很喜欢很喜欢Web Development这个课题，于是决定系统地学习前端知识。也是有很大收获，进行产品设计时，会尝试从开发角度看问题了。

入门资料是当时在GitHub乱逛，有一个Star超多的Repo，freeCodeCamp，浏览了一下，觉得是很系统的一套学习指南，就跟着慢慢学习了下来（HTML/CSS/JS及ES6部分）；有些了解以后，又慢慢Google啊YouTube啊查找了很多资料，跟着React的文档学习了React和Hooks，跟着Gatsby的文档搭了一个小小的博客（是一个demo，主要是熟悉Gatsby和GraphQL查询，以及styled-components的运用，比较简陋就不放上来献丑了）；说入门也算入门了吧，只是一下子接触了很多东西，还是有点overwhelmed的（？），自己要从零开始一个项目还是有困难呢。

关于以下个人推荐的资源：几乎都是英文的，部分有中文翻译。原因是我平时包括大学时候，查找资料一般都是查找外网，所以这次也是顺势都直接查了外网资料，再加上入门的freeCodeCamp是英文的，很多名词我到现在也只知道英文怎么说；学习之前看前辈的建议，大家也都说直接用英文学习，看官方文档，问题去StackOverflow会比较好，于是我也就这样做了。这些分享也是希望能给想寻找英文学习资源，但不知从何入手，或者不知哪些好，或者不知如何选择课程的朋友们一点启发，每一个我看过、读过、使用过的资料都会附带一个小小的评价。

Roadmap

  • Frontend Roadmap 流程图的形式介绍了前端的一些概念和学习路径，并画了一些分支，也有一些推荐和说明，可以对前端的方向有一个大致了解，学习一段时间后也可以看看之后要学什么，作为一个参考指南。我看到这个的时候是还没有开始学习，几乎所有名词都是看不懂的，现在回过头来看，好像都接触过一遍啦，还蛮开心的
  • YouTube: Traversy Media - Web Development In 2019 - A Practical Guide 与上面的差不多，是一个视频版的Roadmap，带有作者的一些想法和推荐等。Traversy Media是前端类蛮有名气的一个频道，作者更新也很多，内容有些我不太推荐，不过大部分还是不错的，而且标准美式英文，作为英文练习好像也...

JS and ES6+

入门课程

  • freeCodeCamp 带我入门的课程网站。fCC是一个免费的前端学习网站，社区也很活跃，每周还会寄送一个包含本周值得阅读内容的Newsletter给你。课程主要分7个模组，每个模组有5个作业，完成即可获得证书。教学是做题闯关形式，内容由浅入深，文字也很亲切易懂，像在跟你一边交谈，也会给你一些best practice之类的建议，不会做的题目看hint，hint里面也解说得很详细，还有一些延伸阅读。总之是非常推荐的学习网站。但是缺点是有些内容比较旧（比如一开始都是ES5的内容），有些内容还是不够深入（主要是一些Library方面，当然fCC只是把你领入门，需要自己另外找资料的）。也不必一步一步完全跟着学下来，可以只学自己需要的模块（比如学完React可以不用跟着学Redux，而且我学习React也不是用fCC）。另外它最后一个模组是“Coding Interview Prep”，里面有一些Project的小灵感，不知道做什么的时候可以看看；以及数据结构和算法（JS的模组里面也有涉及一些相对简单的题目，作为入门很不错）
  • fCC的JS课程推荐2个模块，ES6 和 Functional Programming 前者是中规中矩地学习ES6，后者作为FP入门蛮推荐的，一步步指导你怎么思考，还有一些methods选择上的小建议等

视频课程

  • Wes Bos - ES6 for Everyone Wes付费的ES6课程，我真的很感谢Wes，要不是他我大概现在还学不会React，后面会比较详细地讲到他。这个课程是因为学React之前查了一些资料，大多推荐好好学习ES6之后再学习React，不然你等于同时在学2样东西。ES6的话之前在fCC有学习过，但还是半懂不懂，一些简单的是OK，但比较复杂的，尤其是Promise相关，感觉是硬生生吞下去的，于是觉得不对，就开始找ES6的学习资料。Wes的教学风格比较喜欢，所以选了他的课。这个课程分21个模组，基本覆盖了ES6的方方面面，模组21是ES7和ES8的追加内容。Wes上课举的例子都很有趣，所以可以很轻松地看下来，每一个视频也都比较短，隔一段时间作为复习来看看都是很好的
  • Wes Bos - JavaScript 30 Wes大名鼎鼎的应该是这一个课程了吧，是免费的，我也是因为这个课程关注他的，不过我目前只看了一部分，后来专心学React去了。30天用Vanilla JS写30个小作品，没有框架没有库，对于初学和进阶都是很好的学习资料（不过基础还是要懂的）。Wes的这个课程就如他自己介绍的一样，把学习Web Development变成一件非常有趣的事情，而且就算是教学材料，他也是把CSS都写得很酷，明明有时候这个课主要是在教JS我还可以看CSS看半天的（笑）。在课程的Repo也有很多大家学完后写的心得可以参考；有一个人是用Vue实现课程内容，所以我也学着用React去实现它，学了还是要用一下的嘛，然后也准备写写心得
  • Udemy: Anthony Alisea - JavaScript Understanding the Weird Parts 应该是Udemy上最最推荐的课程之一了吧，深入浅出地介绍一些JS奇怪又很难理解的概念，scope/closure/prototype/this...等等，而且作者擅长用线框图，重要概念都有“Big Word Alert”，先解释概念再具体讲解。他的讲课方式真的让人很感动，怎么可以讲得那么清楚的，看完这个课程，初学JS后云里雾里半懂不懂的很多地方都能理解了。课程最开始有一句话：DON'T IMITATE, UNDERSTAND. 这句话也是很受用，学习是要好好理解，不要囫囵吞枣。缺点是ES6的内容很少，也难怪了是比较早的课程；另外就是作者语速实在很慢，倍速播放必须（我是用1.5倍，YouTube上有评论说起码放几倍速的我忘记了，是说笑的，没有那么夸张啦）这里是YouTube上前3.5小时的试看链接
  • Udemy: Andrew Mead - The Modern JavaScript Bootcamp 2019 这个课程是面向初学者的，从零开始，所以我挑着看了几个部分，比较有收获的是Promise async await这个部分，也是因为这个课我才突然顿悟了Promise是什么，Fetch如何使用，之前包括看完Wes Bos的课也是算不上理解的，只会依葫芦画瓢罢了。作者在Udemy也是比较有人气，但我个人算不上非常喜欢，他教学和讲解是很清楚很认真的，不过废话（？）会有点多，进度也比较慢，我比较喜欢直截了当的。而且是没有Wes讲课酷啦（笑）。见仁见智，对于初学者友好。

参考资料

  • MDN Web Doc & DevDocs 这两个应该大家都在用。不得不说MDN文档写的真的很好，一句话说明，参数返回值，示例，注意点，比较，polyfill... 就那么那么好用，没事情的时候随便翻一翻都能看得很开心。他们的教学模块也是写得很系统，每一个模块都有分等级，还有很多延伸阅读；而且因为是MDN会相对来说“权威”，因为MDN的Doc本来就是当指南来用的嘛。DevDocs把各家文档都整合起来，键盘快捷键用起来会比较方便，不过React的文档我还是喜欢直接去官方那边看
  • JAVASCRIPT.INFO 又系统排版又好看的一个参考网站，也是闲来无事随便翻看都能看得很开心，说明文字很细致，有小任务题目可以做，通常遇到不太懂的概念我会把这个和MDN Doc结合起来看
  • Modern JavaScript Cheatsheet 基本上是ES6新特性的集合，直观的示例与简要的说明，Note中会告诉你，什么时候会经常用到这些ES6新特性，并且有很多延伸阅读链接，作为学习ES6时的补充资料挺不错的

书籍

  • JavaScript The Core 2nd Edition 与其说书籍更像是一篇文章吧，短小精炼，总结了JS的核心内容，每一个概念都由一个定义引出，加以示例与Notes；很快就能看完，我也非常喜欢这种简明扼要的方式
  • Eloquent JavaScript 3rd Edition 这本书用来入门很不错，分为Language/Browser/Node三部分，每一节后有练习题；不过我是之后看的了，于是也是挑了部分学习中不太理解的看。有多种格式的电子书可以下载，不过网页版是可以动态编辑代码，比较方便
  • You-Dont-Know-JS 2nd Edition Kyle Simpson著作，第二版还未完成，不过也是可以看。读过几章，感觉上与JavaScript Understanding the Wierd Parts比较像，也是可以解答很多奇奇怪怪的疑惑，准备空下来好好看看
  • Functional-Light-JS 和 Mostly Adequate Guide to FP in JavaScript 两者都是Functional Programming相关书籍，可能前者对于入门更友好一点？这些也是我准备在后续学习过程中重点看的书籍

练习

  • CodeWars 很多语言可以选择，题目分难度等级，每个题目是一个Kata，有Rank和Honor系统，像在玩；每天做一两题，作为小练习

React

在框架上，我先选择学习了React，理由倒是蛮简单的，因为fCC介绍了React给我，虽然我跟着fCC没学懂...后来自己查了资料，一些框架的比较等，基本上国内和国外大家都一致认为Vue会比React要容易一些；刚好那个时候我处于初学React的挫折期，于是也想过要不要先学Vue，文档也去看了，写得真的好漂亮（PS我其实蛮早就知道Vue，因为Markdown编辑器用的是Typora，喜欢用它的一个模仿Vue文档风格的主题）；但因为国外React的社群还是更大，资源更丰富，看到Wes Bos也有React的课程，不相信自己会学不懂React...于是种种原因，还是坚持学下来了（最重要的一点是被React的文档感动到了，那么好的文档，尤其是教你怎么Thinking in React的几节）。下面会推荐一些自己觉得优秀的学习资料。

官方

  • Tutorial 制作一个Tic-Tac-Toe小游戏，学完对于props与state会有一个基础认识，因为是一步步的教学，所以也有教怎么思考，state该放在哪里，怎么lifting state up等
  • Docs 超级喜欢React的文档，写得像一篇篇博客那样，经常会给很多小建议，贴一些相关阅读，也有很多鼓励的话，比如你不用懂什么Webpack的直接开始吧，你不用一定要使用Hooks的可以在以后慢慢运用的，文件目录结构什么的不用思考太多按照你喜欢的就行，你不想看详细说明的话可以直接进入下一章节了...总之很有趣就是了。而且它的Main Concepts 是一步步的引入，非常系统，看完前一节再看下一节，循序渐进。我目前文档基本上都看下来了，比较推荐阅读Thinking in React 与Hooks的Motivation 这两个部分，前者是一步步教你拿到一个新项目要如何把它用React做出来，包括如何把设计稿分解成Components，如何定义一个完整且最小的state，如何判断state要放在哪里等，会教你在思考过程中问自己几个问题来得出结果，这些思考模式都是很受用的；后者是介绍他们为何引入Hooks系统，Class Components有哪些难题，Hooks可以如何解决这些难题，看完可以对自己为何使用Hooks以及Hooks的思想有一定认识。
  • Blog 官方的博客也有蛮多宝藏的，有很多思考、建议、推荐类的内容，最新的讯息也都是在这里

视频课程

  • Wes Bos - React for Beginners 超级推荐的一个付费课程，也是我之前说“很感谢Wes要不是他我就学不懂React了”的课程。算下来前前后后React“开始”学有三次，第一次是跟着fCC，第二次跟着官方文档，第三次跟着Wes Bos；前两次都是从一开始就卡住，一开始就完全不知道教程到底在干嘛，从头到尾都不知道在干嘛，从props就开始无法理解，一个页面放了那么多class，props pass来pass去...官方文档的Tic-Tac-Toe小游戏教程也是直接晕掉了，都不用看state...我觉得自己怎么那么笨呢。后来看到这个课程，抱着尝试的心态打开网页，就被project demo给吸引住了（这也是我说的Wes Bos的课有趣在，就算是练习作品他也会把CSS写得很酷，让人乐在其中）。这个课还有一个好处是，一边利用Chrome的React Developer Tools插件来辅助学习，让props和states等可以展示在Dev Tools里，帮助理解；于是我在这第三次“开始”学习中，终于知道React到底在干嘛了！并且是那种“啊原来如此”恍然大悟的感受；之后看文档巩固的时候，也真的能看懂文档在说什么了，从一开始看外星语一样到现在自己能看文档，这种感觉很好很好，甚至要被自己感动到，没有放弃太好了。这个课程也有涉及Routing/Firebase/Authentication等，算是很完整的教学了，不过不是非常深入，主要还是讲解React的（只不过也是在Hooks之前的课程，所以用的都是Class Components，但是对于理解一些React的概念很有帮助）
  • Udemy: Stephen Grider - Modern React with Redux 这个作者在Udemy评价非常高，这门课程也是所有React课程中排名第一的。我觉得他教得很好，也非常擅长用图文形式讲解，不过缺点也是语速很慢+比较务实所以快捷键之类的都不太用（不像Wes Bos快捷键啊Emmet啊用到飞），时间上有些浪费，但对于初学来说是很适宜的pace。我没有学React with Redux部分，因为觉得还不太用得到，Context和Hooks也能解决大部分问题了；不过还是有看他的关于Redux的介绍，非常简明易懂，用保险公司作比，把Redux Store的一些关键概念诸如action/payload/dispatch等都解释得很清楚，也帮助我后来很轻松地理解useReducer Hook了。这个课程最后也有涉及到Context和Hooks，不过关于这两个我更推荐下面The Net Ninja的免费课程
  • YouTube: The Net Ninja - React Context & Hooks 首先The Net Ninja这个人这个频道也不是一般的酷，他的视频Intro都用忍者风BGM，解说用的图文、字体等都很漂亮，自成一体，一看就是The Net Ninja出品，在Design方面也可以学习很多。这是他YouTube的一个Playlist，所以是免费的，而且很新，今年7月出品。内容上先用Class Componets介绍了Context的使用，Provider与Consumer，随后引入Hooks，介绍基本的useState/useEffect/useContext Hooks，也有教你怎么把useState转用useReducer，最后因为他是制作一个阅读列表的demo，所以有教运用Hooks存取localStorage。讲解方面很细致有条理性，也有涉及到VS Code的snippets插件，方便写代码。（PS他的视频我一般1.25倍速，因为他的说话方式、英文发音有几处咬字蛮有意思的，播放稍微快一点很有趣，总之是很酷的一个人）
  • Wes Bos - Fullstack Advanced React and GraphQL 这门课是因为我在用Gatsby的时候接触到GraphQL，所以想深入学习一下，但是对现阶段的我来说太难了。因为是进阶课程，还是Fullstack，所以对于前后端都要有一定基础（虽然他自己说可以不懂Node，课程中会有教，但我看下来觉得不太行，还是要先学Node的）。课程制作一个购物网站的demo，GraphQL贯穿其中，基本上现阶段一些最酷的Stack都涉及到了：Next.js/Apollo Client/Prisma/GraphQL Yoga...一些购物网站常用的Cache/Email/Authentication/Credit Cards/Pagination等都有教，还有一个很完整的Testing教学，非常全面系统。不过我目前看得晕晕的，还是要等再进阶一点再继续学

书籍

  • The Road to Learn React React的书籍我基本上没有看，因为官方文档就那么好了，包括这本书（或者这个系列，因为后续几本有GraphQL与Firebase的内容）的作者也是说，直接看文档吧（笑）。但这本书是官方推荐学习资料里有的，评价也是非常不错。内容是专注于React，没有Redux啊Database之类，它的目的也是想让你就用React来学React，而不要分散太多注意力，“好像同时在学好几样东西”。我大致浏览过一些，讲解很清晰，不太熟悉ES6也没关系，书中也有讲解，并且最后是制作一个完整的App，有涵盖Testing。我觉得可以在跟着文档入门之后再看这本书巩固，然后学着做一个完整的小作品。然后这个作者Robin Wieruch我本人非常喜欢，他的博客都写的非常认真、系统（而且长，内容很多），是很好的学习来源。推荐他的How to Learn React.js in 2019 有他给初学者的很多建议，包括学习步骤、推荐资料、前置知识等，以及这一篇JavaScript fundamentals before learning React，因为虽然熟悉ES6之后再学React会比较好，但是哪些是“一定需要了解”的，哪些可以“不那么了解”，看完这篇会有一些心得

其他

  • styled-components 其实不用React的时候，我一般蛮喜欢用Sass的，nesting真的很好用，但在React中其实纠结了蛮久到底该怎么写CSS好，到底要不要用UI Library（比如MUI）也希望一个Component，自己的样式跟自己的定义可以写在一起，所以采用了CSS-in-JS的方式，然后在这之中觉得styled-components更适合我，而且我本身很喜欢ES6的Tagged Template Literals，觉得很酷，所以就选用了这个（emotion 目前的API基本上差不多，两者都可以用）。但实际使用中还是有点手忙脚乱的...比如到底是每一个tag都分开styled一下好，还是像Sass那样的nesting来选择好，还是直接用css props好，media query怎么用会不显得重复，怎么管理这些styled-components等等，我也查了蛮多相关资料和社群讨论，best practice之类，希望得到一些灵感

  • Gatsby 因为我学习React后很想很想写一个自己的博客网站，一番查找后，大家都推荐Gatsby作为Static Site Generator的首选（包括React官方的推荐，而且React自己的官网就是用的Gatsby），于是爬上去看了文档，发现，文档也是写得好好！网站也很活泼，让人有兴趣学习，于是我就直接看了下去。推荐跟着Tutorial 一步一步学习如何基于文件系统搭建博客（当然前面的Setting Up及React教学部分，假如已经会了的话可以快速浏览跳过），看完后会对Gatsby的基础，包括plugins/GraphQL查询/Markdown变成网页的模版等有一个初步认识。随后可以看Recipes 及其他的Doc，看完后其实可以像模像样地搭建博客了（即使似懂非懂，也是可以做出成果的，初学的话是会很有成就感的，也更有动力继续学习）

  • HOW TO GRAPHQL GraphQL的学习网站，涉及基础介绍以及前后端具体应用，教你制作一个Hacker News的clone，可以选自己喜欢的语言与框架。我还没有开始学它，对于GraphQL的认识也仅限于Gatsby里面的查询语句；不过这个网站是很推荐的，将来系统学习的时候我会用它（大概继续Wes Bos的Advanced React课程之前，先学习这个）

  • SQLZOO SQL的学习主要是在这个网站做了很多查询语句的练习题，因为工作上有涉及到；大概就是初步了解吧，不过我觉得这个网站蛮不错的，也是循序渐进

  • regex101 Regex的好工具，虽然名字是101但它其实不是一个教学网站，But! 因为它实在写得太好看（输入Regex后会有非常漂亮的颜色标记，右边会自动生成对于这个Regex的解释，也是漂亮又清晰的标记），Test也很好用，而且右下角有Quick Reference，我学了Regex但其实有些记不太住，直接用这个工具也能分析一下自己在写些什么（笑）（btw这个网站是React写的，超级棒）

  • Udemy: Stephen Grider - Algorithms + Data Structures 数据结构与算法的课程，比较基础，作者是前面介绍过的Udemy上评价很高的一个老师，擅长图文解说，讲解清晰有条理。这门课评价是很不错的，但也有人说“过于基础”；我个人觉得前面算法部分可能都不能算“算法”，比较像是一些methods的介绍，假如对于JS很熟悉的话是不需要看的，而且也可以用比他更好的方法（因为在fCC的学习对于这些methods有非常多的练习，所以对我来说这一块内容并不是很有帮助）；而后面的数据结构部分我很喜欢，因为我确实也是初学，一点都不了解的，帮助很大。不过也是由于比较基础，涵盖并不全，比如Hash Table等就没有涉及到。作为入门是优秀的课程，所以也在此推荐，尤其是想用JS学习数据结构与算法的话。

关注&资讯

Podcast

  • Syntax Wes Bos和Scott Tolinski两人的一个播客，每周几期，有很多栏目，Potluck会解答很多听众留言问题，Hasty Treat会有非常多的tips心得建议推荐etc...还有很多专题，CSS的，React的，VS Code的，总之是了解新趋势的一个好去处。而且，这两个人，英文发音很好听很标准！Wes比较清脆Scott比较有磁性，当英文练习听好了（笑）。他们也会分享一些soft skills类的，可以学到很多，每次听都很快乐，我觉得他们是真的在热爱自己的事业与生活并分享给大家，其实学习是很快乐的一件事

Newsletter

  • JavaScript Weekly 基本上不想到处看太多资讯就订阅这一个周报就好，更新、趋势、推荐文章、热门讨论、框架与库等都有涉及
  • React Status 相比上面的专注于React与React Native，也是周报，因为我在学React所以这一个相对更贴近一些

结语

陆陆续续写了七千多字啦，本来只是想写一个小小的总结，没想到回顾过程中自己还是有蛮多想说的。下一步计划还是继续学习，并思考怎么把这些结合到我的PM工作中去。比较重要的有2点：

  1. 觉得自己在Design方面还是不太灵，作为PM有点不够格呢。有时候在想，比如这边你告诉我font-size多少、color是什么、hover效果如何、transition多久会好看，那我直接写就好了，但自己去想设计就会很难，不知如何系统化，完成效果也会不太好看；于是做练习demo的时候干脆就不写或者简单写CSS了，只写逻辑的骨架，反正我不是在练习CSS...就有这种想法。虽然这的确是UI设计师的工作，PM是提供一个雏形而开发是按照设计实现出来，但作为PM还是要努力学习Design的，于是：
    • 学习Design System，目前在认真看Google Material Design，因为他们的网站实在是赏心悦目，Guide清晰直观，描述简明扼要，作为写文档的参考也是很有价值的；同时也是想学习如何全面系统地思考设计一事，更好地与设计师交流
    • 学习一个设计工具，比如XD或Sketch；虽然PM其实本来也用这些工具，包括Axure RP等，但方向还是不一样的，PM画图的重点与目的并非为了画UI，而是为了更直观地表达文档内容，与团队成员共享（当然这是我的个人想法）。不过我也希望自己可以进行UI/UE设计，我写自己的小作品的时候也能得心应手一点，而不会为了界面美观烦恼
    • 继续学习CSS，尤其是animation方面；以及styled-components等相关，如何将之与一个React App更好地结合，让逻辑更清晰
  2. 虽然现在入门了，但就像我在开篇说的，自己从零开始一个项目还是有困难（不是一个玩具App而是完整的项目），需要思考的内容太多了，不知从何入手，而且我进阶的基本上也等于什么都不会，说什么项目好像有点自大。在看Gatsby的文档的时候，也有看到诸如SEO、PWA等概念，也是一知半解的。我相信学习这些对于PM工作一定有帮助，但其实我本职不是一个开发，在想自己其实慢慢来就好了，因为Web Development是我喜欢的课题，我只要保持学习的动力，在工作过程中慢慢学习就好了（虽然工作是PM...）主要问题在于没有一个Mentor，工作也并非直接相关，所以一切还是要看自己的，于是：
    • 保持输入与输出，每天学一点、写一点。下一步首先让自己更熟悉React，不要手忙脚乱，形成自己的方式，然后就是常用效果的实现方式啊什么情况下一般怎么做这种涉及具体应用方面的，也会学一下React Native。至于Vue，因为现在3.0了，觉得也是一个开始的好时机，文档那么漂亮我当然肯定是要看的（笑）
    • 思考我学习的这些，在PM工作中如何应用，如何更好地与开发组交流，尤其是针对前端的文档，如何撰写会更好；并且因为我喜欢关注最新的讯息，思考我可以如何把获取的资源分享给团队（希望不会嫌弃或者觉得我是门外汉不要说话）

结束。很多字谢谢愿意阅读到最后的你。w

avatar
文章
阅读
粉丝