Supercharge your PhoneGap workflow

Developing a complex and sustainable PhoneGap app can present many challenges. As your app grows, a seamless development workflow is crucial. Can you efficiently deploy and test in different environments? What are your pain points when implementing new functionality? How can you organize all the facets of your app with minimal effort? 

This talk focuses on some of the ways you can create a development workflow that automates efficiencies, boosts scalability and most of all, preserves developer sanity.

Transcript

1. SUPERCHARGE YOUR PHONEGAP WORKFLOW MIND THE GAP
2. ERIC ALLI @_ericalli
3. Get a better travel life with collective hotel booking.
4. ALWAYS. BE. SCALING. SCALING ISN’T JUST ABOUT GROWTH
5. REFRAMING THE IDEA OF SCALING ▸ Kept me writing clean, maintainable code ▸ Made it conducive to document as I was coding ▸ Created an automatic, holistic workflow ▸ Increased my ability to be agile
6. REFRAMING THE IDEA OF SCALING ▸ Kept me writing clean, maintainable code ▸ Made it conducive to document as I was coding ▸ Created an automatic, holistic workflow ▸ Increased my ability to be agile
7. REFRAMING THE IDEA OF SCALING ▸ Kept me writing clean, maintainable code ▸ Made it conducive to document as I was coding ▸ Created an automatic, holistic workflow ▸ Increased my ability to be agile
8. REFRAMING THE IDEA OF SCALING ▸ Kept me writing clean, maintainable code ▸ Made it conducive to document as I was coding ▸ Created an automatic, holistic workflow ▸ Increased my ability to be agile
9. REFRAMING THE IDEA OF SCALING ▸ Kept me writing clean, maintainable code ▸ Made it conducive to document as I was coding ▸ Created an automatic, holistic workflow ▸ Increased my ability to be agile
10. FRAMEWORKS VS. PLUGINS VS. CUSTOM MAKING QUICK AND CONCISE DECISIONS
11. FRAMEWORKS ▸ Readily available ▸ Usually does most of what you need ▸ Tested and production ready ▸ Doesn’t do exactly what you need ▸ Requires separate maintenance CUSTOM CODE ▸ Gives you total control ▸ Will do exactly what you need ▸ Adaptable to your growing / changing app ▸ Requires planning and dev time ▸ Adds more to your testing workload
12. DATA DECISIONS WHAT FUNCTIONS TO RUN ON THE DEVICE VS. AN EXTERNAL API
13. DATA CONSIDERATIONS ▸ Consider creating a backend API that prepares all the data that will your app with consume ▸ API’s can range from a simple node server or a collection of PHP scripts to a full blown Ruby on Rails or Python app. ▸ Backend-as-a-Service tools are also a good alternative
14. DATA CONSIDERATIONS ▸ Consider creating a backend API that prepares all the data that will your app with consume ▸ API’s can range from a simple node server or a collection of PHP scripts to a full blown Ruby on Rails or Python app. ▸ Backend-as-a-Service tools are also a good option
15. DATA CONSIDERATIONS ▸ Consider creating a backend API that prepares all the data that will your app with consume ▸ API’s can range from a simple node server or a collection of PHP scripts to a full blown Ruby on Rails or Python app. ▸ Backend-as-a-Service tools are also a good option
16. DATA CONSIDERATIONS ▸ Consider creating a backend API that prepares all the data that will your app with consume ▸ API’s can range from a simple node server or a collection of PHP scripts to a full blown Ruby on Rails or Python app. ▸ Backend-as-a-Service tools are also a good option
17. AUTOMATING EVERYTHING HOW MUCH TIME AM I SPENDING DOING SIMPLE TASKS?
18. AUTOMATION OPPORTUNITIES ▸ Making a list of all the tasks I do in every day developing. Not leaving anything out, big or small ▸ Consider if automation can be applied to each item ▸ Use a task runner (grunt or gulp) to offload some of the manual workload
19. AUTOMATION OPPORTUNITIES ▸ Making a list of all the tasks I do in every day developing. Not leaving anything out, big or small ▸ Consider if automation can be applied to each item ▸ Use a task runner (grunt or gulp) to offload some of the manual workload
20. AUTOMATION OPPORTUNITIES ▸ Making a list of all the tasks I do in every day developing. Not leaving anything out, big or small ▸ Consider if automation can be applied to each item ▸ Use a task runner (grunt or gulp) to offload some of the manual workload
21. AUTOMATION OPPORTUNITIES ▸ Making a list of all the tasks I do in every day developing. Not leaving anything out, big or small ▸ Consider if automation can be applied to each item ▸ Use a task runner (grunt or gulp) to offload some of the manual workload
22. CLEANING UP MY ACT THROWING OUT THE GARBAGE BEFORE LAUNCH
23. IT WILL BE SO MUCH MORE WORK IN THE BEGINNING, BUT YOU’LL THANK YOURSELF LATER.
24. WORKFLOW DO’S AND DON’TS
25. Don’t delay device testing, bugs WILL find you in new and inventive ways. TEST TODAY FOR A BETTER TOMORROW
26. THERE ARE SO MANY WAYS TO DEBUG POORLY ▸Thinking your app is just website ▸Thinking your app isn’t just a website ▸Missing potential device-related issues
27. THERE ARE SO MANY WAYS TO DEBUG POORLY ▸Thinking your app is just website ▸Thinking your app isn’t just a website ▸Missing potential device-related issues
28. THERE ARE SO MANY WAYS TO DEBUG POORLY ▸Thinking your app is just website ▸Thinking your app isn’t just a website ▸Missing potential device-related issues
29. THERE ARE SO MANY WAYS TO DEBUG POORLY ▸Thinking your app is just website ▸Thinking your app isn’t just a website ▸Missing potential device-related issues
30. THERE ARE SO MANY WAYS TO DEBUG BETTER ▸Take advantage of all browser-based debugging tools ▸Consider remote-device debugging tools (weinre, GapDebug) ▸Use a behavior driven (BDD) testing tool
31. THERE ARE SO MANY WAYS TO DEBUG BETTER ▸Take advantage of all browser-based debugging tools ▸Consider remote-device debugging tools (weinre, GapDebug) ▸Use a behavior driven (BDD) testing tool
32. THERE ARE SO MANY WAYS TO DEBUG BETTER ▸Take advantage of all browser-based debugging tools ▸Consider remote-device debugging tools (weinre, GapDebug) ▸Use a behavior driven (BDD) testing tool
33. THERE ARE SO MANY WAYS TO DEBUG BETTER ▸Take advantage of all browser-based debugging tools ▸Consider remote-device debugging tools (weinre, GapDebug) ▸Use a behavior driven (BDD) testing tool
34. As you grow, it’s harder to mentally grasp your entire app’s codebase. Splitting it up into manageable chunks can really help. GROWING PAINS
35. WOULD YOU RATHER… A. Have a few files with 5k+ lines of code each B. Have many files with a few hundred lines of code each
36. A. Have a few files with 5k+ lines of code each B. Have many files with a few hundred lines of code each WOULD YOU RATHER…
37. /*
 ______ 
 | ____| 
 | |__ ___ _ __ _ __ ___ ___ 
 | __/ _ \| '__| '_ ` _ \/ __|
 | | | (_) | | | | | | | \__ \
 |_| \___/|_| |_| |_| |_|___/ */ form {
 position: relative;
 
 input {
 ...
 }
 }
38. A. Have a few files with 5k+ lines of code each B. Have many files with a few hundred lines of code each WOULD YOU RATHER…
39. SEGMENT EVERY PIECE OF FUNCTIONALITY INTO BITE-SIZED FILES ▸ Name them by screen or by a specific feature ▸ Keep naming consistent: ▸ dashboard.css ▸ dashboard.js ▸ dashboard.template
40. THE KEY TO BUILDING A SUSTAINABLE ORGANIZATION PATTERN IS TO HYPER COMPONENTIZE EVERYTHING.
41. Demystifying the open source landscape USE OPEN SOURCE WISELY
42. MAKING THE MOST OUT OF OPEN SOURCE ▸Choosing libraries that are mobile-first ▸Looking out for dependency requirements ▸Finding tools that can do more than one job
43. MAKING THE MOST OUT OF OPEN SOURCE ▸Choosing libraries that are mobile-first ▸Looking out for dependency requirements ▸Finding tools that can do more than one job
44. MAKING THE MOST OUT OF OPEN SOURCE ▸Choosing libraries that are mobile-first ▸Looking out for dependency requirements ▸Finding tools that can do more than one job
45. Sprinkle in some native for common UI functionality. No Swift of Java required* USE NATIVE FUNCTIONALITY!
46. EVERYDAY NATIVE PLUGINS ▸ Social Sharing ▸ Maps ▸ Page Transitions ▸ Progress Indicators ▸ Action Sheets ▸ …
47. EVERYDAY NATIVE PLUGINS ▸ Social Sharing ▸ Maps ▸ Page Transitions ▸ Progress Indicators ▸ Action Sheets ▸ …
48. EVERYDAY NATIVE PLUGINS ▸ Social Sharing ▸ Maps ▸ Page Transitions ▸ Progress Indicators ▸ Action Sheets ▸ …
49. EVERYDAY NATIVE PLUGINS ▸ Social Sharing ▸ Maps ▸ Page Transitions ▸ Progress Indicators ▸ Action Sheets ▸ …
50. EVERYDAY NATIVE PLUGINS ▸ Social Sharing ▸ Maps ▸ Page Transitions ▸ Progress Indicators ▸ Action Sheets ▸ …
51. EVERYDAY NATIVE PLUGINS ▸ Social Sharing ▸ Maps ▸ Page Transitions ▸ Progress Indicators ▸ Action Sheets ▸ …
52. WITH EVERY BIT OF NATIVE FUNCTIONALITY YOU INCLUDE IN YOUR APP… IT’S AN OPPORTUNITY TO OFFER A MORE FAMILIAR EXPERIENCE FOR THE USER.
53. RECLAIM YOUR CODE Develop your app code outside of your PhoneGap project…don’t worry, we’ll create a slick build process to reunite everything later.
54. Move all app-specific code living in the www/ folder of your PhoneGap project to a folder outside of the project.
55. Use a task runner to copy only the files you need into PhoneGap when the time comes. KEEPS YOUR CODE SEPARATE
56. Which might otherwise be a disjointed mess. MAKES GIT A BREEZE
57. BUILD TOOLS
58. INSTALLING GRUNT ▸ Install Node.js from nodejs.org ▸ Initialize npm in your project ▸ Install Grunt ▸ Install packages
59. INSTALLING GRUNT ▸ Install Node.js from nodejs.org ▸ Initialize npm in your project ▸ Install Grunt ▸ Install packages $ > npm init

60. INSTALLING GRUNT ▸ Install Node.js from nodejs.org ▸ Initialize npm in your project ▸ Install Grunt ▸ Install packages $ > npm init $ > npm install -g grunt-cli $ > npm install grunt —save-dev 

61. INSTALLING GRUNT ▸ Install Node.js from nodejs.org ▸ Initialize npm in your project ▸ Install Grunt ▸ Install packages $ > npm init $ > npm install -g grunt-cli $ > npm install grunt —save-dev $ > npm install grunt-sass —save-dev $ > npm install load-grunt-tasks —save- 
 dev
 $ > ...
62. EXAMPLE GRUNTFILE.JS module.exports = function(grunt) {
 
 // Load all packages
 require("load-grunt-tasks")(grunt, {scope: "devDependencies"}); // Project configuration
 grunt.initConfig({
 // Sass compilation
 sass: { 
 dist: { 
 files: { 
 "stylesheets/style.css": "stylesheets/style.scss"
 }
 }
 },
 });
 
 // Task groups
 grunt.registerTask('default', ['sass']);
 };
63. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR
64. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR SASS, LESS…
65. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR HANDLEBARS, MUSTACHEJS…
66. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR JSHINT & CONCATENATE
67. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR index.html
68. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR COPY TO XCODE PROJECT
69. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR phonegap build
70. {COMPILES STYLESHEETS COMPILES TEMPLATES MINIFIES JAVASCRIPTS MINIFIES HTML CLEANS AND COPIES WWW BUILDS THE PHONEGAP PROJECT LAUNCHES AN EMULATOR phonegap emulate
71. EVEN MORE BUILD TASKS ▸ Watch files for changes and run relevant tasks ▸ Preprocess the index.html file (for different environments / platforms) ▸ Optimize images ▸ Run virtually any shell commands
72. EVEN MORE BUILD TASKS ▸ Watch files for changes and run relevant tasks ▸ Preprocess the index.html file (for different environments / platforms) ▸ Optimize images ▸ Run virtually any shell commands
73. EVEN MORE BUILD TASKS ▸ Watch files for changes and run relevant tasks ▸ Preprocess the index.html file (for different environments / platforms) ▸ Optimize images ▸ Run virtually any shell commands
74. EVEN MORE BUILD TASKS ▸ Watch files for changes and run relevant tasks ▸ Preprocess the index.html file (for different environments / platforms) ▸ Optimize images ▸ Run virtually any shell commands
75. EVEN MORE BUILD TASKS ▸ Watch files for changes and run relevant tasks ▸ Preprocess the index.html file (for different environments / platforms) ▸ Optimize images ▸ Run virtually any shell commands
76. YOU ARE YOUR OWN BOTTLENECK ▸ Empower yourself to make quick and clear development decisions ▸ Organize today to help you scale for tomorrow ▸ Give yourself confidence to launch your app when the time comes ▸ Create efficiencies for yourself, then automate them
77. YOU ARE YOUR OWN BOTTLENECK ▸ Empower yourself to make quick and clear development decisions ▸ Organize today to help you scale for tomorrow ▸ Give yourself confidence to launch your app when the time comes ▸ Create efficiencies for yourself, then automate them
78. YOU ARE YOUR OWN BOTTLENECK ▸ Empower yourself to make quick and clear development decisions ▸ Organize today to help you scale for tomorrow ▸ Give yourself confidence to launch your app when the time comes ▸ Create efficiencies for yourself, then automate them
79. YOU ARE YOUR OWN BOTTLENECK ▸ Empower yourself to make quick and clear development decisions ▸ Organize today to help you scale for tomorrow ▸ Give yourself confidence to launch your app when the time comes ▸ Create efficiencies for yourself, then automate them
80. YOU ARE YOUR OWN BOTTLENECK ▸ Empower yourself to make quick and clear development decisions ▸ Organize today to help you scale for tomorrow ▸ Give yourself confidence to launch your app when the time comes ▸ Create efficiencies for yourself, then automate them
81. Thanks. ERIC ALLI @_ericalli ericalli.com
82. QUESTIONS?