当前位置: 首页 > 科技观察

如何打造赏心悦目的前端开发环境(三)

时间:2023-03-22 16:18:12 科技观察

往期回顾前两期讲了很多浏览器端的东西,包括Webpack。虽然是Node处理的,但还是多用在浏览器端,对于现在的前端开发来说,如果对服务器一点都不懂,是活不下去的。一般的招聘需求都会增加一种服务端语言,比如:PHP、Java之类的。如图:那么本期我们就来聊一聊Node。程咬金的三招1.敲破脑袋——工具链Node在前端领域应用最广泛的就是工具链。第一期提到的构建工具都是Node写的。当然还有很多其他的工具,比如:京东工程等一系列前端工具,百度开源的构建工具FIS3,微信发布的工作流工具,都是用Node编写的。广义来说,我觉得第一期提到的编辑器也是工具链之一。Atom、VSCode、Brackets都离不开Node。个人感觉Node的发展其实已经极大的解放了前端的生产力。对其他服务端语言的依赖基本可以降到最低,可以根据自己的需要编写工具来完成自己的技术目标。在这方面,您也可以自己制作。比如我写了一个自己用的小工具:vuejs格式的Atom插件现在下载量不错,2000多了,还有几个问题没有解决,哭!!2、鬼扒牙——中间层很多FE搭建后端环境很麻烦,而且不熟悉,容易出错(java、ruby、php)。你不会debug,此时你的表情是这样的:然后在2013年和2014年,淘宝的前端团队开始发表了前后端分离思想的系列文章和实践中,提到了MidwayIslandProject,就是把Node作为前端和服务器的中间层,也就是这个架构。从这张图不难看出,Node替换了一部分原来的php和java,也就是我们常说的MVC框架中的VC,基本都给了Node。做,FE做的东西多了,能掌握的东西多了,也就意味着它对自己来说更加灵活,可以考虑更多的组件化、工程化、性能监控、数据分析。这方面的实践可以参考美团上的图文:美团酒店Node全栈开发实践Node的火爆不无关系。早些年,一个人(大牛可不是一般人)要同时精通java和js,html,css还是非常困难的。很多人的想法不一样,分开来也很正常。Node的出现,给很多强大的前端提供了切入服务端的机会。语言水平不是难点,重要的是对服务器知识点的熟悉。Node最后一个大招就是替代一些传统的服务端语言,比如php、ruby、java等,在业务层用Node开发服务端不是问题。比如:uber的调度系统几乎都是用node.js写的,这方面的文章很多。大家可以自己搜索一下,包括各种框架,各种开源系统。当然,还有各种各样的陷阱和问题等待着大家去踩踏和解决。说说我们自己的事情,我们公司三轴基本都用过了。打包构建就不用多说了,基本上每个前端都会用到。第二轴基本上已经被我们公司改过来了。将于明年三月开始。目前是的,所有的网页都使用Node作为中间层,替代了PHP的渲染。中间自然要克服很多困难,但是总体来说,开发效率还是有很大提升的,不需要配置PHP环境,也不需要关心。各种环境的依赖,作为一个整体,是一个自己独立的服务,以接口的形式与服务端进行通信。那么为什么要用三轴呢,主要是因为国内最常见的移动端网页基本都是在微信中流转,而且这些页面也需要一定的数据交互,而这类页面的特点是短平快,做不需要那么严谨。这种页面特别适合前端自己走到底,前后端通吃。连接MongoDB作为数据库,两三天就可以开发出一个活动页面,不依赖其他服务,包括微信授权。自己动手吧,工作量其实并不比对接其他语言服务大多少。在某些方面,我个人认为也减少了很多沟通成本。痛点-我创建了自己的开源快速路由插件。先说说这个插件是干什么的:主要是自动加载express框架下的路由,让每条路由都不需要手写。通常,我们在express框架下写路由的时候,都是手写一条一条的,然后在app.route中一条一条引用。该文件的路由,然后在app.js中引用该文件。但实际上你在项目中的路由情况可能是这样的。你怎么认为?虽然这是一个文件里多了两行代码,但我还是不高兴。同一个规则为什么要多写这两段代码呢?,10两行就是20行。原则上,机器能做的事,人是做不到的,PHP的一些MVC框架可以自动加载路由。他们将有一个文件夹层次结构。显然,路由都是放在Controller文件夹下的,然后根据路由名匹配文件名对应的action。基于此,我创建了一个express自动加载路由,然后考虑了一些特殊情况,做了一些配置,但是目前只支持一级目录,不考虑多级目录。有需要的可以自己添加,或者提issue给我。和往常一样,这篇文章主要讲Node。它的使用方向更倾向于使用前端。不是很深入的Node原理。可以说是很多前端的困惑,为什么要用Node,以及Node怎么用,不要盲目听取别人的建议,需要结合自己的项目情况,技术水平,团队配比。更多Node使用细节和技巧请关注:美团博客大搜车cnode论坛下一篇我们将开启如何结合Webpack和express搭建开发环境和项目目录