juju's Blog

Thoughs, ideas and stories

Embed Flutter in Android

安卓全页面嵌入 全页面嵌入flutter使用io.flutter.embedding.android.FlutterActivity 部分页面嵌入 部分页面嵌入flutter使用io.flutter.embedding.android.FlutterView和io.flutter.embedding.engine.FlutterEngine 在onCreate方法里面flutterView.attachToFlutterEngine(flutterEngine);onDestroy方法里面flutterView.detachFromFlutterEngine();同时还要把其他几个声明周期状态传到flutter,例如flutterEngine.getLifecycleChannel().appIsResumed();

前端的babel优化法

* 发现系统问题 * 优化protobuf生成的js * 使用babel修改protobuf产出文件 * 删除部分js代码 * 替换部分js代码 * 总结 大前端的时代,前端的重要性已经已经无可置疑。在某些情况下,前端甚至决定了产品的成败。体验优良,性能卓越的前端产品留得住用户,体验糟糕的前端即使后端能力再优秀,最后也难逃被用户卸载的命运。 为了追求前端的性能,前端需要对构建出来的js负责,确保发送给用户的js没有一行多余。这样才能确保最快的加载时间。但是,这个目标通常是比较难做到的。其中一个原因是程序员对webpack构建出来的js都包含什么不是十分清晰;另外一个原因是:大部分项目用了很多轮子(npm包),以确保项目可以按时上线。这些轮子虽然可以使用,但是代码不一定是精简的,我们又对这些代码没有控制能力。即使有些冗余,很多人也都只是忍了。 这里以我们的项目为例介绍我们是如何解决这两个问题的。 发现系统问题 首先,我们需要分析一下我们的项目都用了哪些库,打包出来都多大。 我们用了一个工具webpack-bundle-analyzer [https://www.npm

你的js速度还可以快一倍以上

对,您没看错,速度杠杠的,秒杀任何前端技术,这就是webassembly(wasm)。 Webassembly是浏览器的字节码技术。这项技术使原生代码C/C++/Rust可以编译为wasm,并运行于浏览器上。相比原生开发,它跨平台,安全;相比js,它拥有显著的性能优势。 废话少说,直接看demo [http://static.juju.one/wasm/]。 这是我机器上跑的几个简单的算法做的测试,我的天,这可不止一倍啊。(两种实现保证完全一致,代码可以到这里 [http://github.com/gliheng/wasm-perf]围观) 温馨提示:demo移动端暂时打不开,性能测试需要很多内存呢,你的小手机吃不消吧... 这么🐂x的技术,怎么快速上手呢?我们接下来试一试。 安装依赖💾 * Rust

flutter

Flutter中的数据传递:InheritedWidget, InheritedModel

Flutter中标准的数据传递方法是通过属性传递,类似于react中的props。对于复杂点的UI,这样有时候会比较繁琐。一个属性可能需要跨越很多层传递给子子组件。 对于跨层传递,flutter原生支持如下两种方案:InheritedWidget和InheritedModel。 InheritedWidget 有些Flutter使用经验的开发同学,可能比较熟悉这样的代码。 通过Theme访问当前的界面风格:Theme.of(context).primaryColor 通过MediaQuery访问屏幕大小:MediaQuery.of(context).size 这两个类都是通过InheritedWidget实现的典范。调用组件可以通过Theme.of方法找到上层最近的Theme父组件,跨层获取到其属性,同时会建立调用组件和上层组件的观察者关系。当上层组件属性修改的时候,触发调用组件的更新。 我们通过下面简单的计数器例子,演示下InheritedWidget如何用。如下两个类:InheritedContainer包含了状态计数num属性,Counter通过inheritFromW

Flutter轻松上手
flutter

Flutter轻松上手

Flutter是Google推出的移动端跨平台开发技术。比起大家比较熟悉的原生开发,RN, weex等技术栈,它有以下优势: * 编译为原生ARM机器代码,执行效率更高。 * 建立在一套声明式API之上,app逻辑更容易理解。(类似于react的setState/build/diff/render的机制,老一代传统UI是命令式API) * 底层架构在skia绘图层之上,抛弃了OEM widget,因此跨平台行为一致,少有兼容性bug。 * 开发效率高。 使用flutter技术可以提升终端开发效率,得益于它的以下几个特性: 1. hot reload(热更新)能获得更快的界面反馈,不用坐等编译 2. Android

You've successfully subscribed to juju's Blog!