zoukankan      html  css  js  c++  java
  • 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择

    看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的
    基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的
    react和vue2都是用mvvm模式,数据实时更新,适合app里面嵌入的网页使用,但用在传统web网页上对seo不太好,因为数据都放在js里面了,页面html只有简单的结构了。bootstrap比较符合web网站做seo的,兼容跨屏的同时又能保持数据输出。

    js框架性能测试对比Table Report
    http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

    ===============================================
    Bootstrap 4 Alpha 4 · Bootstrap Blog
    http://blog.getbootstrap.com/2016/09/05/bootstrap-4-alpha-4/
    Bootstrap 4 Alpha 4 出来了
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

    有他自己的cdn了,而且是https的,这样就不存在加载js大小的问题了,不同网站使用了这个,用户本地缓存过一个其他网站就不用再请求了
    bootstrap.min.js只有12.9k,主要是依赖jquery,jquery也用cdn加载就没问题了
    jquery看来用1.12.3版本的算了,这个压缩后才38.5k,ido01用的2.1.4版本的有82.2k

    -------------------------------
    Bootstrap 中文文档
    http://v3.bootcss.com/
    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
    为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
    一个框架、多种设备:你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备,这一切都是 CSS 媒体查询(Media Query)的功劳。
    特性齐全:Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

    ===================================
    vue.js
    http://cn.vuejs.org/

    Vuejs2.0 文档攻略-介绍
    http://larabase.com/collection/2/post/108

    简洁
    HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
    数据驱动
    自动追踪依赖的模板表达式和计算属性。
    组件化
    用解耦、可复用的组件来构造界面。
    轻量
    ~24kb min+gzip,无依赖。
    快速
    精确有效的异步批量 DOM 更新。
    模块友好
    通过 NPM 或 Bower 安装,无缝融入你的工作流。

    听了几节vue的视频,发现这个主要是适合界面里面数据经常变动的,有很多交互数据的,需要很多ajax请求的应用,一次性加载出数据的不适用,另外他只是个js库,主要是实现mvvm架构viewmodel数据绑定的功能,并没有对应的UI组件。

    vue这个跟Angular类似的,采用数据模版的方式,数据都放到js动态解析进去的,这种对需要seo的非常不利的,app里面不需要搜索引擎收录的,动态刷新数据的才适合使用,需要做页面里面的内容,关键字seo的网站不能用这种。

    开发一套带网站地图的文本页给爬虫,然后正常用户访问的时候重定向到angular渲染的对应页面
    这个对内容seo来说肯定不是最优解决办法

    ===================================
    Amaze UI | 中国首个开源 HTML5 跨屏前端框架
    http://amazeui.org/

    Amaze UI Touch 是基于facebook开源的React的,React Native是现在最流行的移动开发框架,资料也相当丰富
    react主要也是实现数据绑定的
    React也只是个js库,要快速开发还是得用基于react的Amaze UI Touch 框架来做才行。

    React.js 中文文档上线了
    中文文档地址 http://reactjs.cn
    GitHub地址 https://github.com/reactjs-cn/react-docs
    阮一峰的 "React 入门实例教程" http://www.ruanyifeng.com/blog/2015/03/react.html
    极客学院整理的文档 http://wiki.jikexueyuan.com/project/react/

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
    由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    ReactJS官网地址:http://facebook.github.io/react/

    Github地址:https://github.com/facebook/react

    编写Hello World - react native 中文网
    http://reactnative.cn/docs/0.31/tutorial.html
    react native只是基于reactjs,主要是生成app用的,采用ES2015 (也叫作ES6)最新javascript标准语法,开发方式跟纯web还是有很大差别的

    React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
    React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
    Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。

    看了下Amaze UI Touch 的发现css,js也是很多,而且js都是动态的(绑定的动态数据在js文件里面,每次都不一样的),不能用cdn缓存
    环境配置,先安装 Node.js 热更新是用nodejs来更新数据的

    =======================================
    ionic 教程 | 菜鸟教程
    http://www.runoob.com/ionic/ionic-tutorial.html
    ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
    ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
    ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。

    ============================================
    Vanilla JS——世界上最轻量的JavaScript框架(没有之一)
    https://segmentfault.com/a/1190000000355277
    Vanilla JS是世界上最轻量的javascript 框架(沒有之一),使用我们的产品部署策略,你的用户的浏览器向你的站点发送请求前就已经把Vanilla JS加载在浏览器里了。

    用户的浏览器甚至在未发起请求之前就已经将 Vanilla JS 加载到内存中了.
    不用任何代码. Vanilla JS 太流行了,以至于所有的浏览器在十年前就已经内置了它.
    vanillajs 这个其实就是原生js的用法了,不需要引入任何类库的,这个要自己写兼容性那些处理比较麻烦。

    要实现手机版的一些操作,特效就没那么容易了,或者写出来只能兼容一部分手机,毕竟这个是十年前就内置的js库了

  • 相关阅读:
    [PATCH] input: add driver for Bosch Sensortec's BMA150 accelerometer
    linux内核GPIO模拟I2C实例
    修改默认apn数据的方法
    Android平台开发WIFI function portingWIFI功能移植
    Silverlight中后台获取样式的方法
    Silverlight中读取Word
    Silverlight找到模板中的子控件
    根据年月来获取该年该月的天数
    Silverlight中Treeview中判断当前节点是否含有父节点
    修改 Linux /etc/profile 以后如何生效
  • 原文地址:https://www.cnblogs.com/zdz8207/p/bootstrap-web-h5-jsframwork.html
Copyright © 2011-2022 走看看