如何打造一个令人愉悦的前端开发环境(三)

往期回顾

前面2期都讲得是浏览器端的东西比较多,包括Webpack,虽然是Node处理的,但是还是浏览器端用的多,对于现在的前端开发来说,不懂一点服务端的东西,简直没办法活,一般的招聘要求都会加上要懂一门服务端的语言,例如:PHP,Java之类的啦。如图所示:

所以我们这期就讲Node的东西。

程咬金的三板斧

一、劈脑袋 -- 工具链

Node在前端领域使用最为广泛的就是工具链了,一期提到的构建工具都是Node写的,当然还有其他很多工具,比如:京东工程化,百度开源构建工具FIS3,微信发布的工作流工具等等一系列前端工具都是用Node写的。广泛的说,我认为一期提到的编辑器也算工具链的中的一种,Atom,vs

code,Brackets都和Node密不可分。我个人感觉,Node的发展,实际上大大解放了前端的生产力,对于其他的服务端语言的依赖基本可以说降到最低,可以依据自己的需要编写工具来完成技术目标。

这方面大家也可以自己来产出下,例如我自己写了个小工具供自己使用:

vuejs 格式化 Atom插件

现在下载量也不错,有2000多了,还有好几个issues没有处理,哭!!

二、鬼剔牙 -- 中间层

对于很多FE来说,要搭建一个后端环境很是麻烦,而且不熟悉,容易出错(java,ruby,php),最糟的是自己不懂,出错了完全不会调试,你的表情此时是这样的:

那么在13、14年的时候,淘宝的前端团队,开始连续发文,前后端分离的思考和实践系列文章,提到了中途岛计划,也就是把Node作为前端和服务端的中间层,也就是这个架构,

从这种图,不难看出,Node取代原来php,java干的一部分事情,也就是我们常说的MVC框架中的VC基本都给Node来干,FE干的事情更多了,能掌握的东西多了,意味着对于自己更加灵活,可以考虑更多的组件化,工程化,性能监控,数据分析的事情。

这方面的实践大家可以参考美团这边的图文:

美团酒店Node全栈开发实践

三、掏耳朵 -- 火热的全栈

Full Stack developer
是近年来热炒的一个概念,究其原因,跟Node的火热不无关系,早些年讲,一个人(大牛不算普通人)既要精通java又要精通js,html,css还是很困难,很多思维都不太一样,分开也很正常,而Node的出现,为很多比较厉害的前端提供了切入到服务端的机会,语言层面的问题不在是难点,重要的对服务端的知识点的熟悉程度。Node的最后一个大招就是替换一些传统的服务端语言,例如php,ruby,java等,在业务层上面使用Node来开发服务端完全不成问题。

例如: uber的调度系统几乎都是用 node.js 编写的

这方面的文章也有很多了,大家可以自己去搜搜看,包括各种框架,还有各种开源系统,都可以找到。当然也还有各种各样的坑和问题以待大家去踩和解决。

说说自家事

我们公司来说的话,三板斧基本都用上了,打包构建自不用谈,基本每个前端都会用到,第二板斧我们公司已经基本切换过来了,年后3月启动,目前是所有的web页面都是Node作为中间层,替换了php的渲染,中间自然有很多的困难要克服,但整体上来说开发的效率还是大大提升,不需要在配置php的环境,也不用在关心各种环境的依赖,整体上自己的一个独立的服务,使用接口的形式和服务端通信。

那么三板斧为何会用到,主要是目前国内最常见的mobile的web页面,基本在微信里面流传,然后这些页面还需要一定的数据交互,而且这种页面的特点就是短平快,不需要那么严谨,这种页面特别适合前端自己一撸到底,前后端通吃,接上

MongoDB当做数据库,基本两三天之内就能开发一个活动页面出来,不需要对其他服务有任何依赖,包括微信授权都可以自己搞定,工作量其实比对接其他语言服务大不了多少,某些方面,我个人认为还减少了很多的沟通成本。

痛点-- 造就了自己的一个开源

express的路由插件

先说说这个插件做什么的: 主要是自动的加载express框架下面的路由,免得一个一个路由需要手写。

通常我们在express框架下面,写路由的时候都是一个一个的手写,然后在app.js里面去一个一个引用,一般是这样子的

那么好一点的情况,是这样子的,分散每一个相同名字的路由到文件中,然后引用文件在app.js里面。

但实际上你可能在项目中路由情况是这样子的

你有什么想法?

虽然这样子也就是一个文件多两行代码,我还是不爽,我为什么要因为同一个规则而去多写这两个代码,而且10个两行,就是20行,原则上,能用机器干的事情,就不人干,而且PHP的一些MVC框架可以自动加载路由,他们会有一个文件夹的分层,很明显,路由都放到Controller文件夹下,然后根据路由名来匹配文件名的相应action,依据这个我自己就撸了一个express的自动加载路由,然后考虑了下一些特殊情况,做了点配置,不过目前只是支持一级目录,没有考虑多级目录情况,有需要可以自己添加,或者给我提issues。

照例总结

本篇文章主要讲的是关于Node的东东,它的使用方向,更偏向结合前端的使用,并非是很深入的Node原理,也算是给很多前端解惑下,为什么要使用Node,以及如何使用Node,不要盲目的听信别人的建议,需要结合自己项目情况,技术水平,以及团队配比。

更多的Node的使用细节和技巧建议关注:

下一篇我们开启如何结合Webpack和express 搭建一个开发环境和项目目录

作者:乖小鬼YQ

来源:51CTO

时间: 2024-10-26 04:09:58

如何打造一个令人愉悦的前端开发环境(三)的相关文章

如何打造一个令人愉悦的前端开发环境(一)

文章来源 最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS.超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html.css.js三板斧之外,最让人头疼的应该是关于环境的配置问题,所以以环境作为切入点,开始一系列的前端开发环境配置文章. 主要会涉及到打包.构建.编程工具.debug等等前端环境,以及前后端分离.Nodejs中间层使用伸展面. 工欲善其事必先利其器 以编程工具而言WebStorm.sublime.Atom.VS Code.Brack

如何打造一个令人愉悦的前端开发环境(二)

前情提要 上一篇文章介绍了目前前端比较流行的各种编辑器,以及各种流行的打包方式,最后给了一个Gulp的例子,这个例子还是14年的时候写的,还有一些可以优化的空间,就不讨论了,这篇文章主要讲目前火热的打包构建方式--Webpack的使用方式. 主菜--没有开胃汤 其实Webpack的入门指导文章非常多,配置方式也各有各样,这里我推荐题叶大神的入门级指南--Webpack 入门指迷,如果不知道Webpack是什么或者不是很清楚各项配置含义的开发者,可以看此文章扫扫盲.毕竟我这篇文章并不是特别基础.

如何打造一个令人愉悦的前端开发环境(四)

Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实现前后端热更新开发,如果你还不太了解webpack推荐阅读 webpack 官网文档 What 什么是 webpack dev server Webpack dev server 是一个轻量的node.js express服务器,实现了 webpack 编译代码实时输出更新.在前后端分离的前端项目开发中经常用到.不过这篇文章应该不会讲到它. webpack dev middleware W

在 windows(cygwin) 或 mac 下安装git、node、ruby等前端开发环境

我记得每一年技术部年会都会由老大说出一个技术主题,之前有服务化.模块化.工具化.数据化等等等等,今年的主题是全栈.遥想当年,在供职过的两家公司什么抗机器.装机架:什么安装系统.加固.搭建Web或任务应用的前后端环境.打包发布.网络配置:什么JavaScript.CSS.VB..NET.PHP.JAVA等等语言:什么Mootools.JQuery.Ext.Lucene.Solr.Hibernate.Spring:什么Oracle.Mysql.SQLServer.MongoDB.PL/SQL --

用 Docker 快速配置前端开发环境

本文讲的是用 Docker 快速配置前端开发环境[编者的话]最近在公司实践了一下 Docker,记录成了一篇文章,发出来和大家交流下.我基本上是个 Docker 新手,如果有什么地方说得不对请大家指出~目前的方案还比较粗糙,大家有什么改进建议也请告诉我,我多和大家学习 今天是你入职第一天. 你起了个大早,洗漱干净带着材料去入职. 签了合同,领了机器,坐到工位,泡一杯袋装红茶,按下开机键,输入密码, 然后,下载 Chrome.Postman.Sublime.盗版 PS.NodeJS.配置 NODE

搭建前端开发环境——docker篇

一.解决痛点 免搭建前端静态环境 分支切换,无需重新启动编译(package.json或gulpfile.js文件改变除外) nginx可自行配置,满足不同项目的需求 二.前端静态搭建思路 基于ubuntu系统环境,利用nginx静态资源服务器经过docker暴露出来的端口进行请求转发,这样后端的开发机上面只需要安装docker就能够访问前端的静态资源,不需要访问前端开发机. 三.具体解决方案 用 Kitematic 客户端实现跨平台运行 Docker 用端口映射预览 Docker 里的文件 用

《深入浅出iPhone/iPad开发(第2版)》——Xcode是一个全功能的集成开发环境

Xcode是一个全功能的集成开发环境 深入浅出iPhone/iPad开发(第2版) Xcode远不只是一个文本编辑器.正如你所看到的,Xcode含有模板,帮助你开始一个应用程序的开发.根据你的应用程序,你可以使用所有的模板,或者只是使用一部分,但你总是能够以它们中的一个作为模板开始.一旦你选择了基础应用程序模板,你可以使用Xcode做更多的事. 维护你的项目资源 Xcode会为你的项目创建一个新的目录,并将各种文件放入这个子目录中.你没有必要坚持默认的布局,但是如果你决定要整理它们,完全可以用X

用 Ubuntu 搭建一个 Ruby on Rails 本地开发环境

想要开发 Ruby on Rails 应用吗?虽然已经有一些(初级的)Ruby on Rails 教程了,但是似乎在如何搭建一个简洁而更新的本地开发环境方面还有些不甚确定的地方. 这个教程将引导你通过几个步骤来搭建一个基于 Ubuntu 的 Ruby on Rails 本地开发环境.而这个教程的即将发布的第二部分,将帮助你搭建一个 Ubuntu VPS.当前你暂时知道 VPS 是虚拟私有服务器的意思就可以了,让我们先将注意力转回到如何搭建本地开发环境中. Bf Frontpage in Set

单机搭建WinCE开发环境(三)

     通过前两篇的介绍,我们已经搭建了WinCE开发环境,并了解了如何使用远程工具进行相关调试.这一篇,我们进一步完善单机搭建的WinCE开发环境--在WinCE6.0的模拟器中使用串口.        WinCE设备中串口的使用频率是相当高的,一般有一个调试串口,而很多实际应用中与GPS.GSM(GPRS)模块的通信都是通过串口来进行的.在第一篇中,曾介绍过为调试串口创建一个Text Consol Window,以模拟调试串口.事实上,我们也完全可以映射主机的串口到模拟器中来,方法如下图所