2017 年，从零开始学前端开发，有推荐的技术栈么？

你后端玩玩架构啊，何必入前端坑....心累

来一起写 Vue 。

来一起写 React 。

Vanilla JS 框架

基础的就是： Webpack + Gulp + ES6(7) + Node
框架上一般就是： React > Vue > Angular ， Angular 在 1-2 年前很火，现在比较火的是 React ， Vue 以后会不会发展的比 React 好还不确定。还有一些其它稍微小众点的， TypeScript 、 CoffeeScript 等。
动态 CSS ： Less 、 SCSS

来一起写 angular 1 。

2 楼 3 楼，你们别闹，头像内容太应景了

iOS 没码可写的我正在啃 vue 全家桶

Apollo

说头像的你们,让我的小黄鸡如何是好

Vue 和 React 初阶小成 .. 更偏向 Vue SSR

我也是后端转前端，刚找了份前端工作，不过越来越讨厌 js 了，甚至开始怀疑自己的选择

前端从入门到放弃...

@mingoahz 我不是后台转前端，只是要跟上前端技术的发展而已

@Lpl 你说的这个和我目前的认识一致，不过要掌握起来估计还是要花不少时间

@gevin 我跟你一样是后端，在学 React ，看的 Fullstack React 一书，计划一个月看完，现在 w0% 左右

不准备以前端谋生，只求多一项实用技能

reactreactreactreactreactreactreactreactreactreactreact

@onlyice 20%，手误

先让楼上的打赢了, 你再学 (滑稽

react 好，还能用 react native 顺便搞定移动端

[what-to-learn-in-2017-if-youre-a-frontend-developer]( https://medium.com/@sapegin/what-to-learn-in-2017-if-youre-a-frontend-developer-b6cfef46effd#.6hrr7i38v)

刷到这个文章 仅供参考

前端从入门到转行

@onlyice Fullstack React 是在官方网站买的？

还是 Javascript + DOM 平台，学点 React ，最后再学点 Canvas .

@gevin 对，感觉写得还不错，它主页写的一些理由也是学习 React 的痛点（比如过时的博客文章，变化的最佳实践），所以我买了书

给你个建议 如果上 react 初学千万别学 redux ，这东西好，但是是毒品
你笨想也知道，形式语言与自动机在本科都是难点科目，运用在项目里是那么容易的么？何况很多人就算给你需求文档，你连状态转移图手画都画不明白，更别说抽象成代码了，还不是随用随加，加一段时间就乱了
很多人忽悠你状态管理多么多么好，实际上项目大了你上了 action ，你有 reducer 一样给你写出屎一样的代码
程序的可维护性和可维护性，工程来说，只跟程序员的水平和项目有没有坚持代码审查有关

但是话说回来， react 的设计的却灵活，即便不用 redux ，你以前所有的知识，事件、共享变量，都可以用，只要能拿到 component 的实例什么都不是事，有 prop 和 state 折腾明白一样搞大新闻
vue 就不行，设计太死，这几天做项目为了一个共享路由，没办法最后还是上了 vux ，所有路都堵死了

Vanilla JS + 1

然后可以适当学一下 React ，非常简单的构建 UI 的库。

@onlyice 嗯，免费的是最贵的

@murmur 设计太死是指？

@kokdemo 比如我想在组件之间动态共享变量除了用 vuex 的 store 还有别的方式么
共享变量可以，但是行不通，因为你没法在外部触发一个组件的 setstate 类似的函数，也拿不到实例， vue 没构造方法也不让你拿他的 this 指针

@murmur 刚做了一个项目。。。表示真的有时候很想上 redux 。。。。。一直不敢上。。。

一起写 vue ！！！

@murmur 如果是纯 react ，该如何共享变量？

vue2 削弱了自带的跨组件通信能力，比如事件只能从子往父传，数据除了 v-model 外只能从父往子传。如果有其他的通信需求：
1. 用自带的一个简陋的 event bus 机制来实现
2. 把子组件用 ref 暴露出来直接调用方法
3. 上 vuex

你说的共享变量的需求，其实就是没有 mutation getter action 的 vuex ，自己实现一个是非常非常容易的 static/img/doge.gif
http://codepen.io/jsq2627/pen/pNMPXz

千万不要碰 Immutable ， redux 什么鬼的。学学基础知识就好了，

初学者的话，还是 vue 好上手多啦，我个人也更喜欢 vue
react 好处是现阶段生态比较完整，功能稳定，坑相对少些

个人感觉等发展成熟以后会殊途同归，不排除 react 加入响应式属性的可能，也不排除 vue 取消 v-model 的可能。我感觉 vue 就是在 angular1 和 react 之间找到了一个合适的平衡点，所以大家都喜欢。

@jsq2627 纯 event 跨组件或者父到子肯定也要 event 了 或者用第三方实现的 context 让子节点有继承父节点作用域的功能

vue 相对简单,react 的 redux 和 react-router,结合起来要人命。

@aljun 上不上看项目的复杂度，最简单衡量项目复杂度的就是简单的模块叠加再多都是简单，这种东西开 n 个 iframe 都能随便搞定
如果你需要频繁的子-父交互，比如大量对话框，这种传统 event 反倒是最方便的，而且是理解起来没难度的
有些时候项目复杂是你设计复杂了，有的是项目经理强奸用户乱做一堆东西，真的东西太复杂，用户用着呢？
而且 event 用了这么多年，难调试么？源生的 event 加了个 target 就解决了。。
复杂的状态是什么， todo 这种，看着简单做起来可以做出花来，那种状态转移笔都写不清楚了，上 redux 妥妥的

前端说是发展得很快，很多新名词，但其实核心的东西还是那些，并不是很复杂。

首先是数据驱动 UI ， React 、 Vue 和 Angular 都是给 DOM 提供一层绑定，你不用再像 jQuery 那样 DOM 选取、 DOM 操作满天飞，只要设置好 data 到 UI （模板，或者 DOM ）的绑定，模板留事件处理的接口，这样你操作 data （纯对象操作，数组的增删等） DOM 会自动刷新。这些框架里最容易入门的要数 Vue 了，而且官方文档写得非常好，推荐。

至于其他组件化、状态管理的东西，先跳过了。

记得学一下 Javascript 的 ES6 语法，最常用的特性并不多，一篇文章足以概括。

@lijsh nice

@lijsh 组件化是绝对不能跳过的，一上来就掌握这个我认为是最好的，尤其是就这组件化把 Javascript 那套 prototype 反人类的机制批判一番
你是没见过写 java 的人去按照 java 的设计模式写出来的 js 是多么恶心，各种继承重载父类子类，实际上你只需要两个（ 1 ）抽象组件（ 2 ）抽象 utils

为啥没人推荐 Ng2

@finely 轮子太少了 已经被 react 和 vue1 碾压了 ng2 的话要搭配 ionic2 来用

@murmur 我认为组件化更适合团队作业的大型 SPA 。楼主只是想短时间内了解前端的风向，了解一下这些框架的思想，最简单直接的方法就是在通过 Vue.js 入门，掌握数据驱动界面的那一套。这甚至都不需要上 Webpack 和模块化，直接在旧项目中 jQuery 的页面引入 Vue.js ，做好 HTML 上 data 的绑定，留出事件处理函数的接口，就可以了。

我发现你这个 ID 老是在发表主观性很强、只针对特性项目不具备普适性的言论，感觉有点误人子弟。

react ， vue 两个都接触过，现在深入 vue 中， vue 上手容易， vuex 这些概念名词比 redux 简化了不少，一般的项目都够了，有多少人用 react 在写“大项目”的

一个 ember 提都没人提的年代。。哎

@lijsh 误人子弟么？ redux 这种东西活活把挺好的东西拆成三块，本来组件化已经拆一次了， angular 那种 mvc 严格分层的你们不喜欢，但是 redux 拆 action 和 reducer 你们就喜欢，搞不懂前端风向标
学习成本、维护成本、对团队整体实力的要求具备普适性么？还是你认为全天下的前端都有阿里腾讯的实力？
真要说普适性，我还不如推 jQuery

@lijsh 顺便补充一下， web component 这个概念早就提出来了，但是 vue react ng2 都没按这个标准做，大家都是自己搞了一套 component 的实现，你都用这个框架了还想跳过组件化，可能么
因为这三个框架无论怎么看都是在搞组件化啊，其实 react 那个是函数起名误人子弟，他要改成 React.createComponent 什么事没有（但是在生命周期里又是 componentShouldXXX 了），偏偏叫 createClass

@murmur 能不能回到楼主的问题上？用什么框架、走怎样一条学习路径难道不是看实际情景的吗？楼主是后端出身、 jQuery 套插件和 Bootstrap 肯定都懂，现在需求是怎样快速掌握前端风向。 Vue.js 是渐进增强的框架，最简单的情况下，你 script 引进 Vue.js ， new Vue 实例声明接管哪个区域和需要 watch 的 data ，就可以完完全全代替 jQuery 和那丑陋的 DOM 操作了。不比组件化那套简单得多？

等到了解数据驱动 UI 的理念再扩展，无论是组件化、状态管理都是顺理成章的事情。整个学习线路 Vue.js 都有配套，真真正正做到渐进增强。

Web Component 是标准没错，那 Polymer 为啥没人用？不还是看实际情况吗？ jQuery 、 Backbone 乃至早期的 Angular 都没组件的概念，就是因为大部分项目里根本不需要。需要组件复用的情况就是团队作业，前后端分离的大型 SPA ，你觉得一上来就让楼主掌握这个，真的合适吗？

@lijsh 合适，社招简历上没有 MVVM 框架的经验是硬伤

@lijsh 这里我需要确认一下， vue 那里的 watch 好像是计算属性，本身的 scope 还在 component 里，但是 ng 的 watch 是真的可以监控 js 源生变量的改动
我看文档这也犹豫了好久，理论上 vue 用 getter/setter 是应该能监控外部作用域里的变量的

那么反过来， react ，你在构造函数里直接可以拿到实例，直接可以调用所有成员函数，只要能调到 setStatus ，你在哪里都可以操控这个组件，就是“优雅”与否

然后呢， vue 的构造函数就是 vue.compoent 。。你又跟我扯组件化的概念。。

@murmur 可以自己实现一个 store ，把一个 object 当做一个 Vue 实例的 data 传进去，然后 export 出去。别的地方 require 这个文件的得到的 object 就会在 vue 里同时双向绑定
比如
```
var store = {}
new Vue({data:{store:store}});
module.exports = store;
```

收藏起来，搞不好明年我也要写点 js 东西……烦躁中……

？

@murmur Vue 官网上的教程，组件内容是放在最后的，单文件组件一节在进阶里，我想这表明作者的意图了先学数据绑定、响应式更新，再接触组件的概念。

不扯太远了，回归主题。我的建议是上 Vue.js 和 ES6 ，就跟着官网文档学可以了。无论是从旧有的 jQuery 思路跳出来，还是后期扩展项目， Vue.js 都能应付自如。

@lijsh 那么看完你们的讨论，我只要从 vue.js 入手就行啦？反正我也不是专业前端，也不打算转前端

Vue 大法好！

@lijsh 怎么找练手的项目？

欢迎入坑
http://www.infoq.com/cn/articles/2016-review-frontend

先上 jQuery ，真的。

哦，没看帖……那就，一起 vue 吧！

讲真，这种问题别上 V2EX 问。

Vue,官网首页写得很明白，渐进式框架,刚开始学可以不用管组件什么的，因为需要一个体系的知识。我在使用 Vue 半年后，才开始写组件的。

react 新手套餐 https://github.com/barbar/vortigern
不过 redux 可以用 mobx 代替吧

感谢 @HerrDu @fengliu222 的连接, 感谢楼上各位的讨论.谢谢.

正在学国产 avalonjs2

学什么栈啊，学好 Javascript 本身就好了

培养学习的能力和兴趣，公司用什么就学什么，工作之余学点自己感兴趣的就行了。同意楼上，学透 Javascript 就够了。

看楼主的介绍，水平应该停留在初级前端，楼主想要跟上现今前端的行业水平，不如先了解一下前端这几年都发生了什么

看红皮书《 Javascript 高级程序设计》和 CSS 好好学。

框架学 React 和 Vue ，生态学 Webpack, NodeJS, Gulp 等等，只要你忙的过来。。。都可以。

@zhghaha 你开发大点的纯 vue 不行的，通信会蛋痛。然后 vue 2.0 升级后，去除了周边的支持，都以 plugins 的方式支持，然后 vuex 添加完整了该有的东西： states, actions, mutations, getters ，其实在 vue 1.x 的时候我记得挺简单的，因为那时候 vuex 的声明是放入 new Vue 实例声明的属性中的。然后 vue 2.0 的时候，由于 getter 的概念与 computed 的概念冲突，所以取消了数据 state 的双向 observe ，然后现在的流程就变成了下面的样子：
1. 需要再 vuex 的 store 部分声明以下四个东西：
- state 初始化数据
- actions 执行的动作，这里对应 dispatch 异步模型
- mutations 突变的动作，这里对应 commit 同步模型
- getters 数据操作的方法，其实就是对应 ng2 Services 的大部分功能

2. 在 state 的同步上，需要引入声明的 getters 才能对数据进行映射 view 层

3. vuex 对外主要有两个钩子：
- mapGetter => 返回 getters 的方法，用于 computed
- mapActiOns=> 执行方法的行为描述

之前由于直接绑定给 actions 到当前 Vue 实例 this 上，所以出现重名的情况，这里依然避免不了。
接下来就是要执行操作，有两种方式：
- methods: { ...mapActions([]) } => 这里蛋痛的是又要重新声明一次 action type
- this.$store.dispatch or this.$store.commit => 这是本来的入口

然后上面的东西其实显得累赘和多余，对于 redux + redux-thunk 的用法， React 的用法其实更加简单
1. state 初始化数据，这个肯定需要的
2. actions 这里只是需要声明到 actions 文件
3. mutations 其实这个就没多大必要的了，你 action 过去，同步和异步都是可见的声明代码
4. getters 其实尤小右也说了，就是 function ，然后这里提取了概念，其实在 redux 中的 reduce 本身就是 function ， function 之间的调用其实已经不足以是一个概念，并且如果你不注意，由于 vue 的计算属性，你需要声明到计算属性中，其实这就相当于 React 的 setState 方法，当时从声明和代码本身来说， React 的更加直接暴力，直接在组件声明一次即可。

最后 map 其实这里 React 你只需要在 Containers 容器中进行操作，样板代码。最后顺势 props 的传递过程， vue 那边有 v-bind 和普通的方式，所以其实对于 dump 类的组件，对于外部更新的接口是好声明的，并不需要 bind 的概念。

由于这次升级，其实 vue 1.x 之前的简单优势并不明显，如果你是对视图层依赖，不引入过多， React 其实更加简单，可调试性更强，每一个环节都是入口声明，然后走 function 这个流程，直接 debugger ，对于 vue computed 那层其实对于调试已经是黑盒，如果 getters 那里你声明掉了，你会发现不报错，并且不知道从哪里调试入手。

好吧，我最后只是来安利一下 React~还有就是表示 vue 2.0 早已不是简单当初宣传的 vue 1.x 形态。对于中小型项目选择来讲意义并不大，工程化的解决方案至少都应该是中大型项目，比如以前网页很简答的时候，也没人说需要 MVC(Backbone) 之类的东西， jQuery 足以，都是代码量上去了，长期迭代，才会想用一些手段来做优化和迭代平稳的事情。

综上： vue 2.0 基本上最终是 React 。就像尤小右说过，需求的雷同，导致框架趋同，所以学 React 吧，方向是一直对的。

@Lpl TypeScript 2.0 七年才出 绝对是前端技术里少有的。。。

ts 和 ng2 才是适合符合人类思维的……

@lulin 目前 vue 开发的项目确实不太大，不过 vue 的拓展性，对于插件外部插件的支持也是他的优点吧。 react 的话基本都是自己的一套生态，想要用一个外部的东西很难整合，比如 Swipe 这种东西， react 的话也有相关的别人封装好的组件 ReactSwipe(当 slide 项为两个的时候会有问题)，但是难免会有很多 bug 而且很难更改，自己写一个封装的插件费时费力不是一般开发者能干的事，赶项目也没时间。。。当然原因还是基于 jsx 的原因这些插件必须得提供 jsx 语法支持的封装好的 react 组件给开发者调用。还有就是 react ， react-redux ， react-redux-router ， react-router 动态路由这一套整合起来的项目搭建新手肯定是无法完成的，目前网上的案例都 react 得教程和案例都是简单的，没看到能把这些完整结合起来的，也没有一个真正实现 react-router 的动态路由的案例(至少我没看到)。所以真正接触到这些东西发现 react 真是太难了，还有就是基于 redux 的异步封装，貌似 react 也没有好的提供的异步库，反正我当时用的时候没有，也好久没写了，也可能是我没找到，然后就是自己写的一个异步的中间件，实现还是挺麻烦的。所以无论如何对于刚接触的人 vue 都是极好的入门，简单实用， 很多思想可以从中学习，然后再回来看 react 就会简单很多，但是 redux 的坎是过不去的，建议看看 redux 的源码，反正也不多几百行。明白 redux-thunk 的作用，了解 react 的路由是如何与 react-router 结合，还有如何通过 webpack 与 react-router 动态路由实现按需加载，为什么 webpack 那么适合 react 或者说是 jsx 。

有后端经验选 Angular2 配合 TypeScript ，会更得心应手。

@onlyice 自己自学完 CSS 和 HTML ，又去学了些天 JS 、感觉不难，突然想做个静态网页，不用 js 那种，发现特别乱，一点头绪都没有，感觉就像前面一双筷子，不知道怎么用， 2 天（ 1 天 10 个小时）模仿了个百度和腾讯静态的，还各种问题，排版什么的我感觉也明白了，写网页就是写不好，初学者都这样么，还是我比较笨，还是方法不对，求指点，哎

@xiaoke0718 我觉得正常，本来前端的知识就多且杂，我一开始做 Web 也做得很差，现在依然不会

我觉得新手最大的矛盾还是，如果想快速上手，做点东西给自己看给自己信心，那么往往会学得不够系统，导致后面容易卡壳；如果想一开始就学得系统，又容易很枯燥乏味。。你需要自己把握好这个度，知道哪些资源是比较系统的，同时在学习过程中融合进实践