Amadeus

Amadeus

I am a Software Engineer in China. Mostly I code in javascript for UX. I'm also fluent in node, python, rust, java and enjoy full stack programming.

Shen Zhen, Guang Zhou, China
38 posts
Website

前端的babel优化法

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

  • Amadeus
    Amadeus

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

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

  • Amadeus
    Amadeus
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通过inheritFromWidgetOfExactType方法找到上层的InheritedContainer组件,并获取计数num并展示在一个按钮里面。 class InheritedContainer extends InheritedWidget { static InheritedContainer of(BuildContext context) { return context.

  • Amadeus
    Amadeus
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

  • Amadeus
    Amadeus
Rust概述
rust

Rust概述

Rust是Mozilla公司发起的一个开源项目。它注重安全、性能和并发,是一种系统级编程语言。Rust是针对多核体系提出的语言,并且吸收一些其他动态语言的重要特性,比如不需要管理内存,比如不会出现Null指针等等。相比C/C++这些底层语言,rust不但具备底层控制力,且具有良好的高级语言特性,生态系统。Rust一经诞生就被运用于servo浏览器内核项目开发,具备实战经历。 首先,在学习rust之前要有这样的预期:rust不是python,不要期望一个星期迅速掌握。 然而,掌握之后好比光剑在手,可以尽情释放原力。 近期学习rust,是因为rust是支持webassembly的第二个语言,且性能强悍。 安装 & 升级 安装:

  • Amadeus
    Amadeus