分享 2014 年 Web 高手都在做什么 -- 一个 Rails 开发者的视角

lyfi2003 · 2014年12月23日 · 最后由 jasontang168 回复于 2015年05月06日 · 16879 次阅读
本帖已被管理员设置为精华贴

0. 写在前面的话

今年,对于我,从技术上说,还是有不少的进步的。进步的主要是在于前端开发,所以,想从后端工程师的身份对前端的发展做一些总结。

在我前几年的印象中,前端工程师一直是一个很不独立,也不高端的职位。因为他们就是来写 Javascript 的。

往上要跟 UI 设计师要设计图,被他们欺负,往下与老牌的后端工程师要接口,后端工程师往往作为架构师存在,只能更被期负,由于自己的领域只是关乎用户体验,与功能无关,又 Javascript 作为一门语言设计的仓促,有很多缺陷,所以很难过。

随着 Javascript 的发展,前端用户体验要求越来越高,前端俨然迎来了春天。

据业内报道,前端工程师薪水也完全可以媲美甚至越过后端工程师。我们来看看前端是怎么从一个简单的脚本小子蜕变成高上大的工程师的。

一切的蜕变从 v8 的产物之一:nodejs 开始。

1. GruntJS

首先,迎入眼帘必然是 GruntJS, 这是一个类似于 make(C), ant(JAVA), rake(Ruby) 的构建/执行环境, 它本身并没有伟大的地方,但伟大的是它的生态环境。

随着 GruntJS 的成熟,越来越多的组件被加入 GruntJS 的阵营:

  • CSS 压缩
  • 精简,打包 Javascript
  • 图片压缩,合并
  • Sass, less 处理
  • Coffeescript 处理
  • 发布前端应用

看得出,这已经是一个完整的生态系统,不需要像从前那样后端的帮助,前端完全有自己的工作流程了。

与 GruntJS 类似的一个产物叫 GulpJS, 它采用管道技术来优化与改进 GruntJS 的不足,发展很快,大有赶超的趋势。

2. Yeoman

GruntJS 之后,必然缺乏一个前端工作流程事实的标准,这就是 Yeoman. Yeoman 是一个由 30 多人的团队开发维护的脚手架项目,通过它,我们不要需要研究 GruntJS 里面的各种插件。只需要跟随 Yeoman, 跟着它,便能找到光明:十倍百倍地超越一般程序员。

例如,我输入

yo angular

就可以创建

.
|-- Gruntfile.js
|-- app
|   |-- 404.html
|   |-- favicon.ico
|   |-- images
|   |-- index.html
|   |-- robots.txt
|   |-- scripts
|   |-- styles
|   `-- views
|-- bower.json
|-- bower_components
|   |-- angular
|   |-- bootstrap-sass-official
|   |-- es5-shim
|   |-- jquery
|   `-- json3
|-- node_modules
|   |-- grunt-autoprefixer
|   |-- grunt-usemin
|   |-- grunt-wiredep
|   |-- jasmine-core
|   |-- jshint-stylish
|   `-- karma
|-- npm-debug.log
|-- package.json
`-- test
    |-- karma.conf.js
    `-- spec

都不用管 bootstrap, angularjs 从哪里来,一个项目已经启动了。

扔掉 Rails, 开启前端开发之旅。

Bower

说到 Yeoman, 不能忘了它背后的 "男人", 这就是 Bower, 类似于 Ruby 圈子的 bundler,

正是因为它,Yeoman 才会方便做到自动帮你管理 bootstrap, angularjs, 无须让你操心用哪个版本,如果愿意,它会帮你更新,当然也可以帮你锁定版本。

Angular

项目基础的框架能让你开发的流程十分顺畅,就像我在办公室里面,用着 27 寸 imac 一样带感,而你只用着 3 年前的配置,IT 部还告诉你,2G 内存完全够用了。

但是,真正让高手与菜鸟产生差距的还在于内功:前端 JS 框架,如 Angular, Ember, Backbone 以及小而美的 React.

我们先来说说 Google 出品的 Angular, 也是我最熟悉的前端框架。

首先,它出手极快。相信你去看过它的官方主页,就可以体会到,什么叫快速开发。

其次,它非常现代化。不管你信与信,HTML 标准已经落后时代好多年了,单单从 HTML 的组件化能力上看,几乎没有。而 Angular, 从内在改进了它。通过编译原理,标记扩展,digest 处理等技术手段,让你可以写出极为优雅的逻辑代码。并且前端测试,在它这里易如反掌。

最后,最为全面。它拥有自己的路由系统,Model, Controller, View, Template, 一个不少。极为方便的开发体验。

并且,Angular 2.0 也在日程,将会一消第一版的历史问题,带来更为清晰现代的设计。

Backbone & Ember & React

之所以把 Angular 单独一篇,是我最看好它,无论是设计,还是技术,还是生态,皆有巨大优势。不过,大而全,不一定全是优点,我们先来看看 Backbone.

Backbone 其实是一个十分久远的前端框架,或者说,在 Angular 之前,它是事实的标准。而且在很多重前端的项目中,都应用很不错。随着时间的推进,小而美 ( 核心只有 1000 多行 ) 不太适合普通开发者使用,重复开发的轮子太多,人们开们转向 Angular 与 Ember 了。

而 Ember 是一个真正的 MVC 前端框架,其思路借鉴了后端的 MVC 思想,相比于 Angular, 它也很全面,很好,与 Angular 与众不同。

它的背后,也站着许多坚定的支持者,因为它确实值得你去一试。

而且,Ember-CLI 这样一个像 Rails 一样酷的框 架的出现,也大大激励了整个社区的前进。

如果说,Angular, Backbone, Ember 都是为解决前端问题而生的全能型武器。那 React 就是一个锋利的匕首,你可以同时携带一个主武器和一个匕首,是吧?

这个 "匕首", 是由 Facebook 发起的开源项目,它利用虚拟 DOM 生成技术,极为巧妙地避开了一般前端框架都会遇到的一个问题:DOM 节点处理的性能问题。并且,通过特有的虚拟 DOM, 可以很好的封装自己的组件,让一个组件像后端的一个函数一样,有输入与输出。在庞大的前端项目中,有了它,就可以游刃有余地重用代码。

说完前端框架,不得不提的就是 CSS 框架了。缺了 CSS, 我们的生活哪有色彩。

Bootstrap 与 Fondation

如果你是我的忠实读者 (虽然不多), 还是技术爱好者,应该就知道我之前翻译了一篇它俩的比较一文:http://yafeilee.me/blogs/52f83eb915638851a3000006, 通过这一年的观察,这两个都是非常酷的 CSS 框架,如果你不是一个 CSS 的顶级高手,择其一而用之,你会发现,做一个漂亮的页面,也没那么复杂嘛。

相比之下,我更喜欢 Foundation, 如果你都用过,相信会理解我的意思。

Sass, Less

除了 HTML 与 JS, CSS 也不断在发展,因为 CSS 没有像 Javascript 那样强大的扩展性,所以我们只能去做他的预编译技术:

Sass, Less 这两个项目正是为此而生,有了它们,CSS 里面也可以用变量,可以写函数,可以复用代码了。

这个方向,正是为写大型复杂的前端项目应运而生。

值得一提的是,有人写了一个 Stylus, 可以采用缩进的方式写 CSS, 而且语法与 Sass, Less 非常相近。

总结

WEB 高手之所以为高手,是他的学习能力,是他的创造力,是他愿于突破自己的舒适区。不断改进手上的技术,不断提高水平。

而前端领域,也像后端一样庞大的社区了,那么,后端还需要像 Rails 那样大而全的框架吗?也许只需要一个 API 接口就可以了。

这个 API 接口,目前看不是 nodejs, 也不是 Rails, 不是 Grape, 那会是什么呢?

我们拭目一待。

关于我:李亚飞,居住在深圳的 Ruby 爱好者,全栈,创业中。爱 Rails, 也爱生活。

ps: 欢迎关注我的微信公众号:技术达人李亚飞。讲述我们技术界的技术,生活,创业。此文首发于我的博客:yafeilee.me

嘎嘎,亚飞旅游回来了?

#1 楼 @badboy 回来有一段时间了:)

我目前更感兴趣的是 MeteorJS 或 Volt 之类的即时互动框架。

@lyfi2003 接下来什么打算啊

#3 楼 @winnie 酷,回头玩玩看。

#4 楼 @badboy 组一个小团队去 build idea.

idea 好多,就是缺运营和推广

好文章啊,支持亚飞!!!

亚飞看看这个视频:https://www.youtube.com/watch?v=Tg-EtRnMz7o 或者这个文案: http://www.slideshare.net/ryanstout/isomorphic-app-development-with-ruby-and-volt-rubyconf2014 我觉得 bilibili 的刷屏互动模式才是新方向。

Javascript 这门语言太可怕,不是万不得已,实在不想碰😞

#10 楼 @winnie 推荐的项目 volt 很酷,meteor 应该说跟它是一类。不过开发界应该是没有银弹,有空补充下这方面的内容~

#8 楼 @jxs471494539 thx:) 以后会多写点~

Ractivejs 不错,Vuejs 华人写的。都是轻量级的 lib。

angular 太重,学习成本也高,不是重前端不敢用,ractive.js 看起来不错。最后为这句话点赞:

WEB 高手之所以为高手,是他的学习能力,是他的创造力,是他愿于突破自己的舒适区。不断改进手上的技术,不断提高水平

没有谁一生下来就是高手,高手都是爱折腾的命。

2014 年 WEB 高手都在赚了什么 -- 一个 Rails 开发者的视角 😄

一久没写前端,现在我连写个漂亮的界面都需要时间,泪流满面

#17 楼 @linjunzhugg 第一次需要 10 天,第二次需要 1 天,第三次可能 1 个小时就搞定了。😄

React 这些我觉得应该不能和 Ember 放在一块吧 这些都是对前端UI/Component模块化的实践和探索,包括Mozilla在内很多公司都在做这块 Ember 属于重量级的 MVC 解决方案 Yeoman+Bower+Grunt 在 13 年就很流行了。。个人感觉应该不能算高手级别吧=。=算是终于成为主流

帅锅,怎么不扯扯 Semantic-UI?想玩玩这个东东。

#21 楼 @diguage semantic-ui 这阵子疯了,从 1.1.2 到 1.4 用了两个星期,差不多每天一个版本...

话说没有提到阿里的 midway 项目,个人很看好这个。目前市场上前后端分离的解决方案都是 js framework,但是真的不怎么靠谱...

hammer 前端大杀器,可以自动编译 scss coffeejs haml slim,配合 anvil 使用,绝对爽。

这套装备其实更适合纯前端工程师,对后端 工程师 (尤其开发 rails) 来说, 可以用 自己喜欢的技术栈做前端,并脱离后端环境。

为啥要脱离后端环境,如果前后端都很擅长,不是为自己工作,只是打工,你会被压榨死的,我是这么感觉滴。

喜欢他的另一个原因,跟我昵称一样,都是锤子。

亚飞,yeoman+gruntJS+bower+angularJS+bootstrap,我们现在采用这套框架开发。多交流~

#23 楼 @hammer 如果只是打工的心态,到那里都会被压榨吧。另外关于工具,手里拿着锤子,看什么都像钉子。

#23 楼 @hammer 我一直都用 sinatra 来完成 hammer 的功能………

小看 gulp 和 React

果然都是好东西

好文章,绕我这对 JS 社区接触较少的人能很快速的了解现在主要使用的开发工具和技术。 👍

前端框架也推荐一个 Semantic UI。关于缩进试 CSS 写法的,记得当初 SCSS 也是这样的,和 SASS 师出同门。可参考:http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html

Semantic UI +1 曾经用过,感觉很慢

扔掉 Rails?楼主抛弃 Ruby 了?

最近我在想,既然 web 开发现在已经将重心移到前端上了,为什么后端不抛弃 VC 只留 M,这样一来也可以把 HTTP、URL 的概念抛弃,实现从 browser 到 server 的类似 remote procedure call 的概念。

后来想想看,这样其实和 BaaS 没多大区别。

这文章跟 rails 到底有多少联系。。。怎么加精华了

好文,不过扔掉 rails 从何说起呢?

我想楼主的意思不是 抛弃Rails,而是 不用Rails来完成一揽子的开发。这一点印象中 RubyChina 上也有类似的讨论了,好像还是由 Turbolinks 开始谈起的。

@liudangyi 个人的理解是前后端分离肯定是一个很大趋势,页面的开发只需要知道 API,而不需要去管在页面上要用 controller 的什么变量,来做什么事情。同理后端的开发者也可以不去 Care 页面怎么写,做一套 API 出来就好了。特别是需要同时做 PC 和移动端的时候。比如如果你没有自己的 API service,用Firebase就好了

当然 DHH 会有话说,但本来这就无所谓对错,开发者自行选择而已。

Angular 给我的感觉是概念真的非常多,而且也颠覆了我原本对 Model 和 View 的理解(或者说,在 Rails 中扮演的角色),相信是一个学习曲线陡峭的原因吧?还没有用的很深,不能评好坏。期待亚飞对 Angular 的介绍啊!

很不错的文章!

呵呵,学习这些就叫高手了。那创造这些的算什么???

GruntJS <---- 建议 LZ 把 Gulp 写上,那种感觉就和用 Ruby 实现一个 Java 方法那么酸爽。

#43 楼 @blackangel_can 里面有提了一句。

为了你这篇文章注册这个账号。里面描述的技术,基本上去年都有使用到,总结的很牛逼

楼主文章总结的好!作为一个不懂设计的后端工程师,还记得第一次看到 bootstrap 之后那个激动(曾一度只靠 jQueryUI 苦苦支撑)。曾经也花了时间去研究 backbone,但看到 angular 之后就再也不用了。这几年的前端框架真是层出不穷。引用楼主的话,

WEB 高手之所以为高手,是他的学习能力,是他的创造力,是他愿于突破自己的舒适区。不断改进手上的技术,不断提高水平. 我们拭目一待。

最近在玩 semantic ui +1

存档一下。

爱楼主的文章,更爱 ror

需要 登录 后方可回复, 如果你还没有账号请 注册新账号