Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate with PG CLI to support custom/3rd party plugins and multiple live devices. #127

Closed
tohagan opened this issue May 14, 2014 · 15 comments
Milestone

Comments

@tohagan
Copy link

tohagan commented May 14, 2014

Allow devs to perform a 'debug' prepare as part of the Cordova/PG CLI that does the following:

  • Via the CLI, creates a new build of this app based on their project selected plugins for each added platform. It may also create platform specific (merged) www folders that where possible use symlinks to the root www/ and merge/ content to avoid future file copying (Yes ... Windows NTFS does symlinks and hardlinks too :) .
  • Developers now deploy the new app once to their devices or simulators with all their required PG plugins.
  • Via the CLI run a single app server instance that allows any number of devices and mobile OS versions to connect, loads their OS specific HTML5 app and then continues to auto reload any touched files. Client sends it's OS type to server to select the right platform folder.
  • Allow the developer to modify JS/HTML/CSS/font/image files in the root www or merge folders and via the symlinks ensure that platform versions are always maintained in sync (no need to run 'prepare' or 'compile' or to redeploy debug builds of the app to devices unless the plugins change!).

Developer Nirvana: Devs can now update any JS/HTML/CSS/font/image file in root www or merge folders and immediately watch the change on all the devices and OS versions sitting on their desk. I think this would be a Holy Grail that would significantly speed up app development.

I think this would also position Cordova/PG as a significantly faster RAD tool than current native build options (even if you're only coding for one platform) as it entirely skips the Compile/Deploy phase from the development cycle and allows devs to immediately assess the impact of every change on their test devices.

@dotnetwise
Copy link

Multiple live devices seems to be already supported as of Phonegap 3.5.0

@mwbrooks
Copy link
Collaborator

@dotnetwise yep, a subtle and sneaky update via the PhoneGap CLI :) I haven't had a moment to blog about it, but you can now connect multiple devices and keep their states in-sync!

@mohamnag
Copy link

I dont see any other feature requests near to this, so I ask it here, are custom plugins already supported in developer app?

@dotnetwise
Copy link

I could simply fork the source code and add my custom plugins to it.
Then I have uninstalled the phonegap-app-developer (the one that came from appstore/market) and ran cordova run android, cordova run ios and cordova run wp8 against my devices.

Connected to the app and voila, all my custom plugins just work.

@mohamnag
Copy link

but if I want to use it for developing a plugin, this compile and install has to happen each time, practically no benefit compared to compiling a test project each time.
What I really like to see is to load plugin loaded when I run phonegap serve.

@dotnetwise
Copy link

The problem I encounter now is about www/plugins folder.
Which is a platform specific folder :(
So testing against multiple platforms at same time seems ridiculous impossible.

Talking about the native side of the plugins, you are right.
Talking about the javascript side of the plugins, this seems useless, unless there is another way of dealing with it.

@tohagan
Copy link
Author

tohagan commented Jun 19, 2014

@mwbrooks - Delighted to hear that 3.5.0 delivers on the multi-device feature. Please pass on my thanks!

@dotnetwise - Yes ... I know I can fork the code but ... I'm lazzy (See #142) and I don't want to keep maintaining stuff that I shouldn't. It's not my core business focus and I think it squarely belongs with the PG or Cordova teams.

@dotnetwise If you want this app to do autoloading of PG plugins I think this is the wrong place to ask it. Firstly, I doubt it's feasible and 2ndly this feature request is not about this.

The concept is to make it part of PhoneGap CLI so you can ..

EITHER
(a) Build the final app that does not have the PhoneGap App auto loading instrumentation (but does have my custom plugins and their custom config)

OR
(b) You can build this slick debug app with an identical plugin configuration to the final app. You then avoid having to constantly redeploy the binary part of the app during development and significantly speed up your Hybrid app development cycle since most of the time you're changing the HTML5 code and not the PG plugin configuration or their code that are generally very stable for most hybrid apps.

If you're constantly changing PG plugins then this feature has little value to you.

@tohagan
Copy link
Author

tohagan commented Jun 19, 2014

@dotnetwise - If needed we can run multiple server instances (e.g. different port numbers) for each platform OR an alternative might be the web server to inspect the client Agent string to figure out which platform specific code to return for the virtual www/plugins folder. The physical folder would probably contain www/plugins/ios, www/plugins/android, www/plugins/wp8 etc. Since we're changing the PG build process with a new 'debug' build type this is quite feasible.

Remember we're also using symlinks to avoid file/folder copying and to ensure that most source file/folder changes are immediately reflected into the build directory that we're serving without the need to perform a rebuild! So for most HTML5 related file changes we can avoid doing a rebuild and just update the HTML/CSS/Image/Font source files to trigger the auto-reload on the mobile device client. During the debug build we could symlink files and folders that don't change from their source code. Alternatively, If we want to retrofit this into the existing PG build process, you can create a folder compare tool that discovers identical files and folders (say using a Merkle tree) and then replaces them with symlinks. You could instead write a post build scripts for each PG version that does the same thing but with some risk that it may not match identically with the normal build.

An alternative to using symlinks is to let the web server map virtual files/folders to the source files/folders but this might not retrofit as easily to the existing PG build process and might confuse some devs when diagnosing issues.

@tohagan
Copy link
Author

tohagan commented Jun 30, 2014

Looks like connect-phonegap used by 'phonegap serve' already maps these virtual paths ...

  • cordova.js
  • phonegap.js
  • cordova_plugins.js
  • plugins/*

to the dynamic physical path ...
../../../res/middleware/cordova/<platform>/<cd-version>/<file>

It uses the platform and Cordova version sent by the client app. Just what we wanted :) .

See https://github.com/phonegap/connect-phonegap/tree/master/lib/middleware/cordova/

@tohagan
Copy link
Author

tohagan commented Jul 2, 2014

Just got this all working yesterday for Win7, Android and Sencha Touch app. Testing OSX/iOS/Android today. Can now edit Sencha Touch source code and it auto loads the change on the device (We skip Sencha's compile, PhoneGap's Android compile and Android device redeployment). Using a custom PG App with different plugins.

@tohagan
Copy link
Author

tohagan commented Jul 4, 2014

Basically all you need to do is create a nested folder structure containing symlinks to the part of PhoneGap you need and then run phonegap serve inside that environment.

Got it working for OSX a couple of days ago. The touch folder that is the Sencha Touch framework blew out the number of files it was watching which is fixable either by only copying (not symlinking) part of the touch folder or using ulimit -S -n 5000 to increase the number of open file handles phonegap serve can use.

@tohagan
Copy link
Author

tohagan commented Jul 17, 2014

My initial implementation was broken 👎 But I've since had a another crack at it and hacked the connect-phonegap package to add the needed code to do directory mapping and also written a ShellJS script to build a Sencha Touch + PG App that can morph into the PhoneGap App. This means is that I can be sure I'm using identical plugins/versions as they both run in the same app! Mostly working now. Should be all pushed up on GitHub soon.

@tohagan
Copy link
Author

tohagan commented Jul 17, 2014

https://github.com/tohagan/connect-phonegap
New connect-phonegap options:

  • [options] {Object}
    • [autoreload] {Boolean} toggle AutoReload watch (default: true).
    • [sessionSecret] {String} Server session secret. (default: 'phonegap').
    • [watches] {Array} List of file patterns watched to detect changed files that trigger the client application to reload from the server (default: www/**)
    • [www] {String} HTML source directory used for all non-Cordova Javascript. (default: 'www')
  • Platform Javascript Directories. Used for cordova.js, phonegap.js, cordova_plugins.js, cordova_plugins/*
    • [www_android] {String} Android Javascript directory.
    • [www_ios] {String} iOS Javascript directory.
    • [www_wp8] {String} Windows Phone 8 Javascript directory.
    • etc
    • Default directory is $/res/middleware/cordova/<cd-version>/<platform> where $ = lib install directory.

@tohagan
Copy link
Author

tohagan commented Sep 1, 2014

I've forked phonegap-connect and built a new app to do all of this and tuned it for Sencha Touch development.

@mwbrooks mwbrooks modified the milestone: Backlog Sep 11, 2015
@surajpindoria
Copy link
Collaborator

Closing this issue. The app can handle multiple devices and 3rd party plugins. Use these instructions for adding plugins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

6 participants