ON WEPY

ON WEPY

A modern, painless workflow for building WeChat Mini Programs
John Roberts | @omg_damacha

5/22/2018

wtf is WePY?
why would I use WePY?
  • Robust component system
  • Write modern javascript
  • Utilize Node JS
  • Leverage open source
  • Write better code

Original

WePY

Single file component

Robust component system

Robust component system

Wepy components are composable
  • Nested components
  • Extendable
  • Named slots
  • Component props

Example: Modal

Modal component

Error modal component

Component composition

Write Modern Javascript

Write Modern Javascript

The power of babel
  • WTF is babel?
  • WePY + babel + es2015 =
  • Entire WX api is wrapped in promise
  • Write javascript how you like to write javascript

Async/await & Promise.all

Node JS

Node JS

WePY's Node JS build system
  • Babel & typescript
  • CSS preprocessors (SASS, Post-css, less, stylus, etc.)
  • Html templating (pug)
  • Node environment variables
  • NPM commands

Using node environment variables

Leverage Open Source

Leverage Open Source

WePY loves Open Source
  • Familiar NPM workflow that developers already know
  • Active, gigantic community on GitHub & in WeChat groups
  • Open source components
npm install wepy-com-paper-drawer --save
npm install wepy-com-paper-flash --save

Write better code

Write better code

WePY leads to better code
  • Code reusability, DRY-ness
  • Code maintainability: cut down on spaghetti code
  • Performance: ImageMin, uglify, autoprefixer, etc.
  • happiness => productivity => better product

THE END

THE END

Slides available at wepy.johnny.sh

my wechat
https://yu-mi.us