[原创] 如何高大上的做前端开发

前端 js mac

2016-11-28 2217

当人们听到前端工程师这个词儿,浮现在脑海中的第一个形象就是切图仔。
当你向人说起你是做前端开发的,很多人都会投来鄙夷的目光:就是个切图的。

在传统web开发人员的眼里,前端开发太简单了。学学html,css,js,jquery熟练使用dw一切搞定。对于有特殊需求的页面效果,则由前端同学来设计,布局,写好html给到服务器端开发的人员,由他们转成jsp(php),或者各种模板引擎文件。
这种模式对前端的要求不是特别高,会设计,切图,就差不多了,什么前端组件化,模块化,自动化这些概念都没有。前端就是切图的,所有的套程序,功能实现都是由后端程序员做的。

随着时代的发展对前端的要求越来越高。当你还沉浸在切切图就能ok的时候,难道没有发现作为一个前端开发工程师你已经不合格了吗?!

从最初的使用html和js开发Hybrid App、spa(single page web application)到响应式程序和微信公众帐号开发,现在对前端的要求越来越高,单单会切图已经完全无法满足需求。前端最近几年的太快了,作为一个合格的前端开发人员要不断的提升自己。其实说白了现在前端的变化无非就是自动构建和工程化思想的引入。对于开发人员来讲,看透了就什么都简单了。


下面我就个人经验部分简单的和大家分享一下如何让前端开发看起来高大上。
作为一个新世纪的前端开发人员nodejs是必备技能,因为它的出现彻底改变了前端开发人员的地位,从此之后js就可以像其他脚本语言一样运行在服务器端了。如果要使用nodejs那么就必须对终端命令操作熟练,这里推荐mac或者linux的终端(nodejs官方不建议在windows下使用,大家都懂的)。

工具篇
mac开发环境配置
  • iTerm2
          http://www.iterm2.com/
对于几乎离不开shell的开发者来说,一款优秀的终端程序是基础的基础。
毫无疑问,我用的是iTerm2。如果说访问互联网世界的入口是Chrome,那么访问程序世界的入口就是iTerm了。

  • Homebrew
          http://brew.sh/
Homebrew installs the stuff you need that Apple didn't.
我电脑上的大部分工具都是通过homebrew安装和管理的,非常方便。虽然提供类似功能的还有Fink和macports,但我认为Homebrew是最方便的。具体的就不在这里比较了,大家可以自行调研。当然,至少选择一个来帮助自己安装盒管理软件包,会让很多事情变得更容易。
  • zsh
          http://ohmyz.sh/
          默认的 Bash 是黑白的,没有色彩。而 Oh My Zsh 可以带你进入彩色时代。Oh My Zsh 同时提供一套插件和工具,可以简化命令行操作。

编辑器
作为一个开发人员一定要选择一款自己喜欢的IDE(编辑器)。前端开发推荐使用sublime text、atom、vscode等文本编辑器或者webstorm这个集成开发环境。
Sublime: 快速,稳定,性感(?),全局搜索和索引速度超快,插件功能性好,可定制化一般(不能大幅度魔改界面,功能),可配置快捷键,构建参数,代码补全基于Snippet,没有IDE那种全局带类型推导提示来的爽

Atom: 速度一般,更新快,Hackable,任何了解过Web,会一点JS的都可以自己写插件,任何Web能实现的功能,效果都可以实现,且可配合本地库。对Web开发者(尤其前端)友好,对很多语言代码提示完善,配合插件可以全项目类型联想代码补全,终端集成,分屏,调试器集成,Logger集成,非常简单可以打造一个自己的IDE,缺点就是基于Electron(Chrome)的效率问题,资源占用大

VSCode: 速度较快,对超大文件读写速度飞快(打开10M代码不到1s,Subline原生会卡近6s),插件数量相对少,有一些增强功能比如调试器,终端,原生支持语言语法高亮较少(C# JS TypeScript是第一位),内置JS/TS调试器…可以基于不同项目(文件夹)设置偏好

浏览器
在开发人员的手中,浏览器应该不仅仅是一个浏览网页的工具还应该是一款开发调试工具。作为前端开发人员,最终的工作成果是在浏览器中呈现给用户的,那么选择一款合适的浏览器作为调试工具就至关重要。这里推荐使用chrome或者firefox。


代码篇
     前端代码最终的展现形式都是html文件中引入js文件或者css文件,然后浏览器根据代码的内容进行显现。但是在开发的时候可以有很多种选择方式。传统的开发方式就是js文件和css文件按照功能或者使用的位置不同分割在单独的文件中,然后在html代码中进行引入。这种开发方式显得很low,没有一丁点工程化的思想在里面。随着前端技术的发展,各种前端自动化构建工具应运而生,前端的模块化开发思想越来越成型。随着前端功能的增加,前端代码量也在成倍的增加,简单的一个jQuery库通杀的情形已经不复存在,各种前端开发框架慢慢的占据主流。在各种框架与开发工具盛行的今天,选择一个合适的组合来使自己的工作轻松惬意为何不可呢?
     那么什么是合适的组合,个人认为能解决你的问题,方便好用就是合适的。不要人云亦云,要坚信自己的选择。今天给大家推荐webpack+gulp的组合。我会通过一个简单的例子给大家做个讲解。
webpack
     webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。          
gulp
     Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript(或者 CoffeeScript )源码来实现的。
开发环境搭建
     所有的开发插件都是基于nodejs的,所以前面我已经强调了nodejs的重要性。nodejs的安装就不说了,按照官网上的方式进行安装就好。建议通过nvm进行安装,可以在不同的版本之间进行切换。
     nodejs地址: https://github.com/nodejs/node
     nvm地址: https://github.com/creationix/nvm
     webpack地址:http://webpack.github.io/
     gulp地址:http://www.gulpjs.com.cn/

nodejs入门
     非常建议大家掌握nodejs的基础用法
     官网地址:https://nodejs.org/en/
     通过以上两个链接的阅读,应该对nodejs的使用有一个简单的了解。然后才好开始后面的内容。

以下是一个webpack+nodejs+angularjs的完整项目目录截图


项目目录说明:
1. app文件夹下存放的是客户端程序
2. app.js是express框架的入口文件
3. webpack.config.js存储的是webpack的配置文件
4. gulpfile.js存储的是gulp的配置文件

本项目通过webpack实现客户端js代码的模块化加载,通过gulp工具实现代码的自动化构建和压缩处理。
关于项目的更多内容可以查看:https://github.com/btc022003/webpack-angular

     


参考资料:
Web 研发模式演变

移动端开发者眼中的前端开发流程变迁与前后端分离

如何像后端一样写前端代码?

JavaScript 模块化历程


前端模块化工具-webpack

如何优雅地使用Sublime Text

如何配置一个高效的 Mac 工作环境