Amadeus's Blog

前端的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

你的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

Switch Alt Key and Windows Key for a Better Dev Experience

I use both mac and windows for development. But keyboards are a bit different and very annoying. Especially when you use emacs, you need to press alt and ctrl a

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.

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

rust

Solve RLS could not be started

In case RLS could not be started in VS Code, run the following command to install rls manually will fix it. rustup component add rls-preview rust-analysis rust-src

v-model vs sync in vue

Both v-model and sync can be used for two-way binding between components. <comp v-model="bar"></comp> expands to: <comp :value="bar" @input="val => bar = val"></comp> <comp :value.

rust

For loop in rust

For loop in rust consumes(moves) the object, making it impossible to be used again. In this code, HashMap is consumed(moved). let mut m = HashMap::new(); m.insert(String::from("gaga"), String::from("m1")); m.insert(String::from("

rust

Dynamic typing in rust

Any trait is a trait that matches any type in rust. Use it as a trait object, allows for dynamic typing. The following code use Any trait with a HashMap to store anything in it. use std::collections::HashMap; use std::any::Any; fn

rust

Rust概述

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

frontend

WebAssembly起步

WebAssembly是一种可以在浏览器上运行的二进制可执行格式文件。它将成为浏览器进化史上又一次革命。自从浏览器问世以来，javascript就成为浏览器上执行程序的唯一标准，越来越多的应用程序通过javascript开发，并运行于浏览器上；而随着浏览器上h5程序功能的丰富，也对浏览器提出了更多的挑战...

clojurescript

Two ways to set and get property in clojurescript

There's two forms to get and set property in clojurescript. ;; get property (.-innerHTML el) (aget el "innerHTML") ;; set property (set! (.-innerHTML el) "Hi!") (aset el "innerHTML" "Hi!") In practice, use aget with aset or set! with

clojurescript

Access this in clojurescript

To access this in a clojurescript function, use this-as macro https://cljs.github.io/api/cljs.core/this-as (def fadein-view (reagent/create-class {:get-initial-state (fn [this] {:hidden true :height 0}) :component-will-appear (fn [cbk] (this-as this (reagent/set-state this {:hidden false}) (cbk))) ...

clojurescript

Complete re-frame Tutorial

In this tutorial, we'll introduce writing clojurescript app with reagent and re-frame. reagent is a simple wrapper around react, it makes writing pure functional component a breath. re-frame is like a redux in clojurescript's world. It is a architectural library to make big apps

SPA with Reagent

Reagent is a react wrapper in clojurescript. It allows you to write html template in hiccup form. like this [:p "Hello"]. Compared with Om, it's lightweight and has an easy learning curve. Here's steps to get started with reagent: Get to know

Clojurescript setup

Clojurescript is a fun language for frontend dev, especially when you're bored with javascript. Here's how to get started. Install Java8 Clojurescript compiler depends on java8. Install java8 or up on oracle's site. Install Leiningen Leiningen is a build tool for clojure. Just follow

clojurescript

Create javascript class with prototype methods in clojurescript

When working with clojurescript, you may need to integrate with javascript codebase that asks you to provide a javascript class. Here's how to create such thing: define a type with methods in it using deftype. (defprotocol IProvider (getData [this cbk] "Just bark"

clojurescript

Import clojurescript into ES6 module

In case you have a clojurescript codebase and you want to use it in your ES6 project. Sadly exports-loader does not work with it out of the box. Here's what to do. Mark exported functions using ^:export metadata. ;; algo/core.cljs (defn ^:export answer

linux

Use emacs shortcut in ubuntu

Emacs shortcut is convinent for text input. (Ctrl+F forward, Ctrl+B backward, etc.) Input boxes on ubuntu does not use emacs shortcut. This command modify system defaults to use emacs keys. gsettings set org.gnome.desktop.interface gtk-key-theme "Emacs" To go

frontend

webpack secrets

Here's some tricks to use with webpack. Customize require.ensure load path By default, require.ensure load script based on the page's path. To change this path, set it with this: __webpack_public_path__ = 'static/js/' external require with __non_webpack_require__ requirejs

Change Mac GUI app environment variable

Application launched from finder on mac does not respect environment variables set by bash. Here are some methods to set environment variables for GUI applications. Simplest method: modify via bash NODEENV=development ./trader.app/Contents/MacOS/Electron Global method: launchctl setenv NODE_ENV development

react

Using a proxy for communication between two components in reactjs

This is obsolete. Use mobx or redux for complex state management. Communication between components is usually done like this. Child component wants to talk to it's ancesters: In this case, pass a function or states as props down the chain. Parent component wants to

frontend

React gotcha list

React is nice. But due to its complexity, some gotcha is bound to come up in development. Here, I keep a list for future reference. this.props.children is an array if there are multiply children, a ReactElement if there's only one children. (V0.

Go Scan, Scanf, Scanln, ReadString

In go, 4 methods are commonly used for read from stdin. Scan, Scanf, Scanln, ReadString. They are different in that: Scan read space separated values into successive arguments. Scanln also read space separated values into successive arguments, but terminate until a new line is

Caveats regarding react event delegation

React's mechanism of vitual DOM is well known. I recently came into two caveats that might need some attention for js developers. Event delegation React's event delegation handler is attached to the document. When it receives an event, it dispatch a synthetic event accross