1.
INTRO TO WEEX:
MOBILE APPS WITH VUEJS

2.
@Rafael_Casuso
A B O U T M E
•CTO @StayApp
•CEO @SnowStormIO
•Organizer @VueJsMadrid,
@BotDevMad
•Software Engineer with +10 years
of experience leading teams and
developing.
•Software Architect looking for
revolutionary ways to change the
world.
•Specialties: JavaScript, NodeJS,
Conversational Intelligences.
2

3.
WHAT IS WEEX?
+ INITIAL

4.
OVERVIEW_
‣ FRAMEWORK TO DEVELOP MOBILE APPS WITH MODERN WEB SYNTAX
‣ ITS RENDER ENGINE IS DECOUPLED FROM SYNTAX
‣ IT SUPPORTS VUEJS AND RAX

5.
JS BUNDLE_
‣ VUEJS-LIKE JAVASCRIPT APPLICATION IS COMPILED INTO A JS BUNDLE
‣ WEEX JS BUNDLE CAN BE DEPLOYED AND DISTRIBUTED AS STATIC RESOURCE

6.
FUNDAMENTALS
+ INITIAL

7.
WEEX SDK_
‣ A NATIVE MOBILE APP INCLUDES WEEXSDK
‣ WEEX SDK BUNDLES AND FETCH JS BUNDLE FROM WEBSERVER
‣ WEEX SDK RUNS A JAVASCRIPT ENGINE TO RUN JS BUNDLE
‣ WEEX JS BRIDGE EXPOSES AN API TO COMMUNICATE JS BUNDLE WITH
NATIVE SIDE FOR STORAGE, MESSAGING, ANIMATION, NETWORK
COMMUNICATIONS, ETC

8.
ENGINES_
‣ JAVASCRIPT ENGINE RUNS JS BUNDLE AND SENDS INSTRUCTIONS TO
NATIVE RENDERERS
‣ JAVASCRIPTCORE IN IOS AND V8 IN ANDROID
‣ EACH WEEX APP GENERATES A JS BUNDLE BUT A SINGLE INSTANCE OF
JAVASCRIPT ENGINE IS USED FOR PERFORMANCE
‣ VUE RUNTIME IS INCLUDED AND NOT BUNDLED

9.
DEVELOPMENT
+ MEDIUM

10.
DEVELOPMENT_
‣ A WEEX APPLICATION TARGETS WEB, IOS AND ANDROID
‣ IT SUPPORTS VUEJS 2+ SINGLE FILE COMPONENTS SYNTAX
‣ IT USES NPM AS PACKAGE MANAGER
‣ IT USES WEBPACK AS BUNDLER
‣ SEPARATED BUNDLES FOR WEB AND MOBILE
‣ VUE-LOADER IS THE COMPILER OF VUE FILES TO WEB JS BUNDLE
‣ WEEX-LOADER IS THE COMPILER OF VUE FILES TO WEEX JS BUNDLE

11.
WEEX COMPONENTS_
‣ INSIDE <TEMPLATE> YOU CAN ONLY
USE WEEX BUILT-IN COMPONENTS
AND YOUR CUSTOM COMPONENTS
‣ NOT ANY HTML TAG
‣ UNDER THE SCENE, WEEX USES
NATIVE WIDGETS FOR CONSISTENCY
‣ RENDERED INTO NATIVE VIEWS

12.
STYLES_
‣ WEEX BOX MODEL IS BASED ON WEB BOX MODEL, SO THERE ARE
HEIGHT, WIDTH, MARGIN, PADDING AND BORDER PROPERTIES
‣ WEEX STYLE BOX MODEL SUPPORTS FLEXBOX FOR PAGE LAYOUT,
INCLUIDING CONTAINERS AND ITEMS
‣ POSITION BY DEFAULT IS RELATIVE
‣ TRANSITION AND TRANSFORM ARE SUPPORTED
‣ OVERFLOW IS HIDDEN BY DEFAULT
‣ SUPPORTS PSEUDO-CLASESS ACTIVE, FOCUS, DISABLED AND ENABLED
‣ CSS UNITS SUPPORTED ARE ONLY PXs, RELATIVE TO 750 WIDTH

13.
WEEX MODULES_
‣ ALLOW ACCESS TO NON-UI
NATIVE FEATURES FROM VUE
FILES
‣ weex IS A GLOBAL OBJECT
AVAILABLE FROM VUE FILES
‣ weex.requireModule(‘MODUL
E_NAME’)
‣ EXAMPLE:
http://dotwe.org/vue/
6b7c6e5a9313ed426b5f9019f5394b75

14.
WEEX VARIABLE_
‣ AVAILABLE AS GLOBAL THROUGH weex
‣ CONFIG EXPOSES ENVIRONMENT PROPERTIES
‣ SUPPORTS EVALUATES IF A COMPONENT OR MODULE IS SUPPORTED

15.
NATIVE-TO-WEEX-TO-NATIVE COMMUNICATION_
‣ COMMUNICATIONS IS POWERFUL AND ASYNCHRONOUS THROUGH
MESSAGING
‣ NATIVE METHODS CAN TRIGGER AND RECEIVE MESSAGES WITH PAYLOAD
‣ JAVASCRIPT IN WEEX RECEIVE AND CAN TRIGGER EVENTS TROUGH THE
‘GLOBALEVENT’ MODULE

16.
TOOLS_
‣ WEEX PLAYGROUND: http://dotwe.org/vue/
‣ WEEX PLAYGROUND APP: https://weex.incubator.apache.org/
tools/toolkit.html
‣ WEEX TOOLKIT: CLI FOR SCAFFOLDING AND UPDATE
‣ WEEX DEVTOOLS FOR INSPECT NATIVE DOM TREE, SET
BREAKPOINTS, SEE NETWORK REQUESTS INFO AND LOGS
‣ WEEX MARKETPLACE FOR COMPONENTS

17.
SET UP
+ MEDIUM

18.
BASIC SETUP_
‣ ANDROID STUDIO FOR NATIVE DEVELOPMENT AND LOGGING
‣ XCODE FOR NATIVE DEVELOPMENT AND LOGGING
‣ WEEX CLI (ALSO KNOWN AS WEEX-TOOLKIT)
‣ npm i -g weex-toolkit
‣ Create your application
‣ weex create your-application

19.
PROJECT STRUCTURE_
‣ ANDROID AND IOS NATIVE
APPLICATIONS LIVE IN
PLATFORMS DIRECTORY
‣ IMPORTANT TO ADD TO
GITIGNORE ALL INTERNAL
MODULES DIRECTORIES AND
LOCAL CONFIGURATIONS

20.
ADVANCED
+ ADVANCED

21.
NAVIGATION_
‣ VUE ROUTER WORKS OUT-OF-THE-BOX
‣ MODE HAS TO BE ‘ABSTRACT’ WHICH IS DEFAULT IF NOT SET
‣ EASY FOR ROUTING WITH DEEP-LINKING

22.
STATE MANAGEMENT_
‣ VUEX WORKS SEAMLESSLY OUT-OF-
THE-BOX
‣ RECOMMENDED SERVICES PATTERN
‣ REMEMBER TO USE ‘STREAM’ MODULE
INSTEAD OF AXIOS FOR NETWORK
COMMUNICATIONS
‣ STORE PERSISTENCE HAS TO BE
TREATED IN NATIVE

23.
EXTENDING WEEX_
‣ PLUGINS ALLOW FUNCTIONALITIES OR COMPONENTS TO BE
DEVELOPED FOR ALL PLATFORMS SO THEY CAN BE DISTRIBUTED
‣ weex plugin create my-weex-plugin
‣ ALL MODULES, COMPONENTS AND ADAPTERS CAN BE EXTENDED FOR
WEB, IOS AND ANDROID PLATFORMS
‣ EVEN THE JS FRAMEWORK CAN BE EXTENDED TO SUPPORT MORE WEB
FRAMEWORKS

24.
MOBILE TEAM
REVOLUTION
+ ADVANCED

25.
MOBILE TEAM REVOLUTION_
‣ CONVERGE YOUR FRONT-END, IOS AND ANDROID TEAMS
‣ CONTINOUS TRAINING IN JAVASCRIPT, CSS & WEEX

26.
THANK YOU