您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > APP

轻量级H5 app开发实践之技术选型

时间:2020-10-23 09:50:04  来源:  作者:
轻量级H5 app开发实践之技术选型

 

上一篇主要是对新项目的一些介绍和对技术栈升级的思考,之前也提到,既然是新项目,从0开始,没有历史包袱,应该可以放手玩了。但考虑到如何能让老项目受益,并且从技术架构的普适性去考虑,需要横向扩展,让更多项目受益,让更多开发人员参与进来,接下来我会从以下几个方面去选定。

构建环境

在现有项目中的构建打包流程是gulp和webpack结合使用的,gulp负责任务的优先级调度执行,webpack负责各模块的依赖分析打包,在这个项目中我的计划是放弃使用gulp,因为经过调研发现webpack4.x 完全能满足这种轻量级项目的构建需求,并且可以做到简单化,还具备稳定性,具体细节我会在下一章的环境搭建中讲到。

所以,对于构建环境可以明确是基于webpack完成环境的配置搭建。

开发框架

该项目是基于前端后端分离的方案实现,前端包含:api服务和客户端页面两部分,api服务是基于koa2的nodejs中间层服务,客户端是基于vue的多页面入口的设计

koa2

koaJS是我近几年一直使用的node开发框架,从1.x到目前最新的2.13.0(这个项目中的版本)都有在项目中使用的案例。它的特点是优雅、简洁、表达力强、自由度高,再加上独特的中间件流程控制,也是典型的洋葱模型,可玩性很高,非常适合我们这种轻量化中间层服务。

说到node开发框架你也可能会想到 eggJs ,thinkJs,用他们岂不是更方便快捷?要知道上述两个底层都是基于koa进行的再次封装,我的建议是 如果你想深入的去学习node,想在开发中去深入了解它,尤其是想自己去开发一些中间件,那koa是不错的选择,当然,前提是你已经具备nodejs相关的知识。

再回到这个项目中,我对这个服务有两个阶段的预期,在第一个阶段会将它职责定位在接管路由(router),为客户端js提供api服务。第二阶段,会考虑基于同构方案的首屏服务端(SSR)渲染。在完成第一阶段时就已经具备上线条件,后续会结合产品需求和seo再去实施SSR。

vue

使用vue来完成H5前端页面的构建是我一直认为最合适的,我个人觉得也没有必要去跟react去做各种的对比,他们各自的优势也非常明显。这里要提到另外一个考量,选择什么样的开发框架是要结合你们团队成员的整体技术水平,对框架的可接受程度,还要结合公司的业务和产品形态。

所以,我的选择是vue,是2.xx的版本,最近刚发了3.0版本,不过还是需要等等再上。

组件库

先解释一下,这里的组件库是指的项目中全局通用的如,toast,dialog,loading 等公共组件,我一直的想法是能有公司自己的公共组件库,这个事也是一直推进中,困难重重,这会涉及到跟ui设计师的对接,设计规范的制定,整体风格的统一。到目前已经产出了一些组件,任务道远啊。

结论

上述是我对于这个项目的技术栈的选型,总结下来是:

koaJs:负责中间服务层

vue:负责客户端页面构建

组件库:自研 + 少量开源

webpack:代码构建打包

已经完成了两篇文章的总结,还没看到代码,哈哈,下一篇我会把重点部分的代码实现拿出来跟大家分享,也欢迎一起交流,一起进步,感谢阅读!



Tags:技术选型   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
文章简介:作者结合自身微服务架构研发经验进行回顾、总结,本文将介绍微服务架构中,在技术选型时需要注意哪些选型原则,会遇到哪些开源框架,又该如何选择, 进行了全面的归纳、对比,希望能够为大家提供一些思路、方向,少走一些...【详细内容】
2021-02-05  Tags: 技术选型  点击:(160)  评论:(0)  加入收藏
一个通用型的CDN,如果要服务广域范围内的用户,那必然要在一个广大的区域内部署服务节点。那么,一个很重要的问题就来了,就是如何将用户的访问导向到最优节点上。最优的含义有两...【详细内容】
2020-12-14  Tags: 技术选型  点击:(121)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送...【详细内容】
2020-11-11  Tags: 技术选型  点击:(100)  评论:(0)  加入收藏
上一篇主要是对新项目的一些介绍和对技术栈升级的思考,之前也提到,既然是新项目,从0开始,没有历史包袱,应该可以放手玩了。但考虑到如何能让老项目受益,并且从技术架构的普适性去...【详细内容】
2020-10-23  Tags: 技术选型  点击:(87)  评论:(0)  加入收藏
作者:马倩转发链接: https://mp.weixin.qq.com/s/LlZB6ZC5NkxnBj-C5iZNnAKbone原理解析官方介绍“Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。”Web端框架基本...【详细内容】
2020-06-27  Tags: 技术选型  点击:(67)  评论:(0)  加入收藏
MongoDB、ElasitcSearch、Redis、HBase是现今最火的四款NoSQL数据库产品。在实际的开发中,这四种数据库有什么区别?我到底该选哪个?想必这是很多互联网开发都遇到过的难题。下...【详细内容】
2020-01-08  Tags: 技术选型  点击:(115)  评论:(0)  加入收藏
.net体系.net core.net 类库asp.net mvcasp.net webapiasp.net coreEF跨平台和运行时解决方案(解决方案)Katana:微软基于OWIN规范实现的非IIS寄宿ASP.NET和MVC等。MONO.NET:跨平...【详细内容】
2019-08-08  Tags: 技术选型  点击:(254)  评论:(0)  加入收藏
▌简易百科推荐
  1、明确产品的需求分析+功能  这是最基本的也是第一步,我们要明确自己或者客户真的想要开发一款app应用,其次就要了解到底要开发什么功能什么类别和种类的app应用。所...【详细内容】
2021-12-27  木子科技    Tags:App   点击:(1)  评论:(0)  加入收藏
前言目前,即时通讯在app中逐渐成了不可或缺的功能,尤其是在疫情期间,音视频会议功能更是火了一把,但是想自己开发即时通讯功能,却一点都不简单,如果用原生开发的话,那么Android、iO...【详细内容】
2021-07-29  中控易动    Tags:APP   点击:(104)  评论:(0)  加入收藏
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  易简视源云会议    Tags:视频会议App   点击:(113)  评论:(0)  加入收藏
开发一款app需要多少钱?这是一个比较笼统的问题,没有确切的需求,拥有不同技术经验的团队往往报价都各不相同,因为不知道开发需求,所以无法给出一个准确的价格。因此,想知道app开发...【详细内容】
2021-07-13  hey衡道    Tags:app   点击:(79)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  扣丁学堂  今日头条  Tags:APP页面   点击:(289)  评论:(0)  加入收藏
介绍MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页...【详细内容】
2021-04-12  爱分享Coder  今日头条  Tags:WebApp   点击:(309)  评论:(0)  加入收藏
在开发直播APP时,核心要素和基本要素是稳定性,一般各大服务商都有提供demo,并且可以免费测试的,测试可以初步评估下稳定性,看看视频流畅度如何,卡顿是不是很频繁,延时效果怎么样,视...【详细内容】
2021-03-19      Tags:直播APP   点击:(292)  评论:(0)  加入收藏
TOKEN作为用户身份凭证并不能保证数据安全,别人通过抓包等方式很容易拿到TOKEN,带上TOKEN请求我们的API接口就能获取数据;其实换一个角度想:我们只需保证即使TOKEN被别人冒用,也...【详细内容】
2021-02-18      Tags:APP,API   点击:(229)  评论:(0)  加入收藏
在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/4G/5G/WiFi等多种手机网络连接方式。不同的协议、不同的制式、不同的速率,使移动应用运行的场景更加丰富。目前...【详细内容】
2021-02-05      Tags:APP   点击:(201)  评论:(0)  加入收藏
虽然目前许多企业都进行了长沙APP开发,开始了移动互联网转型之路,但由于其中绝大部分企业都属于传统行业,对APP应用了解并不多,故而对开发工作也不是很清楚。为了大家能更好的了...【详细内容】
2021-02-01      Tags:APP应用   点击:(214)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条