sumaart

web site / mobile & h5 / brand design
less is more, art is freedom…

设计观点

Back

2016前端设计工艺趋势-企业网站篇

Share

Time:

2015-09-15 01:55:17

Author:

在多年的网站建设、开发生涯中,我们努力去研究和探索怎样可以提供网站的性能,总是会往高、大、深的知识领域去偿试和摸索,如:IO读写、反射代理、代码编译、数据库索引、内存管理等。但在操作企业官网项目的众多实际情况是服务器端对整个网页呈现的响应时间的影往往是很小的。实践发现前端的效率工艺往往是占有90%的影响度。

又另外2015云数据布署产品的火热化,如:又拍、阿里、腾讯、七牛。让我们更多接触类CDN等静态资源分布布署的产品,使得前端工艺需要更趋工程化管理,即前端变得不那么次要,也不那么简单。下面总结一下2016前端工程师需要掌握的前端设计工艺的三大点。


一、前端实时化

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器。本文首先介绍 HTML5 WebSocket 的基本概念以及这个规范试图解决的问题,然后介绍 WebSocket 的基本原理和编程接口。接下来会通过一个简单案例来示范怎样实现一个 WebSocket 应用,并且展示 WebSocket 如何在功能强大和编程简单易用上达到的完美统一。最后介绍了目前主流浏览器对 WebSocket 支持的状况、局限性以及未来的展望。


二、性能极客

YAHOO的34条前端优化定律,现在看来仍然是黄金守则。大体情况如:1. 减少http请求,2.压缩并优化js/css/image 3.尽量静态页面,从简原则 4.代码规范

(详情:http://www.sumaart.com/share-635.html)


三、前端工程自动化

 如今的前端开发中,已经不再只是一些简单的静态文件了,对于很多Web App来说,前端代码甚至比后端代码要更加复杂,更加难于管理,例如:


我们有许多的第三方库的依赖需要管理;

我们有独立的前端测试需要自动运行;

我们还有很多代码需要在发布时进行打包压缩;

⋯⋯

  所以构建一个自动化的前端开发流程是非常必要的

为了让前端项目更趋工程化,于是现在出现了众多不依赖于后端代码工具(node.js)的管理工具,对于前端开发者非常友好,例如:YEMAN、Jam、volo、component、Brunch⋯⋯,更有一些轻量的工具(bower、grunt)来搭建自己的前端开发流程。


四、前端服务化

所谓服务化,即使用者只需调用,而毋须知道内部的实现,说白了就是标准化。Node.js的出现使前端服务化成为可能。Node.js开发的系统可以作为接入层,调用Java、C++等提供的基础功能,处理数据库,然后将数据吐给浏览器进行渲染。简易言之,就是用Node.js代替业务逻辑这一层。最后造就的成果是,不仅Java,C++可以放弃业务逻辑,更专注于数据处理的基础服务,而且Node.js能更专注于业务逻辑,挺供API服务给浏览器端的代码进行调用。


用Node.js作为接入层,让前端涉足“后台”的业务成为可能,而且能提高开发效率,还能更方便地使用最新Web技术,如Big Pipe,WebSocket等对页面进行优化。

除了Node.js作为接入层提供服务以外,淘宝的赫门还提出了将前端Web Component作为一种服务,提供给后台使用。Javascript的AMD与CommonJS规范的订立使Javascript的模块化开发成为可能,也就自然而然地推动了前端的组件化。

以上是深圳网站建设专家-素马设计多年从业总结,欢迎广大专家一起探讨分享。