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
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
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
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
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
