文档章节

openresty 前端开发序

-外星人-
 -外星人-
发布于 2016/12/09 11:45
字数 1806
阅读 842
收藏 12
点赞 1
评论 0

还记得第一次尝试前后端分离的时候,是使用nginx + react 构建的spa应用,后端是java,主要处理业务逻辑逻辑部分,返回json数据,在nginx里面配置好html + js纯静态文件,再通过反向代理到java后端,解决跨域问题,然后使用ajax来进行交互,模型很简单,也很有效

主要解决了几个问题

一、独立,由于前后端分离,在开发的时候完全可以互相独立,所谓独立,其实就是说前后端是属于两个项目,保存在各自的git仓库,提交代码既不会冲突,也不需要合并

二、解耦合,后端开发完成之后只需要提交代码,然后发布到测试环境,而前端只需要启动一个nginx然后反向代理到测试环境,就可以开始开发工作,就是这么简单

三、版本更新,在项目上线之后通常需要继续迭代更新,这个时候就提现出前后端分离的价值了,前端样式排版更新,只需要更新前端,对后端几乎没有影响,那么只需要测试前端,避免了部分开发人员的失误,在前端更新的时候,导致后端服务的不可用,而由于前后端分离,并独立部署,提高了后端的稳定性,又保持了前端的多变性

但是也带来了一些其他的问题,主要逻辑都是js编写,成了胖客户端,在网速不佳的时候,体验不是很好,还有一个就是seo问题,当然我之前做的主要针对微信端,而且也不考虑seo,所以即使这样也能接受,那么就只剩下前端加载性能的问题。

前端我是这样解决的

使用webpack + gulp
webpack 用来编译打包js,其实也可以用来编译css,但是根据实战,我发现webpack编译后的css会比gulp编译出来的要大那么一点点,对于手机端来说,少一点是一点,于是选了gulp混合编译

在js层混合使用了amd+cmd模块加载方式,公共模块会被打包到common.js里面,各个页面模块会独立编译出一个js文件,这个文件会在页面加载的时候异步加载

之前本来选的是react-router来做前端路由、但是我发现它并不好用,后来有选择backbone来做路由,又发现仅仅为了一个路由而引入backbone不太划算,但是路由部分已经写成backbone风格的代码,于是写了一个mini版的前端路由兼容backbone,来实现无缝切换,代码一共才十几二十行,基于hash实现,完美支持webpack异步加载,并带loading效果,之前为了amd的loading效果改过react-router,发现很麻烦,所以就不用了,我要的是轻量,简洁

前端样式部分采用了weui做为基础框架,有些组件还是挺好用的,将其封装好之后,发现我只用到了部分组件,图标部分我用的是阿里的字体图标,于是把weui项目源码clone下来,只引用我用到的部分,大小瞬间减了一大半,有没有

对于react其实也是有争议的,一个是它的体积,一个是它的语法jsx
先说说语法吧,我感觉写习惯之后,完全不想再写jquery,从前我也是一个jquery爱好者,感觉jquery无所不能,而且为项目也写了很多插件,各种jquery,后台的前端也是我用jquery+bootstrap写的一个框架。其实一开始看到react的时候,还没什么感觉,因为项目都是基于jquery,也不能说换,就在fb官网看了下例子,就过去了
后来总是有人问我react的问题,为了解答他的问题,我就到官网去看文档,然后在本地测试,OK之后告诉他,其实是这样的,噼里啪啦的说一大堆,后来问得多了,我也看得多了,我也渐渐的对它感兴趣,并决定下次新项目可以试试,于是经常到git上关注它的最新动态,我记得那时的版本是0.14吧,当时react还只是单个文件,现在已经拆分成react 、dom项目模块了,对于jsx的写法有人说是退步了,有人说是进步了,其实主要也css部分吧,这一部分我还是通过外部样式引入class,只在jsx里面写渲染逻辑,组件小而美,没有dom操作,所有行为都可预测,当然了也有同事始终忘不了jquery,于是在react里面经常有('#id').addClass('cls') 这样的代码,还有(‘#id’).data(‘id’),$(this).find(‘input’) 各种查找元素,不得不佩服jquery的深入人心,不,应该是深入骨髓了,是时候刮骨疗伤了,咳咳

还有一个就是它的体积,gzip之后居然还有40k,对于有点强迫症的我来说,确实有点大,所以我只能尽量压缩其它模块的大小,还好加上cdn跟cache之后,除了第一次大一点,其它都如丝般顺滑,一直都想fork一份react代码,然后做个mini版,但是一直没有时间去研究它的代码,后来发现携程好像做了一件我一直想做的事情,就是把react给精简了,用了一下发现大部分页面都没有问题,由于时间问题,没有深入,也没有切换,现在不知道发展得怎么样了。

ajax模块也是组件封装的一个,为什么没有用jquery或zepto呢,还是那句话我为了精简,当然了自己封装的模块同时兼容了jquery的ajax,并且在里面加了一些拦截器,处理登录状态判断,超时处理,异常处理,调用ajax的方式基本不变,代码不是一个人在那些,有些保留下来会比较好,方便其他人

到这里我都没有贴代码,为什么呢,其实主要表达的是一个思想,代码每个人写的都不一样,同一个功能实现的方式有N多种,写出什么样的代码,主要是一个的技术沉淀与思想沉淀

由于项目成功上线,以及后面的陆续迭代,让我对前后端分离更有信心,网上听得最多的就是nodejs做前端中间层了,但是谁用谁知道。

由于埋下了基于nginx开发前端的伏笔,后面陆续做了几个类似的项目,在一次很偶然的机会下,把lua编译进了tengine模块,并在tengine里面,用lua写了几段处理代码,对nginx + lua 开发开始向往,于是有了这段基于openresty的开发经历,在这里可以分享给大家

© 著作权归作者所有

共有 人打赏支持
-外星人-
粉丝 45
博文 45
码字总数 22101
作品 0
深圳
程序员
基于OpenResty和Node.js的微服务架构实践

什么是微服务? 传统的单体服务架构是单独服务包,共享代码与数据,开发成本较高,可维护性、伸缩性较差,技术转型、跨语言配合相对困难。而微服务架构强调一个服务负责一项业务,服务可以单...

个推
07/02
0
0
Openresty中使用LuaJit

今天在使用Openresty的时候,遇到了一个问题: local resty_sha1 = require "resty.sha1" 想使用resy.sha1的时候,出现了error,log如下: 2013/09/25 09:00:40 [error] 19620#0: *3 lua en...

timingbob
2013/09/25
0
0
OpenResty(nginx扩展)实现防cc攻击

OpenResty(nginx扩展)实现防cc攻击 作者:朱 茂海 /分类:Nginx, 服务器安全 /Tag:OpenResty 文章目录 [隐藏] 一、安装依赖 二、luajit安装 三、openresty安装 四、nginx配置 防cc攻击,推荐使...

epiclight
2015/06/05
0
0
在 OSX 上用 openresty 架设自己的 Git Web Service

在 OSX 上用 openresty 架设自己的 Git Web Service 目录 - 介绍- 下载编译安装 openresty- 启动 openresty- 下载编译运行 sockproc 守护进程- 下载安装运行 codea-scm web 服务- 在 iPad 上...

FreeBlues
2015/06/22
0
0
个推首席架构师Qcon分享 |微服务架构的那些事儿

微服务架构需要注意哪些问题? 微服务架构,首先考虑客户端与服务端之间的通信问题。有两种解决办法,一是客户端与多个服务端直接进行通信,但存在对外暴露接口细节、众多接口协议无法统一、...

个推
07/02
0
0
OpenResty学习资料收集

1、nginx-lua-module使用 https://github.com/iresty/nginx-lua-module-zh-wiki https://github.com/openresty/lua-nginx-module#readme 2、OpenResty最佳实践 https://www.gitbook.com/book......

workming
06/29
0
0
在 OS X 中使用 OpenResty

移除 lighttpd 在 Mac OS X 上安装lighttpd 的时候,我使用 launchctl 来实现 lighttpd 的自动启动。现在,只需要 unload 即可。 launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.li...

Surjur
2015/08/01
0
0
OpenResty 1.13.6.2,基于 Nginx 与 Lua 的 Web 平台

OpenResty 1.13.6.2 已发布,从这个版本开始,官方将会提供 64 位 Windows 原生二进制包,也为 Ubuntu 18.04 Bionic 提供新的 yum 包。 下一个 OpenResty 版本将基于 nginx core 1.13.12 或即...

淡漠悠然
05/23
0
9
Building openresty1.7.10.1 with luajit on windows

Building openresty1.7.10.1 with luajit on windows using Cygwin, 在windows下用Cygwin下编译带Luajit的openresty 2013-11-27 15:39 815人阅读 评论(0) 收藏 举报 (heeroz原创 )First i......

epiclight
2015/06/03
0
0
基于Ngnix的应用服务器-OpenResty

Nginx是广泛使用的Web服务器和负载均衡服务器,由俄罗斯人开发。基于Nginx的Lua支持的OpenResty自然也是短小精悍,这个是由中国人章亦春开发和维护。中国程序员越来越了不起! OpenResty的官...

openthings
2015/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、登录流程图 二、小程序客户端 doLogin:function(callback = () =>{}){let ...

公众号_好好学java
36分钟前
0
1
流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
今天
6
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
今天
138
7
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
1
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部