西涛offbye-移动全栈技术博客

近几年 ，前端领域出现了两大玩家：Google 发布的 Angular、Facebook 开发的 JavaScript 库 React。在 2018 年，又有一个实力雄厚的玩家加入了这场竞争：Vue.js，它 很直白地表示出了自己 的豪心壮志——立志成为最受欢迎的 JavaScript 框架。在深入了解这些流行框架的总体比较之前，让我们先看看它们的起源。Vue、React 和 Angular 简史AngularGoogle 的一名员工 Misko Hevery 当时正...

在对基于Cordova的Android混合App的性能优化过程中，遇到了很多在不同安卓版本手机上的Bug，很多都是安卓不同版本的系统webview的差异导致的，有可能是安卓系统的问题，也有可能是手机厂商修改webkit带来的问题，这些问题从前端技术层面是很难解决的，修改和测试成本都非常高。因此我想通过使用统一webkit内核的大招来解决，目前有2个方案可选，使用Crosswalk内核或腾讯浏览服务X

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。 研究了f8app的项目结构后，发现f8app服务器端的代码比较少，并且弄清楚数据模型和接口协议，对于后面理解客户端的实现有帮助

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。 本文分析f8app android代码的结构和技术实现，阅读本文的前提是熟悉Android开发。 f8app android代码结构分析Re

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。模块引用在E

本文开始分析f8app核心js部分的源码，这篇文章将非常难理解，原因了Redux框架引入了很多新概念，使用了大量函数式编程思想，建议先把后面的参考文章仔细过一遍，确保理解后再看本文。React Native的理念是Learn once,write anywhere, Android和iOS App端的js代码是放在一起的，以便最大限度的复用业务逻辑，UI部分的可以根据平台特性各自实现，React n

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。 本文分析f8app iOS代码的结构和技术实现，阅读本文的前提是对React Native和iOS开发有一定的了解。 f8app ios项目

今天想研究下ReactNative Android和iOS的实现原理，发现已经有人已经分析过源码了，2篇文章都是近期写的，真好。不过后面我还是自己去看看源码吧。iOS RN实现分析 React Native 从入门到源码分析-了解RN百态 Android RN实现分析 React Native之底层源码分析篇

原文 http://www.cnblogs.com/yexiaochai/p/3759959.htmlwebapp小钗从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！webapp使用JavaScript修改页面；紧接着再从服务器传递更多数据然后再修改页面，如此循环。从性能的角度看，在现代

这篇文章本来是繁体中文的，我把它转成简体放在这里。原文是http://lifemap.in/es2015-in-action/，对于Javascript ES6 介绍的比较全面。前言历时将近6年的时间来制定的新ECMAScript标准ECMAScript 6（亦称ECMAScript Harmony，简称ES6）终于在2015年6月正式发布。自从上一个标准版本ES5在2009年发布以后，ES6就一

如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，我也听过，但之前也真的是听听而已。    现在就看看吧，这些规范到底是啥东西，干嘛的。   一、CommonJS  CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行

前言正如上图所示，使用 gulp-livereload，可以实时保存刷新，那样就不用按F5和切换界面了，无形中省了好多时间，有没有！：DGulp.js：比 Grunt 更简单的自动化项目构建工具gulp-livereload：顾名思义，这是 Gulp.js 中的其中一个插件，本文的主题就是它了。安装第一步：全局安装gulp 和当前目录部署 gulp 和

原文地址最近一个季度，我们都在为手Q家校群做重构优化，将原有那套问题不断的框架换掉。经过一些斟酌，决定使用react 进行重构。选择react，其实也主要是因为它具有下面的三大特性。React的特性1. Learn once, write anywhere学习React的好处就是，学了一遍之后，能够写web, node直出，以及native，能够适应各种纷繁复杂的业务。需要轻量快捷的，直接可以用R

H5性能优化意义对于一个H5的产品，功能无疑很重要，但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app，如果不把性能优化做起来，将极大地影响用户使用产品的积极性。用户感受当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒

最近帮忙折腾Cordova App，因为是商城类App，需要接APP微信支付和支付宝支付，于是先到github上找相关的插件解决，微信支付很顺利的用插件解决了，支付宝插件就不那么顺利了，网上的几个插件要么过时了，要么实现不合理或不完整，最后还是自己改了个支付宝插件。

这篇文章提到的对于H5混合应用的性能优化很有参考价值。我们的第一场是来自腾讯的黄俊涛，给大家分享的题目是《QQ空间面向移动时代Hybrid架构设计》。黄俊涛，现任腾讯高级工程师，有非常丰富的经验，并且是Hybrid专家，现在对混合开发非常有研究。黄俊涛：大家下午好！我是来自腾讯QQ空间的黄俊涛，先作个简单的自我介绍：我在腾讯英文ID是叫Shine，所以大家其实叫我“Shine（帅）哥”就可以了。我

最近研究了用swift开发cordova插件的问题，事实证明用swift开发cordova插件是完全可行的，不要再去折腾烦人的oc代码了！主要参考了一个地理围栏插件 https://github.com/cowbell/cordova-plugin-geofence ，然后自己根据需求开发了百度地图标注和带扫描效果的二维码扫描iOS cordova插件，官方的那个实在太差了。用swift开发插件主

今天帮人解决了iphone4下载页显示错误的问题，css3 media query坑啊，不容易匹配到。/** * iPhone 4/4s landscape & portrait */@media only screenand (min-device-width: 320px)and (max-device-width: 480px)and (-webkit-device-pixel-r

这是我在MDCC 2015中国移动开发者大会发表的“HTML5移动应用多端开发架构实践”的演讲ppt，最近又有人要ppt，放在这里吧，欢迎下载！

最近公司的React native App(云订货)用上CodePush实时更新App技术了，棒棒的CodePush 是微软开发的，可以实时更新 React Native 和 Cordova 应用。CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新到 (JS, HTML, C

今天把移动Web站封装成了Android App，发现还是用Cordova封装方便，即使没有使用到任何原生的API， 主要是兼容性好，配置比用系统WebView方便太多了。默认继承的CordovaActivity只有一个WebView，因此没有不方便通过java代码添加View，通过重新makeWebView，createViews 2个方法可以实现使用自定义的layout, 方便的添加自己的原生

＃项目升级到ionic1.0.0正式版问题汇总＃2015年ionic框架终于发布了1.0正式版，这种终于下决心把项目的四个平台版本（Android和iOS的手机和平板版本）都从几个月前的Beta升级到了1.0，折腾了一周，终于比较圆满地解决了升级问题。view缓存问题ionic1.0.0 默认会缓存十个viewstate，这个应该是从AngularJS1.3版本引入的，这个功能可以让我们的应用中回退

原文 http://blog.ionic.io/announcing-ionic-1-0/     2015年5月12日，在经过了14个Beta版本和5个RC版本后，HTML5移动应用开发框架Ioinc终于发布了1.0.0最终版本，从发布第一个Beta版本开始，到现在已经经过了一年时间。    Ionic现在是Github上的顶级项目之一，已经有16000多个star，基于Ionic创建的App已

使用HTML5和Javascript开发的移动应用，和典型的现代Web前端项目一样，有着大量的Javascript，HTML和CSS代码，因此前端工程化在HTML5移动应用开发中同样有着重要意义，可以避免大量重复性的工作，提供效率和质量，优化产品的性能。            目前前端工程化比较通用的框架主要有国外的grunt，gulp，百度的F.I.S等，这些框架基本上都是基于Node.

昨天研究Hybrid Android App中js和java代码之间数据共享的问题，具体场景是用户登录是android java实现，但有些业务是使用html5开发的，因此登录后到主页后，调整到某些HTML5业务页面需要传递用户的access_token,  目前想到的办法是在js端通过cordova插件访问存在Shared Preferences中的数据，但由于数据是异步返回的，需要一定的时间，

Web技术的优势早已被广大应用开发者熟知，比如可与云服务轻松集成，基于响应式UI设计的精美布局，高度的开放性，跨平台能力, 高效的分发与部署等等。伴随着移动互联网的快速发展与HTML5技术的逐步成熟，Web应用已经成为移动端跨平台应用开发的热门解决方案。然而要在移动端充分利用Web技术的优势，仍然有许多障碍。　　Crosswalk作为一款开源的web引擎，正是为了跨越这些障碍而生。

在HybridApp移动跨平台开发中，android平台会遇到一些比较特殊并难以解决的问题，这些问题在原生应用开发中很easy， Android的返回键处理就是问题之一，假如我们要实现一个在很多App中都有的在主页按返回键弹出对话框提示用户退出应用的功能，在原生应用开发中是很容易的，只要在onKeyUp事件里面对返回键事件进行处理就可以了。按2次返回键退出应用的Java代码如下：private

从Android4.4（KitKat）开始，可以使用DevTools对原生Android应用程序的Android WebViews内容进行调试。调试WebViews要求：1.在Android设备或模拟器运行Android4.4或更高版本，并且Android设备上启用USB调试模式。2.Chrome 30或更高版本。更强大的WebView界面调试功能需要Chrome31或更高版本

现在最新的Cordova 3以上的版本支持启动画面了，是通过cordova插件实现的。目前Splash插件支持android，ios，blackberry等多个平台。添加插件等过程如下：添加SplashScreen插件在cordova项目目录运行：cordova plugin add org.apache.cordova.splashscreen这个命令从插件git

本文来自谷歌Android官方的Web App开发指导手册的第三篇——WebView构建应用：在你的Android应用布局中使用WebView来展现web页面，你可以创建从Javascript到客户端Android代码的接口。文档内容将 WebView 加入你的应用¨     在Webview中使用 JavaScript¨    

http://developer.android.com/guide/webapps/migrating.htmlMigrating to WebView in Android 4.4IN THIS DOCUMENTUser Agent ChangesMulti-threading and Thread BlockingCustom URL Handli

The future is here – more and more handhelds are being built with high definition screens. The iPhone ships the Retina display, while on the Android (as of August 02, 2010) HDPI accounts for more th

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。media type让我们先了解一下media type，其

原文：http://ionicframework.com/blog/ionic-vagrant-android/            在开发HybridApp应用时，配置Ionic, Cordova, and Android开发环境是件麻烦的事情，是一 个最大的痛点。       特别是对于在Windows平台下开发的新开发者来说，在各种各样的类linux shell环境下配置nodej

开发手机页面以及Hybird应用时，调试曾经是个老大难问题，不时需要用写log等方式曲线救国。实际上，Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能，只是看样子还有好多人不知道，所以写下来分享给各位。本文遵循CC协议，欢迎转发，但请注明作者和出处(http://ngnice.com/posts/659f97a6f06c90 )。操作分成电脑和手机

使用AngualrJs开发移动App已经快半年了，逐渐积累了很多AngularJS的问题，特别是对于用惯了Jquery的开发者，转到AngularJS还是需要克服很多问题的。不像Jquery那样侧重DOM操作，AngularJS是以视图模型和双向绑定为核心的。     下面的内容假设你已经了解前端 MVC 概念，并对 AngularJS 有了一定经验，初学者读起来可能比较艰深晦涩。本文的总结会

前段时间做HTML5 Web App的研究和设计，仔细了解了以下的流行Web app框架Native APP、Web APP、Hybrid APP特性对比：    　Native AppWeb AppHybrid App开发成本高低中跨平台

AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。  AngularJS诞生以来，吸引了大量的目光，也迅速成为了Web开发领域的新宠。本文整理了2013年度一些非常有价值的Ang

本文是作者调查Data URI在移动端性能表现的第三篇文章，第一二篇分别是：在移动平台上，Data URI要比原链接慢6倍；Data URI性能：不要在Base64上指责它。下面是笔者对原文的翻译。大约一个月之前，我们做了一个研究，关于使用Data URI构建Web组件性能不佳的研究。在发表调查结果后，来自Web性能社区的一个最为持久的问题也随即显现出来： 怎样把Data URI和