TypeScript React Native入门

上一篇我们介绍了TypeScript如何跟React搭配使用,这篇我们继续介绍如何在React Native中使用TS。

关于React Native,我之前写过一本React Native电子书, 如果不熟悉RN的话可以参考一下。

本文涵盖内容如下:

  • TypeScript & React Native
  • TSLint
  • Jest

more>>
TypeScript React入门

Javascript作为一门动态语言, 简单易学,容易上手,非常适合web开发(浏览器也只支持JS啊)。但是随着项目逐渐变大,动态语言的弊端慢慢显露出来,比如没有编译器检查,代码质量不容易保证,IDE支持有限, 不便于重构等等, 而且JS设计之初比较仓促遗留了很多问题,好在ES6等后续版本慢慢修复了很多问题。也有各种尝试将其它语言编译成JS来做web开发,包括GWT、Dart、Java、Scala、Kotlin、Go等,而微软出的TypeScript由于一系列的优点,算是目前最流行的吧。当前Web开发基本是三大框架三分天下:Angular、React、Vue,而Angular本身就是TS开发的,React和Vue也支持TS开发。本文就简单介绍一下如何用TS开发React。

另外Facebook自己开发的Flow也可以给JS添加静态类型,我之前写过一篇文章介绍React Native里面如何使用Flow,有兴趣的可以移步Flow使用

本文涵盖内容如下:

  • TypeScript & React
  • TSLint
  • Jest & Enzyme
  • Redux

more>>
接入微信SDK的坑s

最近做个app要接入一下微信sdk,按理说很简单的, 但是碰到很多坑, 记录一下。

more>>
照片合成webapp项目总结

最近做了一个小项目, 在微信里面根据用户选择的模板、用户微信头像、昵称、用户选择上传的照片合成一个图片,用户可以保存到手机上,然后发朋友圈。

说复杂其实不复杂, 总结一下其中踩过的坑。

more>>
前端高性能计算之四:GPU加速计算

人工智能是最近两年绝对的热点,而这次人工智能的复兴,有一个很重要的原因就是计算能力的提升,主要依赖于GPU。去年Nvidia的股价飙升了几倍,市面上好点的GPU一般都买不到,因为全被做深度学习以及挖比特币的人买光了😂。

GPU,全称Graphics Processing Unit,即图像处理器,早期主要用于显示图像使用。因为图像处理主要偏简单的矩阵运算,逻辑判断等很少,因此GPU的设计跟CPU架构不一样,也因此做到一个GPU上可以有很多计算单元,可以进行大量并行计算。网上找到一个视频,应该是Nvidia某年的产品发布会,形象地演示了CPU跟GPU的区别。http://v.youku.com/vshow/idXNDcyNTc1MjQ4==.html 。知乎上也有对CPU和GPU的对比https://www.zhihu.com/question/19903344

后来人们逐渐发现,GPU的这种特性还可以用于神经网络的训练,因为神经网络训练中也是大量的矩阵运算,然后原来的训练速度提高了几十倍,原来需要一周训练的模型,现在几个小时就可以出结果,于是神经网络飞速发展。。。

more>>
前端高性能计算之三:Rust -> asm.js & webassembly

前一篇我们探索了用Emscripten编译C代码到asm.jsWebAssembly,使前端代码执行速度大大提升,但是实际项目中由于C语言缺乏很多高级特性,不利于开发大型项目(说C可以开发操作系统kernel这种大型项目的同学不好意思,我没那么nb),而C++我又觉得太复杂,也没有用过C++做过大型项目,所以我最后选择了Rust

一开始也纠结过要用Go还是Rust或者Swift的,后来发现Go目前还不支持编译到WebAssembly,Swift按理说应该可以支持的,因为都是用LLVM做的编译器,不过没有找到好的资料,好像说要自己编译LLVM去支持https://stackoverflow.com/questions/46572144/compile-swift-to-webassembly 。另外对Rust的一些特性很是喜欢,听说Rust很复杂,比较像Scala和Haskell,而偏偏我对Scala还算熟悉,也学过一下Haskell,所以决定尝试一下Rust。

https://github.com/ChristianMurphy/compile-to-web 这里可以查看目前能编译到WebAssembly的语言。

PS, 话说asm.js和Rust都是Mozilla搞的呢。

more>>
前端高性能计算之二:asm.js & webassembly

前一篇我们说了要解决高性能计算的两个方法,一个是并发用WebWorkers,另一个就是用更底层的静态语言。

2012年,Mozilla的工程师Alon Zakai在研究LLVM编译器时突发奇想:能不能把C/C++编译成Javascript,并且尽量达到Native代码的速度呢?于是他开发了Emscripten编译器,用于将C/C++代码编译成Javascript的一个子集asm.js,性能差不多是原生代码的50%。大家可以看看这个PPT

之后Google开发了Portable Native Client,也是一种能让浏览器运行C/C++代码的技术。 后来估计大家都觉得各搞各的不行啊,居然Google, Microsoft, Mozilla, Apple等几家大公司一起合作开发了一个面向Web的通用二进制和文本格式的项目,那就是WebAssembly,官网上的介绍是:

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.

WebAssembly is currently being designed as an open standard by a W3C Community Group that includes representatives from all major browsers.

所以,WebAssembly应该是一个前景很好的项目。我们可以看一下目前浏览器的支持情况can i use webassembly

more>>
前端高性能计算之一:WebWorkers

最近做一个项目,里面涉及到在前端做大量计算,直接用js跑了一下,大概需要15s的时间, 也就是用户的浏览器会卡死15s,这个完全接受不了。

虽说有V8这样牛逼的引擎,但大家知道js并不适合做CPU密集型的计算,一是因为单线程,二是因为动态语言。我们就从这两个突破口入手,首先搞定“单线程”的限制,尝试用WebWorkers来加速计算。

more>>
推荐一些Chrome插件

推荐一些我用过的比较不错的Chrome插件。(长期更新)

  • SourceGraph, 自从我发现sourcegraph,我就把octotree禁用了,sourcegraph简直就是一个活生生的浏览器里的VSCode,有强大的IDE功能。
  • octotree,方便看github代码
  • Spaces,方便讲tabs分类搜藏起来, 这对于我这种长期开着100+个tabs的来说,确实很有必要,功能够用, 有些bug,暂时没找到更合适的。
  • Markdown Preview Plus,预览markdown。
  • UC二维码,将当前页面链接生成二维码

more>>
CSS In JS

自从2014年Christopher Chedeau做了CSS in JS的演讲之后, cssinjs的各种库纷纷出现,已经有好几十种了

css modules应该是很流行的了, 说实话我没有用过, 不过在浏览作者主页的时候意外发现了styled-components,发现这就是我想要的!大家可以看看下面几个视频,先有个大概印象。

more>>