京东核心业务小程序开发框架taro
2019-04-09
来源:知晓程序
浏览量:621

Taro 是什么?


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


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

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


Taro 能提供什么?


 一次编写,多端运行


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

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


现代前端开发流程


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

  • NPM 包管理系统

  • ES6+ 语法

  • 自由的资源引用

  • CSS 预处理器和后处理器(SCSSLessPostCSS

对于微信小程序的编译流程,我们从 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 (

            <View className='index'>

            <View className='title'>{title}</View>

            <View className='content'>

            {list.map(item => {

                return (

                    <View className='item'>{item}</View>

                    )

                })}

            <Button className='add' onClick={this.add}>添加</Button>

            </View>

            </View>

            )

    }

}


良好的开发效率和体验


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


自定义 ESLint 规则


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


类型安全和运行时检测


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


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


Taro 标  签: 小程序定制开发

联系我们

010-84150507
售前服务
技术支持 Service@qeebu.cn
留言