## 前端技术选型分析 得益于node的作为前端工具的强有力的生产力，近两年前端web技术获得突飞猛进了的发展，各种自动化工具，前端框架越来越流行。 网页正变得的复杂起来，越来越变得像一个网络应用程序了。 各种新技术如雨后春笋般的涌现出来，在新技术的浪潮中让我们显得有些不知所措，现在设计网页不得不重新考虑设计了，主要有两种选型方向： 1. 响应式 2. 单页应用 * * * * * ### 首先说响应式 你真的需要响应式吗，先来看优缺点，传统网站在手机上面体验如噩梦，需要专门为手机甚至不同设备都单独开发一套模板，这样在大公司，没个团队维护相应的模板时不是问题，但是对于初创企业，小团队而言，维护多套模板成本比较大，如果能用一套模板，能够自动适应不同设备的屏幕尺寸那就好了，不经节省了人力，也增加了用户体验，页面在不同尺寸下杜能较平滑的过度，能打造出比较好的用户体验。但是响应式网页对开发人员的要求比较高，代码质量要求更高，而且由于响应式网页在设计时专门针对不同尺寸屏幕写了不同的样式，并且做了优化，所以较单独的模板来说网页体质会稍微大一点，所以性能上有一定的损耗。 分析完优缺点后，那么问题来了，我的网页适合设计成响应式的吗？ 响应式网页的技术决定了哪些类型的网页适合用响应式技术来设计，通常来说页面结构简单，交互功能少，的页面适合响应式设计，比如企业官网，新闻阅读类网页，这类网页主要是展示型的，而不是重逻辑交互型的，而页面结构复杂，业务逻辑偏重，交互功能多的页面则不适合响应式设计，比如电商的商品详情页，购物车页面等等，这些页面业务逻辑较重，结构，功能度比较复杂，并且交互功能多，所以响应式设计则会很麻烦，所以不适合做响应式设计，最好手机版和电脑版各自单独开发一套专门模板，但是请注意，平板和手机上面其实体验差不多的，所以做手机模板时可以考虑兼顾一下平板，带点简单的响应式也可以，这样就不需要单独为平板设计一套模板了，总之灵活运用才是最好的。 * * * * * ### 再说单页应用 什么样的应用适合单页呢，单页的特点很明显，那就是很想一个应用程序，而不是传统的网页跳来跳去的白屏，如应用般流畅的操作大大的提高了用户体验，所以优点还是比较明显的，一般创业公司的项目很适合，体验做得好的话，会给用户很酷，眼前一亮的感觉，但是也有缺点，由于使用了前端框架，打包工具生成的代码，所以第一次访问比较慢，但之后的所有操作都会很快，因为不在请求模板了，之后的所有操作都是请求数据，而没有刷新。至于担心内存泄露的问题，其实也没有必要了，成熟的前端框架考虑的很全面， 并且现代浏览器也不是那么傻，所以完全不用担心这个问题，不要有传统网页开发时的根深蒂固的观念，总想着F5刷新了。 单页这么好，那么是不是所有网页都适合使用单页开发呢，其实不是的，单页有一个致命的问题不能够忽视，那就是没办法做SEO了，因为单页内容都是js运行时自动生成的，并且使用前端的路由，所以页面信息无法被搜索引擎抓了，所以需要考虑SEO的站点，比如新闻站，下载站这样重SEO的站点就不需要考虑了，一些偏后台，功能结构复杂，偏向于组件化的系统可以采用单页开发，其实不要以为页面结构复杂就不适合单页了，要知道单页最适合的地方就是大型的应用，因为实际开发中你就知道，越是在复杂的系统中采用单页框架开发，你的代码量就越少，这时越能体现出单页框架的威力。 还有向移动端，H5网页，创业项目类等都适合使用单页开发，尤其是组件式开发，后期维护方便太多了。 但是单页也不是万灵药，总结出来的规律就是，网页页面不会太多的适合单页，而那些臃肿，页面数量太多的程序则不那么适合单页了，一般页面数量在50个以内的可以适合单页，页面数量超过50个则不太适合了，不过也是可以灵活运用的，单页也可以与传统页面相互结合使用，比如支付宝下面的四个菜单，可以分为四个入口，没个入口里面就是单独的单页，可以采用类似这种模式。总之没有死的规则，需要灵活运用才能达到最好的设计。 > 如果项目臃肿，比如商城项目，想要单页的体验，但是用单页做又不合适，不想太激进，那么可以考虑尝试一下[SUI Mobile](http://m.sui.taobao.org/)也是不错的选择，现在很多商城项目用SUI Mobile的还比较多，原因不外乎SM相对于react的学习成本来说还是要低很多，但却能带来和react基本相同的的单页用户操作体验，所以性价比还是非常高的，尤其适合现有项目的迁移，先向SM迁移，等以后再慢慢转向react这种真正的单页也不迟。 * * * * * ### 扩展 - [有PC版的网站如何做一套手机版的网站出来](https://segmentfault.com/q/1010000004043075) - [移动前端开发之 viewport 的深入理解](https://segmentfault.com/p/1210000007532296) - [【全解析】屏幕尺寸，分辨率，像素，PPI之间到底什么关系？](http://www.chinaz.com/manage/2015/0902/441624.shtml) - [Electron开发跨平台构建流程设计](http://mp.weixin.qq.com/s/Yv1ss1X1K-QG9fEXGjZ_zw) - [如何利用 Electron 开发一个桌面 APP](https://mp.weixin.qq.com/s/BCouOyCRUhjF5stVyK8IsA) - [渐进式Web应用（PWA）入门教程（上）](https://mp.weixin.qq.com/s/LRxyuLe8cCE_S917yOkMbA) - [Flutter - 极速构建漂亮的本地应用](http://doc.flutter-dev.cn/) > Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的. - [Xamarin.Forms 简介 - Xamarin | Microsoft Docs](https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/get-started/introduction-to-xamarin-forms) > Xamarin.Forms 是本机支持的跨平台抽象 UI 工具包，让开发人员能够轻松创建可在 Android、iOS、Windows 和通用 Windows 平台之间共享的用户界面。使用目标平台的本机控件即可呈现用户界面，从而让 Xamarin.Forms 应用程序为每个平台保留相应的界面外观。本文介绍了 Xamarin.Forms 以及如何开始使用它编写应用程序。 [BAT等国内知名的互联网公司是怎么做到前后端解耦的？](https://www.wukong.com/question/6524835292317221127/) * * * * * [Elm + Rust 开发桌面应用](https://github.com/huytd/kanban-app)（英文）  目前，使用 Web 技术开发桌面应用，主要通过 Electron。它的缺点是，有时你只是想要在桌面上展示一个网页，不需要跟本地文件系统交互，但是不得不把整个 Chromium 浏览器和 V8 引擎包含在这个应用里面，导致不管逻辑是否复杂，任何一个 Electron 应用都至少有几十MB的大小。 这个项目展示了另一种开发桌面应用的可能。它的原理是，任何操作系统都有自己的 WebView，也就是说可以在应用程序里面调用 WebView 展示网页。那么可以使用 Rust 语言打包 WebView，而 JS 脚本部分交给 Elm 语言生成。由于 WebView 是系统提供的，所以打包出来非常小，一般只有几百KB，资源占用也很少。 [每周分享第 5 期 - 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2018/05/weekly-issue-5.html) * * * * * 无需托管的小型网页 [前谷歌设计师推出微网站建造工具 一切内容藏于URL中](https://www.toutiao.com/a6574896150887793155/?tt_from=weixin&utm_campaign=client_share&timestamp=1530863184&app=news_article_lite&utm_source=weixin&iid=33124962994&utm_medium=toutiao_android&wxshare_count=1) [alcor/itty-bitty: Itty.bitty is a tool to create links that contain small sites](https://github.com/alcor/itty-bitty) * * * * * [华为发布UI+ 鼠标拖一拖搞定App界面开发](https://www.toutiao.com/a6576490739025314307/?tt_from=weixin&utm_campaign=client_share&timestamp=1531286912&app=news_article_lite&utm_source=weixin&iid=33124962994&utm_medium=toutiao_android&wxshare_count=1) * * * * * update：2018-1-7 21:03:17