30 岁前端,半路出家 2 年.想问问前端 V 友

[7Moon]

30 岁了,压力骤增. 从设计行业转前端刚两年,前公司主要做 H5 活动页,小程序,算是一个广告外包公司. 做了两年页面仔.vue webpack 都是只知道皮毛,没有实际项目经验.

想提升自己建立自己的一套技术体系,又不知道从哪开始. 现在能想到的是 vue webpack node.js

学的有点茫然了想问问各位,有没有好的学习教程推荐. 比如:

mk 网的视频 或者 适合初学的书籍 或者 边学边实战的学习资料 (毕竟能看到成果有成就感..

感谢感谢.

[wh1012023498]

## 1

[wh1012023498]

不支持 md。。那我贴 md 你自己慢慢看了。。

[wh1012023498]

= = 心疼不已
身为一个 PHP。。我来讲讲怎么学前端好了。。只涉及 WEB(在我看来移动端 /桌面端也是前端。。)

体系化的讲
- 基础: 迈不过去的算法,数据结构，计算机网络，三大编程范式(OO,OP,FP)（只要是啪啪啪，写代码，这些都是基础）

- 编程规范 /语言：ECMASCRIPT/ JavaScript,CoffeeScript,TypeScript(说起 ES，= = 我怀疑起以前学的 ActionScript3.0)
+ ES 版本 3，5，6，7，8。。。 可以了解下 https://github.com/tc39/ecma262
+ JavaScript https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
- 原型链（ JS 是基于原型链的 OO，另一种自然是大众所知基于类的 OO ）
- 事件循环机制
+ TypeScript http://www.typescriptlang.org/ (好评+10086)
+ CoffeeScript http://coffeescript.org/ (只用过 1，目前是 2，不过== 已经没落了。)

- Web 标记语言: HTML
+ HTML 标签
+ HTML5 规范

- CSS
+ CSS1/2/3
+ CSS 预处理语言：Less/Sass/Stylus/PostCSS

- 浏览器相关：
+ 浏览器行为
+ BOM/DOM
+ 浏览器渲染步骤

- 传输协议：当然是 HTTP 喽，听过 HTTP3 要出了。谷歌的 QUIC
+ HTTP 的各版本差异 1.0 1.1 2.0
+ SSL 隧道的建立
+ HTTP 的头含义与作用(= =重点)

- 工程化工具：WebPack/Babel/Gulp ,= = 自从 Node.js 出来，前端工程化跟花一样。
+ WebPack: 打包管理器，一切皆模块
- 常用配置项
- Loader
- Plugin
+ Babel: JS 预处理器，解决兼容性
+ Gulp: 任务管理器，Node.js 用的多点，，前端基本不用了

- 应用框架 /库：
+ Jquery : ssr 小达人，老当益壮
+ Angular: spa 三大框架之一，国内用的= = 似乎不多，刷版本狂魔
+ React: spa 三大框架之一，生态极佳，通吃 web/mobile/native。
+ Vue: spa 三大框架之一，火火火。。学习成本不高。
+ Meteor：跨端框架，知名，没用过不评价

= = 差不多这样，有缺漏，但是也够你学了

PHP 是世界上最好的语言！

[OSF2E]

试试利用已经掌握的东西去做一个小而精的“产品”，可以是个人主页或者网页控件一类的东西，突出视觉、交互、动画，设计出身比计算机专业出身的有优势，做的过程中查缺补漏。

不想局限于”展示性网页开发“相关工作的话，C/S 基础还是得了解一下的，若真想掌握 vue/webpack/nodejs 这些东西话，不学不行，当然这个是后话，上一步才是当前阶段的重点。

vue 或者类似的框架在有基础有经验的情况下，可以达到事半功倍的效果，基础或者经验不足的时候去接触这些东西，只会分散你的注意力，或者迷失在各种所谓“正确的开发姿势”一类的问题中，最终只能”画个瓢“。这里所谓的基础，指的是相对底层的 DOM/ES5/CSS 等语言类的工具，以及文档流模型、响应式设计、组件化设计等思想性质的东西，学好这些东西，学习框架的时候效率更高。

webpack 属于“辅助工具”，主要用来“提升开发效率”，什么时候需要提升效率？经过大量实践，有一套属于自己的开发流程，且自己能够清楚认识到哪些事务性的操作可以优化的时候，类似于 webpack 的工具就派上用场了。

最后总结一下，做前端，不要纠结技术栈对不对、好不好一类的问题，首要目标应当是走完一套完整的开发流程做出最终的“产品”，然后，通过大量实践不断优化，把这套流程整理成“理论（原理，思想，观念，概念）” —— 这正是所有前端框架或者工具诞生的标准流程，越成熟的框架或者工具，其“理论“更复杂更健全，换句话说，判断一个前端框架或者工具好不好，看它的文档中“理论”部分讲的如何即可得出结论。

至少我个人认为，好的框架或者工具，不会上来就让你啃用例（代码），而是让你学习并接受它的“理论”。

随便举两个例子，react 文档有一个章节叫作 MAIN CONCEPTS，webpack 有一个章节叫 Concepts，均放在文档比较靠前的位置，且毫不吝啬笔墨。

[meszyouh]

既然你曾是设计师，可以看看 视觉效果+交互动画 这个方向。

[fhsan]

先去看看培训的视频，建立基础的体系，然后网上找点资料学习。

[leafre]

都做了两年了，还没找到自学方法，估计不适合这行

[hirasawayui]

我还以为你是出家当和尚了。进来一看，没意思

[7Moon]

@wh1012023498 感谢. 我知道哪些东西需要学习.精力有限 只能学同类里的一种.（比如框架就选 vue 这样）
我不太知道的是 除了书本。有哪些网络上的资源值得学习（尤其是视频学习，有人讲解可以让我理解更清楚点.）
@OSF2E 感谢你的思路.
@meszyouh 感谢。 这个方向有想过，但是不知道这个方向以后职业规划怎么办
@fhsan 谢谢。现在就是这么做的。茫茫互联网，学习的资料不知道好坏

[7Moon]

@leafre 虽然不适合，还是得前行不是嘛.

[twohappy]

90 年的？
比如搞一个便宜点的服务器，不想新学语言的话，就 node 搭一个应用。
有啥新东西，都动手放上去。前端也好，服务端也好。再弄个 Electron，RN 再搞一搞
就可以去小公司当技术总监了
233

[twohappy]

然后跟前面提到的类似，先给自己提一个最简化的需求。然后把它实现。
然后把这个中间的过程写笔记记下来。
比如 这两天我看了看 Koa，发现在 17 年看的时候，去理解它是个啥东西还是有点懵逼的。现在就很简单。
为啥呢.. 假如这是个 RPG 游戏的话，之前我走别的任务线把服务端地图点亮了一些了。
回头看，各种东西就很好理解。
但是不管你路线是啥，点亮地图、点技能树的过程肯定是摸黑前行的。

一脸懵逼才是常态。要坚持摸，才能过河。
至于说页面仔做半年应该就有空自己搞东搞西的提高了，两年还没开始，要反省一下了。

[perry2008084]

这里是前端[2019 年的技术路线图]( https://github.com/kamranahmedse/developer-roadmap)，希望有所帮助

[ruyuejun]

https://github.com/overnote/javascript
按照上面的书籍推荐顺序学习吧，学完了如果还有时间，抓紧再看看数据结构与算法、操作系统、网络三巨头

[shew2356]

直接学 java，服务端走起，学好了，可以吃好几年的。
前端么，一年不学，基本淘汰！

[gaigechunfeng]

我是计科毕业。
但其实大学基本混过去的，感觉没学到什么东西。毕设都是室友帮忙搞的。

后来也是进入软件行业当中。
最近开始转前端，感觉还是比较容易上手的。我的经验就是多看官方文档，多看几遍。
到时我现在在学学设计，自己做产品，没有设计，做出来的东西不够好。

[mikulch]

设计不好吗？
感觉设计师很吃香。

[CabbSir]

@hirasawayui 太秀了

[7Moon]

@twohappy 感谢指导. 选了记个技能点..就是经验积累太慢. 来这就是问问前辈有没有好的学习建议和资料推荐.
@perry2008084 谢谢谢谢 我会好好看的
@ruyuejun 谢谢你 我会认真学的.

[7Moon]

@shew2356 java 对于我还是有不少难度的..不能丢了现在已经有的东西了

@gaigechunfeng 加油.想法可以可以的
@mikulch 室内设计.那时就是不大想做了

[shew2356]

@7Moon 只有不规范的东西才难，越规范的东西学习成本越低，我是认真的，再扎进一个行业里面就 OK 了