wrenr.github.io/cordova-build-automation-presentation/
Wren Reynolds
I make apps on your phone.
UCLA OIT Department
Javascript, Mobile Apps
Overview
Automation in Action
Workflows Roundup
Real World Build Automation - The Ultimate Example
Putting your Version control on a Diet
Automation in Action
- The Code
- The App
- Learn: A -> B
Automation is a Hammer, How to Spot Nails
- Tasks with:
- Strict Sequence
- Configuration
- Repetition
- Mess Cleanup
- SCRM
Grunt - Javascript Task Runner
Cordova - Hybrid App Framework
- Cordova - build cross-platform mobile applications in HTML, CSS and Javascript with device features
- Setup and Quick Look: http://wrenr.github.io/jsla-cordova-2015-08
- MMWCon
- Cordova - Your Backstage Pass to Mobile Device Hardware
- Friday 3pm-5pm
The 7,381 Second Workflow
- Why Mobile Builds Need Automation
- Mobile build process requirements:
- Every change requires a new build
- dependencies need to be managed
- Lots of files generated
- Customizing builds for each platform (or deployment)
- Sound familiar?
The 7,381 Second Workflow - Matchup
- Strict sequence
- Configuration
- Repetition
- Mess clean-up
- Installing multiple plugins and libraries
- Dependency hierarchy
- Lots of Build files, plugin files, etc.
- Customizing builds for each platform (or deployment)
The 7,381 Second Workflow - Answer Key
- (Repetition) Installing Multiple Plugins and libraries
- (Strict sequence) Dependency hierarchy
- (Mess clean-up) Lots of Build files, plugin files, etc.
- (Configuration) Customizing builds for each platform (or deployment)
The 6 Second Workflow
- Open Up Command Line
- Enter A Command
- Do everything in the 7,381 Second Workflow
- But can you go faster?
- ZERO seconds
The ZERO Second Workflow
- < 2 Seconds
- = 0
- Use the browser (when possible)
- Test UI, non-native features
- If possible, dummy native features
Real World Build Automation - The Ultimate Example
The ohmageX Example
- ohmageX: An open-source, mobile to web platform that records, analyzes, and visualizes data
- Available on App Store and Google Play: ohmageX
- Try it out:Server: https://test.mobilizingcs.orgusername: demouserpassword: thisisademo
ohmageX "Zero" Second Workflow
- Browser debugging
- Compile preprocessors
- concatenate build files
- Run a server from the command line
- Watch for source code updates and re-build behind the scenes
Example: Strict Sequence
- Remove any previously generated files/directories
- Then generate those directories
- Create a Cordova Project
- Add platforms, plugins to that Cordova project
Example: Configuration
- Custom deployments
- Bootstrap config data into Javascript
- Templates
- Icon and Splash Screen
Example: Repetition
- Adding multiple Cordova plugins
- Adding all vendor Javascript libraries
Example: Mess Cleanup
- Removing generated files
- Adding all vendor Javascript libraries
- Hiding generated files from Git, which leads to...
Putting your Version control on a Diet
Hide the Sweets
- compiled CSS
- Any generated templates
- JS Templates
- Freshman 15 - compiled JS
-
Morbid Obesity - Node Modules
-
LAND MONSTER - Cordova directory
◄
►
▲
▼