* 

* * Who Am I?

* What is Cordova?

* What are Hooks?

* What are Hooks written in?

* What problems do they solve?

* What Hooks do I use?

* Demo – Hooks in Action

* Q&A

* Resources

* * Gavin Pickin – developing Web Apps since late 90s

* What else do you need to know? * Blog - http://www.gpickin.com

* Twitter – http://twitter.com/gpickin

* Lets get on with the show.

* * Apache Cordova is a set of device APIs that allow a

mobile app developer to access native device function such as the camera or accelerometer from JavaScript.

* Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

* http://cordova.apache.org/#about

* * And because these JavaScript APIs are consistent

across multiple device platforms and built on web standards, the app should be portable to other device platforms with minimal to no changes.

* In 2011 Adobe / Nitobi donated the phonegap codebase to Apache Software Foundation to be managed as an Opensource project. It was eventually renamed Cordova.

* http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/

* * Cordova includes a CLI that runs on NodeJS, to

help you compile your project for different deployment platforms.

* Phonegap Build is one service that allows you to build Apps without system dependent tools like Xcode (iOS)

* * Hooks are scripts that execute when special events

are emitted from the plugin, or build process.

* There are a lot of hooks you can use, below is a sample * after_build / before_build

* After_platform_add / before_platform_add

* After_prepare / before_prepare

* A full list of hooks can be found here https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md

* 

* Developing for multiple platforms is easier with Cordova, but there are a lot of repetitive tasks, or build steps that you can automate

* Using Hooks you can simply build your own Build Process using the framework provided to you.

* They can make you a more efficient developer.

* 

* Hooks can be written in any programming language

* BUT – Cordova highly recommends writing hooks in NodeJS to ensure the hook are cross platform. Since the Cordova CLI is written in NodeJS, they will always work.

* Since your hooks will be NodeJS, you can use the power of NPM to help yu write them.

* 

* The most common way is to place the script in the /hooks/{event_name}/ folder

* Files are executed in their alphabetical order. Since Windows and *nix systems treat aG and ag differently, I recommend prefixing with 001_ etc.

* You can also define Application hooks in config.xml

* You can define Plugin hooks from /plugins/…/plugin.xml

* <hook type="before_build" src="scripts/appBeforeBuild.bat" />

<hook type="before_build" src="scripts/appBeforeBuild.js" />

<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />

<platform name="wp8">

<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.bat" />

<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.js" />

<hook type="before_plugin_install" src="scripts/wp8/appWP8BeforePluginInstall.js" />

</platform>

<platform name="windows8">

<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.bat" />

<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.js" />

<hook type="before_plugin_install" src="scripts/windows8/appWin8BeforePluginInstall.js" />

</platform>

https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md

* 

<hook type="before_plugin_install" src="scripts/beforeInstall.js" />

<hook type="after_build" src="scripts/afterBuild.js" />

<platform name="wp8">

<hook type="before_plugin_install" src="scripts/wp8BeforeInstall.js" />

<hook type="before_build" src="scripts/wp8BeforeBuild.js" />

</platform>

* * Being new to NodeJS most of the hooks I use

currently are ones I have found online… with minor tweaks.

* JS Hint Hook

* Cordova Uglify

* Work In Progress * Jasmine for Unit Testing

* Hook for Splash and Icon Creation

* * JSHint is a community-driven tool to detect errors

and potential problems in JavaScript code and to enforce your team's coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. JSHint is open source and will always stay this way.

* http://jshint.com/about/

* Hook - https://gist.github.com/gpickin/04a7acfc4907f3ed27f6

* * Cordova hook that allows you to uglify or minify

your apps JavaScript and CSS. It is using UglifyJS2 for JavaScript compression and clean-css to minify CSS.

* Install from NPM - npm install cordova-uglify

* https://github.com/rossmartin/cordova-uglify

* Hook - https://gist.github.com/gpickin/f23a4980b5359ba570b1

* 

* Let me show you how the JS Hint Hook will help save you time testing an app on a device with errors in your code.

https://gist.github.com/gpickin/04a7acfc4907f3ed27f6

* Let me show you how to use Cordova Uglify Hook for when your building to send to the app store.

https://gist.github.com/gpickin/f23a4980b5359ba570b1

* $ cordova build ios Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/before_prepare/02_jshint.js /Users/gavinpickin/Dropbox/Apps/cstctraining Linting www/js/services/attendeeDAO.js Linting www/js/index.js File www/js/services/attendeeDAO.js has no errors. ----------------------------------------- Linting www/js/services/attendeeService.js File www/js/index.js has no errors. ----------------------------------------- File www/js/services/attendeeService.js has no errors. ----------------------------------------- Linting www/js/services/attendeeSyncService.js File www/js/services/attendeeSyncService.js has no errors. ----------------------------------------- Linting www/js/services/auditDAO.js File www/js/services/auditDAO.js has no errors.

* $ cordova build ios

Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/before_prepare/02_jshint.js /Users/gavinpickin/Dropbox/Apps/cstctraining

Linting www/js/services/attendeeDAO.js

Linting www/js/index.js

Errors in file www/js/services/attendeeDAO.js

1:1 -> Expected an assignment or function call and instead saw an expression. -> funct ion newAttendeeDAO() {

1:6 -> Missing semicolon. -> funct ion newAttendeeDAO() {

1:7 -> Expected an assignment or function call and instead saw an expression. -> funct ion newAttendeeDAO() {

1:10 -> Missing semicolon. -> funct ion newAttendeeDAO() {

1:27 -> Missing semicolon. -> funct ion newAttendeeDAO() {

-----------------------------------------

File www/js/index.js has no errors.

* Running command: /Users/gavinpickin/Dropbox/Apps/cstctraining/hooks/after_prepare/uglify.js /Users/gavinpickin/Dropbox/Apps/cstctraining

cordova-uglify will always run by default, uncomment the line checking for the release flag otherwise

uglifying js file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/js/index.js

minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/index.css

minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/jquery.mobile-1.4.2.min.css

minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/jquery.mobile.external-png-1.4.2.min.css

minifying css file /Users/gavinpickin/Dropbox/Apps/cstctraining/platforms/ios/www/css/jquery.mobile.icons-1.4.2.min.css

encountered a .png file, not compressing it

encountered a .svg file, not compressing it

* * Any questions?

* Any recommendations for improving this talk?

* * Copy Icons / Splashscreens, Replace Text

Depending on Environment, Add Plugins Source: Holly Schinsky – DevGirl – Adobe Evangelist http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

* JS Hint, Cordova Uglify Source: Nic Raboy http://ionicframework.com/blog/minifying-your-source-code/

* Dan Moore - Hooks and Cordova http://www.mooreds.com/wordpress/archives/1197