后端工程师如何学前端？

[PureWhite]

感觉整个思维的方法都不太一样。。。

看到了大家很多的讨论和建议，非常感谢大家，会自己再思考一下整个学习路线。

附上镜像问题： 前端工程师如何学后端？

[coffeSlider]

前提是你需要有基本审美观。

[misaka19000]

不同意楼上 审美观这种东西应该由美工来完成

[chenqh]

doit 虽然我也没学会

[coffeSlider]

@misaka19000 所以你的意思是前端只需要做公司项目需求？在没有美工的情况下，只能做一堆视觉污染物出来？

[mb4555]

@coffeSlider 每个人审美不同，你以为的良品可能是别人眼中的污染物

[XIVN1987]

bootstrap

[watzds]

都是计算机知识，不过前端 css 啥的不太有逻辑

[PythonAnswer]

ui 交互 多参考成熟产品

[feverzsj]

html,js,cs，有什么问题，想要什么控件，就 google 一下，说实话前端很简单，甚至会让你觉得弱智

[Philippa]

前端比较繁杂，每次想学 js 时就会发现竟然还要依赖浏览器？然后开始看 nodejs，然后发现怎么如此不严谨和丑陋？还是去看 Rust 吧....

[oswuhan]

面向“视图”开发，而不是“数据”。
尽可能精准的细节把控，包括元素、样式、动画、事件等，而不是像后端一样一段模板字符串渲染一下就完成视图开发了。
尽可能放弃“重用”、“模式”、“库或者框架”，视图“状态”千变万化，随时随地准备用原生的“工具”去实现你想要的视图。

用“做饭”这件事来类比一下，“后端”风格厨师解决的是把饭做出来的问题，只需要保证做饭效率以及能不能吃的问题就行，而“前端”风格的厨师需要精确的把控做菜的食材、调料、工艺等方面的要素，最终的目标除了效率、安全等方面的问题以外，重点是要满足食客的口味需求。

所以，这个世界上“真正的前端”很少很少，就像你身边“真正会做饭”的人一样少。

[oswuhan]

@Philippa @watzds PO 主是问如何学习前端，而不是问学前端是否会被人瞧不起。

[sfree2005]

是有不少区别。首先从最基础的 JavaScript 学起，一些重要概念例如闭包，异步呀之类的要弄清楚。然后 vue，react 和 angular 三选一，配合开源的组件库就可以做很复杂的业务系统了。或者也可以在网上买个 Admin template 玩玩，设计的东西 template 已经完成大部分了，你就合理地把各个组件堆在一起就好。

[woscaizi]

第一阶段 把 html css javascript 弄熟。
第二阶段 把 jquery bootstrap 弄熟
第三阶段 把 vue react 弄熟
第四阶段 把 nodejs 弄熟

[oswuhan]

@sfree2005 你说的这是 js 开发，不是前端开发

[sfree2005]

@oswuhan 前端开发主要都用 js 了吧，不用的太小众了吧。

[oswuhan]

@sfree2005 我的意思是“ js 开发”是“前端开发”的子集，或者说“ js 语言这类工具学习和使用的问题”是“前端开发这类工程问题”的子集。

[oswuhan]

@sfree2005 楼上大部分言论都是在讨论工具的学习和使用，而不是工程方案

[zhwithsweet]

前端工程师怎么学习后端？

[Weny]

后端写前端 那是天生就会的 看两眼文档的事

[oswuhan]

@Weny 你这个观点成立的前提条件是遇到任何前端需求都有对应的文档，或者有对应的框架、库、控件等东西。你这句话另外一层意思是“会开车就等于会造车”。

[ZSeptember]

前端样式很烦。。

[badcode]

https://github.com/nicejade/Front-end-tutorial 可能会太多

[an168bang521]

恬不知耻的安利一下自己的 js 笔记： https://github.com/zhubangbang/zhubangbang-javascript-notes

前端里 JS 是一等公民，先从 js 入手；

[coffeSlider]

@mb4555 呵呵，最搞笑的就是这种想法，十个人有六七个觉得凑活，就可以说是[基本]审美了，你偏要举个极端，那还有人觉得范冰冰相貌丑陋了。审美是建立在大多数人之间的，不是一个人说不好就不好。

[duan602728596]

不依赖任何库、任何框架，还原设计图及网页的特效，也就是基本功“切图”，打下 html、css、js 的基础。
html5 的基础知识要过一遍，对各个标签的作用，属性要记牢。
学习 es6、es7、es8。学习 node，因为 node 是前端开发环境的基础。
然后学习前端工具 gulp，会用就行。css 预处理器 sass、less、stylus 选一个学。回头检查并且思考你以前切图时的代码，以后切图就要用到 gulp 了。
html5 提供的很多 api 要了解，说不定某个特殊时刻就会用上，比如地理定位、IndexedDB、websocket、webgl 等等，无障碍网站等等。这些都是 html5 相关的知识。
学习 angularjs、react、vue + webpack。然后把之前学到的所有知识点穿插起来，结合到一起来使用，会有不一样的体验的。
之后还要学啥，等日后再说

[zjsxwc]

话说调 css，我是不想学的

[oswuhan]

@duan602728596 传说中的“前端必知必会”系列，早些年流行的版本是一大张思维导图，现如今就是这种碎片化的清单……把教科书背下来就能上清华北大……“切图”这个工种跟前端没关系……工具是工具，工程是工程……无力吐槽~~

[KuroNekoFan]

一般后端都会觉得 css 很烦，但是我想说 css 其实是很有趣的。我的一个原则就是，能用 css 实现的就不用 js 代码

[oswuhan]

@zjsxwc 之所以“调” css，是因为 UI 设计这步没完成，UI 确定之后再才能写 HTML/CSS/JS，否则要多花三倍以上的时间

[badcode]

https://segmentfault.com/a/1190000004652898
我是如何从零开始学习前端的

[jrtzxh020]

@duan602728596 工作一年多，表示切图都不会...

[oswuhan]

@KuroNekoFan 觉得麻烦通常是因为跳了 UI 设计步骤 —— 步子迈大了自然会蛋疼。设计师做高保真 UI，前端开发者把 UI 翻译成 HTML/CSS/JS，那些用代码凭空撸视图的开发者纯属自残。

[oswuhan]

@badcode 那么问题来了，什么是前端？

[wengjin456123]

打开文档开始学啊

[kisama12]

@KuroNekoFan 真大佬

[oswuhan]

@jrtzxh020 做了五年前端，无论是 web 前端还是 app 前端，从来没做过所谓的“切图”，UI 稿包含两部分内容，可以用代码写出来元素、样式、布局等东西，和不需要用代码写出来的素材文件，素材文件直接由设计师按前端开发规范导出为直接可以用在项目中的静态资源。

“切图”比较类似于“用汉字标注英文单词发音”这种奇葩的操作，业余至极。

[ocian]

mdn web docs

[NotNil1]

@KuroNekoFan 这个想法很不错

[371657110]

在后端眼里
难道不是掌握了 bootstrap, jquery, 厉害点的再加上 vue
就是个全栈了吗.

[pepesii]

这辈子都学不会 css

[hasbug]

我前端想学点后端···

[oswuhan]

@pepesii 前端开发本质上是用代码把 UI 稿翻译了一遍，当你摸着键盘却不知道写什么好的时候，很有可能是没有一份符合前端开发规范的 UI 稿摆在你的面前，当然，如果你自己能够设计出这样的 UI 稿就再合适不过了

[a1406]

做个项目

[aksoft]

有什么不一样的？都是打工的，是你不想学，心理排斥

[oswuhan]

@aksoft 可能是看了 26 楼这种前端学习清单吧，放着谁都要吓着

[aksoft]

@oswuhan 都是工具，有什么可看的，转型是心理问题。尤其是 js 和 各种框架、脚手架，发展太快，了解原理，看看文档就行，又不是搞科研。

[codermagefox]

@oswuhan #43 然而现在有多少公司能提供这样的 UI 稿？都是前端一把唆，辛酸泪啊

[oswuhan]

@codermagefox 观念是可以变的，可悲的不应当是我们这些真前端……凭良心说，近几年国内的（真）前端大环境发展神速，消灭伪前端指日可待

[oswuhan]

@aksoft 你这个观点参见我 21 楼的评论，哪有这么巧，你要解决的前端需求刚好有现成的“文档”给你看

[jjx]

主要遵循组件化开发, 后端搞前端还不是很简单的事情

不然, 你看以前这么多 windows forms/delphi/pb/vb/java swing swt applet/flash 等等 应用, 那个时候有前端的概念吗? 做 ui 还很 easy 的事情

至于说 前端开发

```
尽可能放弃“重用”、“模式”、“库或者框架”

```

只能说呵呵了

[Terry05]

后端工程师做出来的页面，有一句说一句，就是实现功能而已，虽然用了 bootstrap 的框架，连最基础的样式都不愿意去了解下，做出来的页面也就是功能完成了，JS 的代码，HTML 的代码，以及最终呈现出来的东西都是丑陋不堪

经历了 N 个团队，无一例外

[oswuhan]

@jjx 睁大眼睛看看标题，楼主问的是“学前端”，基本的先学爬再学走的道理。 “做 ui 还很 easy 的事情” —— 熟练使用各种 SDK/API/LIB，熟练复现、抄袭、借鉴、参考各种现成的 UI 方案，工具玩的再溜，也说明不了任何问题。

[ai277014717]

@Terry05 你需要一张设计稿，跟着工程师说，要做到一摸一样！！！不然前端做出来的也是丑陋不堪。

[lifeintools]

@Terry05 #52 这话就偏颇了。只要设计师给的设计好看。我按照设计师出的图 做东西。不会丑

[duan602728596]

@oswuhan 然而并不是前端必会系列，这是我入行以来，一路学下来、接触下来的东西，融合以后，有不一样的开发体验

[oswuhan]

@Terry05 更有甚者，学华为强行定义“全面屏”一样，强行定义前端，说 node 开发就是前端，说 js 就是前端的，说 template-render 就是前端的比比皆是……

[duan602728596]

@jrtzxh020 我第一年也是，就会用 html、css 和 jquery 切个页面，突然有一天逼了自己一把，全用原生 js 撸，磕磕绊绊然后就突然就通了，然后就打开了新世界的大门

[eslizn]

前端改改还行，让我自己切图？还是等这个吧 https://github.com/emilwallner/Screenshot-to-code-in-Keras

[oswuhan]

@ai277014717 #54 这又是另外一个问题。我们设计师作图之前会和前端约束设计规范，比如组件化、模块化、响应式、状态等问题，都在 UI 稿中前置考虑并实现，除了静态稿，我们还有动态稿，而且都采用成熟、流行的方案。UI 确定，前端代码就能确定 —— 所以只能说你们的设计师不够专业

[oswuhan]

@eslizn #59

什么是“切图”？ 做了五年 web 前端和 app 前端，从未做过所谓的“切图”。

想依靠 deep learning 让 UI 满足用户或者领导需求，估计还得多等等……

[eslizn]

@oswuhan 我工作几年，接触的 web 开发流程都是这样：
1.设计根据产品提供的交互稿设计 psd
2.重构根据 psd 来切图并生成对应的静态页
3.前端根据静态页和后端提供的接口来组织页面
4.后端提供业务逻辑接口

我说的切图是指第 2 步

[oswuhan]

@duan602728596 我的“必知必会”只是一种戏谑的说法，我对技术选型向来很保守，举个例子，我做了五年前端，经历了 IE6/CSS2/ES3 刀耕火种的时代，到 IE8/IE9 时代，再到现在的 web 前端与 app 前端全栈几个阶段，我用的第一个 node 版本是 node6.9.x，直到 2017 年我才接触 webpack，我很少做 hybrid 应用前端，安卓前端我只用 java。UI 方面，我一直认为 fireworks 是 sketch 在 windows 下的最好替代品，而且准确意义上说，fw 是 sketch 的前辈。

[Terry05]

@lifeintools 不知道你没有接触过做管理平台的系统，管理平台的界面顶多就是出个 UE 界面设计，评审过后，是自己去画页面的，管理平台通常美工不介入，只有做网站美工才会出静态页面

并不是我偏颇，而是情况基本如此

[jjx]

@oswuhan

是啊, 标题说的很清楚, 是后端学前端, 不是后端做专职前端

就像前端说要学后端, 并不是说要做专职后端

后端玩票 前端, 选好组件框架就 ok, 至于复杂的, 本来就是玩票而已

一个有能力的后端, 完全可以使用 extjs/element 等写出质量很高的应用来的

[learnshare]

HTML + CSS 先摸清楚（一两年）
JavaScript 再摸清楚（一两年）
DOM 摸清楚（一两年）
React/Vue/Angular 学一下（已过时）

实际上 Bootstrap + 某个框架的绑定库，就可以完成大部分任务了

[codermagefox]

@Terry05 #64 然后各种傻逼一样的需求处理数据处理到死

[huiyifyj]

提醒一下：前端会越学越难，而且要学的东西也一堆。

[EchoFUN]

确实，思维模式都很不一样。

[notreami]

@huiyifyj 最痛苦的是，学的这些，谁知道啥时候就过期了。。

[codevvvv9]

@Weny 哈哈，看两眼文档，你怕是不知道 js 的坑有多深吧

[Weny]

@codevvvv9 所以很久没写前端了 最多写点 vue hhhh 丢给前端去写 前端活可以说很脏了

[badcode]

@oswuhan 什么是前端？这个问题我还真不知道，还望指教

不过你资料里“无线应用开发，视觉与交互设计”
我想你可以回答这个问题

[xi2008wang]

学习一下 html 各个元素，最重要的是 div。

再开始学习 div 布局和 css 布局。

然后上 js，jquery，vue

[no1xsyzy]

虽然现在 FE 基本是指 Web FE，但 @oswuhan 考虑到的是全部类型的 FE 吧。
照这种分类法，UI、UE 也都是前端的一部分。

[jrtzxh020]

@learnshare html 和 css dom 要是一两年才弄懂 建议还是回家种田算了。。。

[learnshare]

@jrtzxh020 种田也需要十年经验的

[codermagefox]

@jrtzxh020 #76 CSS 修成正果的好像就一个张鑫旭吧...

[Xrong]

学不会已放弃，CSS 实在是太难了。

[choulinlin]

很多后端人员最大一个障碍 就是看不起 html css 一个劲钻研底层 各种技术 以为那样就能熬出头 会有很大改变
钻研各种技术完全错误的
等你一个人单干就知道了 前端很重要
讲难听点 前端好看好用 客户才会喜欢

[twogoods]

是的，css 学不会....

[e9e499d78f]

我就是想学切图。。

[q397064399]

@choulinlin #80 前端可以包出去，核心业务逻辑 基础设施 不能包出去

[choulinlin]

@oswuhan 其实我想增长设计能力 自己可以设计图标 哪个工具最好 fw, sketch ,ps, illustrato?

[oswuhan]

@choulinlin 前端 UI 以矢量设计为主，矢量设计能够让设计师更精准的实现各种设计规范，Ai 太重，Ps 的主要功能并不是矢量设计，Fw 过气了，现在的主流 UI 工具是 sketch，如果仅仅只是想做 icon 的话而不是完整的 UI 项目的话，AI 更合适。

[oswuhan]

@no1xsyzy 我主职是货真价实的前端程序员，而不是设计师，我强调 UI 和 UE，主要是针对“如何进行前端（工程）开发”这个问题来讲的，前端（工程）开发过程中，前端程序员需要与设计师协作，前端程序员在写代码之前，需要先由设计师提供符合前端开发规范的 UI 或者 UE 稿，而不是用市面上流行的开发工具“凭空”做开发，我重点阐述的是开发流程规范化的重要性。

[oswuhan]

@eslizn

关于“切图”，参考我 37 楼的评论。

“切图”、“前后端联调”、“调 CSS ”、“ js 特效”等等个性鲜明的词汇，在不规范的前端开发流程中的出现频率很高。

设计师需要和前端约束设计规范，前端和后端需要约束接口、数据模型、静态资源导出等方面的规范，一旦省了这些步骤，就会有人不得不去做一些本不属于当前步骤的工作，甚至出现整个流程反复走几遍的情况，效率低下，工作流程中的所有人都疲惫不堪。

[amanbolatbalabek]

我也最近遇到了同样的问题再说不想再花时间新的技术也不要求审美所以开始找合适我自己思维的框架。
写 spa 的话可以用 mithriljs 再加 tachyons css + parceljs （简单的项目不需要像 webpack2-3 写任何一行 config ）。这样不需要分开看 css 和 js+html，而是直接写 js+html+css。
我没多少前段经验所以觉得找适合自己的工具比较重要。

[halden]

其实就现在前端的发展状况而言，需要问的是前端工程师如何学习前端。。（误）各种框架以及对应的脚手架、构建工具、打包工具，甚至是自动化任务管理云云真的是看得我头都大，参考 t/310767

题主其实没说目的是啥，是学来马上用呢还是一步一个脚印走真的学好

看到有人说不需要了解 js 闭包或者异步那你只能是做最简单的页面，都 2018 年了你说你不会 promise 还是个好前端我是不信的，面试直接 gg

至于好看不好看的问题，要看有没有设计师以及你做出来的东西是给谁用的。。

---------------------------------------
通用的话 html + css + js 这是最基本的，

html - 就那几个 tag 一口气都能给你数完，没啥好偷懒的都学了吧。会的标准是知道什么时候用什么 tag，然后怎么组合 div 会使得在写 css 的时候更具有适应性和延展性，SEO 是再往后的事了

css - 常用的各种属性都得会，用的时候多 google 难度不大，伪类伪元素之类的你得知道有这么个东西，什么时候用得懂，动画的话如果不是专业前端基本上看过就够了。剩下的应该就是适配问题了，以后用到 ui 框架的时候可解

js - 语法的话挺好学的，常用方法都得会。然后和浏览器相关的原生 js 都得过一遍，什么 window、document 之类的，要会操作 DOM。jquery 的话可看可不看，这东西只会用得越来越少

以上算你入门，还想听的话我再给你讲进阶

[secondwtq]

@halden 闭包和 Promise 本来就不是前端专有的东西 ...

[ericgui]

@coffeSlider
@misaka19000 二位说的都对，然而一个网站长的咋样，后端工程师最多可以整的不丑，但很难会有什么美感。

[wzw]

@learnshare #66 为什么说 VUE 过时呢? 感谢你耐心的解答一下, 因为我正准备学 VUE

[halden]

@secondwtq 确实不是，但这和我说的并没有冲突，我说的是现在的前端得会这些

[abcbuzhiming]

@coffeSlider 完全不同意，你说的那叫 UI 设计，前端讲的是实现
@coffeSlider 视觉污物？在计算机领域，首先是功能实现，然后才谈是否美观，你还真以为一个功能良好的界面一定需要很好的美术吗，美术上简陋的界面一样能完成良好的用户体验，美观本质是锦上添花，不要本末倒置了
@KuroNekoFan 你是真前端大佬，知乎有个帖子专门系统的讲过，CSS 其实是很难的，然而现在即使是专门做前端的，很少有人系统的研究 CSS，他们基本都是蜻蜓点水一般玩玩 html+css，然后就开始 js，然后就是花里胡哨的各种前端框架去了。我个人认为要看一个前端的水平到底有多厉害，其实就是看对 CSS 理解有多深，js 啥的都是添头，上面还有提面向视图，我说，MVC （ MVVM ），视图绑定这些玩意后端玩了不知道多少年了，还需要重新跑前端去学一遍吗？前端牛就牛在 CSS。深就深在 CSS

[keventseng]

其实，就看是想要单纯的学前端还是晋级到全栈。

[learnshare]

@wzw 指的是多年以后

[coffeSlider]

@abcbuzhiming
1.[基本]审美观，难不成你觉得 UI 设计只需要基本审美？

2.一款商业产品，界面 UI 和美观度占重要地位，绝对影响前端业务代码逻辑，完全不敢苟同一款丑陋的界面能给大多数人带来好的体验，可以参考 12306。

3.你在给别人回复中提到 css 比 js 重要，在我的理解中，这和你对我的回复有些自相矛盾。

4.如果前端界面完全依赖 UI 设计，那么其实 css 之类并不需要理解太多，让美术多出点图，js 绝对能够应付所有情况。

很多人无法理解前端为什么需要有基本审美，我的解释是:
只有你能设计出，大多数人觉得还凑合的插件，才好意思放到 jQuery 之家上赚点积分啊！ 233333...

[FBI warning] 对于做前端从来不做或用插件的大佬，当我没说。

[movistar]

@oswuhan 不同意你说的这个比喻
"用“做饭”这件事来类比一下，“后端”风格厨师解决的是把饭做出来的问题，只需要保证做饭效率以及能不能吃的问题就行，而“前端”风格的厨师需要精确的把控做菜的食材、调料、工艺等方面的要素，最终的目标除了效率、安全等方面的问题以外，重点是要满足食客的口味需求。 "
个人感觉,后端是准备好食材,调料,工艺,在给定的时间内把饭菜做出来,既要有足够吞吐,还要足够的低延迟
而前端呢,主要负责摆盘,装饰,上菜,可能负责的多的(NodeJS 做反代那种),再给饭菜挤个柠檬汁上个现成的调味汁简单加工一下....
而且安全显然是前后端都要做的,后端更主要一点.这部分前端可以不做,后端不能不做........

[secondwtq]

@secondwtq 我的意思是合格的后端本来就应该了解这些东西
这些概念还需要专门补的话那还是先把后端学好吧

[abcbuzhiming]

@coffeSlider 问题是前端和 UI 设计不是一个工种好吗？如果这个人是问“如何学习 UI 设计”，我绝逼不说半句话，你说的东西放在 UI 设计全对，但是前端明明是一个偏实现的工作，就像建筑领域的土木工程师一样，你会去找土木工程师大谈“你的设计要美观”吗？你只会去找“建筑设计师”去谈美观吧。你自己靶子都找错了，前端是实现，不是设计
CSS 考验的是对实现前端实现技术的理解深度，我可以不管什么叫漂亮，但是别人给我的设计图，我一定要有办法实现，不仅要实现，还要能实现的合理，从这一点上说，对 CSS 理解的深刻就像对建筑结构，材料力学的理解深度一样