京东核心业务小程序开发框架taro

浏览:86 发表时间:2019-06-03 10:53:29

Taro 是什么?

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

现如今市面上端的形态多种多样,H5、App (React Native)、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,我们可以只书写一套代码,通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App、快应用等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。

Taro 能提供什么?

 一次编写,多端运行

既然是一个多端解决方案,Taro 最重要的能力当然是写一套代码输出多端皆可运行的代码。目前 Taro 已经支持一套代码同时生成 H5 和微信小程序,App(React Native)端也即将支持,同时诸如快应用等端也将于近期得到支持。

同时 Taro 也已经投入到了生产环境使用,目前已经支撑了一个 3 万行代码小程序 TOPLIFE 的开发,以及部分京东购物小程序和一起有局小程序,未来也将会支撑更多的京东核心业务小程序。

现代前端开发流程

和微信自带的小程序框架不一样,Taro 积极拥抱社区现有的现代开发流程,包括但不限于:

NPM 包管理系统

ES6+ 语法

自由的资源引用

CSS 预处理器和后处理器(SCSS、Less、PostCSS)

对于微信小程序的编译流程,我们从 Parcel 得到灵感,自研了一套打包机制将 AST 不断传递,因此代码分析的速度得到了很大的提高。一台 2015 年 的 15寸 RMBP 在编译上百个组件时仅需要大约 15 秒左右。

和 React 完全一致的 API 和组件化系统

在 Taro 中,你不用像小程序一样区分什么是 App 组件,什么是 Page 组件,什么是 Component 组件,Taro 全都是 Component 组件,并且和 React 的生命周期完全一致。可以说,一旦你掌握了 React,那就几乎掌握了 Taro。而学习 React 的资源也几乎是汗牛充栋,完全不用担心学不会。

Taro 和 React 一样,同样使用声明式的 JSX 语法。相比起字符串的模板语法,JSX 在处理精细复杂需求的时候会更得心应手。

// 一个典型的 Taro 组件

import Taro, { Component } from '@tarojs/taro'

import { View, Button } from '@tarojs/components'

export default class Home extends Component {

    constructor (props) {

        super(props)

        this.state = {

            title: '首页',

            list: [1, 2, 3]

        }

    }

    componentWillMount () {}

    componentDidMount () {}

    componentWillUpdate (nextProps, nextState) {}

    componentDidUpdate (prevProps, prevState) {}

    shouldComponentUpdate (nextProps, nextState) {

        return true

    }

    add = (e) => {

        // dosth

    }

    render () {

        const { list, title } = this.state

        return (

           

            {title}

           

            {list.map(item => {

                return (

                    {item}

                    )

                })}

           

           

           

            )

    }

}

良好的开发效率和体验

鉴于 Taro 的语法和 React 完全一样,因此编辑器/IDE 能够对 Taro 的支持和 React 是几乎一样的。现代的编辑器默认都对 JSX 进行了支持,如果没有,找一个插件也是非常容易的事情。但毕竟我们做 Taro 就是为了提升开发效率和开发体验,而真正使用 Taro 的人就是我们自己或正坐在我们旁边的同事。因此在此基础上,我们又对 Taro 开发体验进行了进一步加强。

自定义 ESLint 规则

我们之前提到过,当学会了 React,其实也差不多会 Taro 了。其中很重要的一个原因就是我们对 Taro 不支持的语法和特性单独写了 ESLint 规则:开发者只管写代码,写到不支持的语法/特性编辑器会报错,并给出报错信息和一个文档地址描述。

类型安全和运行时检测

JSX 的本质就是 JavaScript 的语法增强,所以例如没有 import 组件等语法错误在编译期就能发现。开发者也可以使用 TypeScript 或 Flow 来对代码的可靠性进一步增强,或使用 PropsType 在运行时进一步保障代码的鲁棒性。

高效的自动补全和 ES6+ 语法

Taro 标  签: 小程序定制开发


首页 | 关于我们 | 联系我们

广东八戒商务信息服务有限公司  公司地址:东莞市莞城街道东城大道75号金城大厦三楼

电话号码:0769-21988033  / 13717346818  邮箱:baiie@bajie9.cn

 

客服中心
热线电话
0769-21988033
售前咨询
13717346818
上班时间
周一到周五
二维码