Can I integrate LESS compilation into an existing JQM-based XDK project?

[Andre_G_1]

Greetings,

I come from a web development background, but I am relatively new to Intel XDK.. At the moment I'm looking into updating a jQuery Mobile based project one of my work colleagues created in an older version of XDK (not sure what version specifically).

The project contains a series of LESS files in the "/www/css/index" folder, but I can't work out how to compile them through the XDK interface. We've got a custom jQuery Mobile theme file, loading all our app styles in stylesheets after this, but now that the stylesheet is growing, it's become difficult to maintain all our colour and element spacing rules.

I found a plugin for Brackets editor that handles the automatic compilation of less files, but I cannot find any way to make it exclude files that I'm importing into our "main" file, so simply opening one of the imported files compiles it immediately.

Do I need to run a separate external process to watch these files and compile my stylesheets in a sensible manner, or can XDK actually handle this for me?

[PaulF_IntelCorp]

Those LESS file in the www/css/index/ folder are managed by the App Designer component. If you wish to continue to use App Designer then you should not make changes to those files because App Designer will overwrite any changes you make to App Designer managed components. If you choose to not use App Designer and work on the UI layout by hand, you can safely edit those files directly. If you want to take that path I recommend you convert the project to a non-App Designer project, to minimize the chance that the App Designer editor gets opened and clobbers those LESS/CSS files. Let me know if you need help converting it to a non-App Designer project, there is no "magic button" you can push to do that .  :-(

Note that the jQuery Mobile UI framework has been deprecated as a supported UI framework by App Designer. You'll continue to be able to edit existing jQuery Mobile apps created by App Designer, but you will not be able to create new projects with that UI framework.

Note that this does not mean that you cannot use jQuery Mobile with an XDK app, rather that at some point in the future App Designer will no long directly support jQuery Mobile in the App Designer editor. At that point your app must be changed by hand, rather than using App Designer. I am not able to tell you when that support will be completely discontinued, but wanted you to be aware. See also > https://software.intel.com/en-us/xdk/faqs/app-designer#best-app-designer-framework <

[Andre_G_1]

Hi Paul,

Thanks for the info.

When you refer to the "App Designer", I assume you mean the "Design" view under the "Develop" tab? As I know the person who created the project didn't actually use that view for this. Since so much of the original generated app code has been customised and since we can't ditch jQuery Mobile just yet, I suspect the best way forward from this would be to convert the app as you suggest.

Personally, I would love to rewrite this app using Ionic, simply because I love the concept of Angular directives. However, this isn't really a viable option until our other devs get into the same train of thought.. I am still a tad confused about how XDK itself will handle the compilation of LESS to CSS; none of the project templates mention much about the development workflow in their descriptions, but perhaps this will make more sense once I actually see it in action.

Just to check; in our case this app conversion would be done by creating a new blank "HTML5 + Cordova" project with the "Use App Designer" option unchecked, followed by migrating our custom code into the new project, correct? Can you think of any specific points that I should watch for to ensure I don't break things?

In the meantime, I'll create a few different dummy apps with different options and see how they work.

[PaulF_IntelCorp · Accepted solution]

Andre -- Yes, when I'm referring to "App Designer" I'm referring to that "Design" view on the Develop tab. If your app is an App Designer project, opening the index.html file will present those CODE and DESIGN options. If you do as you stated, start with a blank template and uncheck the "use App Designer" option, you will never see that "Design" view (when viewing the index.html file).

The conversion process you described is the safest: create a new project and copy your source files into that new project. If your app is using the CSS  file that was auto-generated by the App Designer created LESS files, you can reuse that CSS file in the new project. At that point, once you've converted to a non-App Designer project, there is no conversion by the XDK of LESS to CSS. Conversion of LESS to CSS is only done by the App Designer component and only for an App Designer project. So, at that point, you have complete control over the process of converting LESS to CSS, and can use whatever external tools you want to use for that process, for example, a grunt script.

The templates don't imply any workflow because the workflow essentially consists of:

• write HTML5 application code
• perform simple debugging in Simulate tab
• perform on-device debugging in App Preview or using Debug tab
• build a mobile package as a Cordova app using the Build tab

Keep in mind that this tool builds standard Cordova (aka PhoneGap) apps. So the programming solutions that apply are solutions that work for Cordova mobile app solutions. There are a few restrictions, but those have to do with our cloud-based build system, which will restrict you to using plugins that do not employ gradle scripts or hook scripts (which are the majority of Cordova plugins) -- for security reasons. We're working on a more secure build system so that some of those restrictions can be removed.

A few useful notes:

• Build a single-page app (SPA). SPA is a much better solution for Cordova apps, multi-page apps are more elegant from a source-code organization perspective, but they are harder to work with in this environment. When I refer to SPA I mean limit your layout to a single index.html file (some frameworks do use HTML as a template for inclusion into a single index.html, that's fine).
• The reverse of that is you do not need to concatenate all of your CSS and JS files (you can, but it's not required to improve performance) because your app files will be loaded from the local device filesystem, not over a network connection.
• Do not assume you will always have a network connection, especially when the app starts. Therefore, do not make your app's startup sequence dependent on pulling in resources from a remote server (for example, pulling JS files or images or fonts or CSS, etc.). Doing so on a device on which the network has been disabled or is slow or flaky will result in an app that is either unresponsive or, worse, looks like it is dead (e.g., blank screen).

If you are doing the layout by hand (which is the case you describe) you can use any UI framework you want. If there are some UIB tags in the existing HTML layout, due to the initial use of App Designer, you can leave them in place, a few might be linked to some App Designer CSS rules. Otherwise, the bulk of them are used by the App Designer editor and are not really needed, but it's probably safer to leave them in place until you determine that you definitely have no CSS rules that depend on their presence.

Hope this helps.

[Andre_G_1]

Hi Paul,

Thanks so much for the detailed response, that really is a great help. Saw your message the evening before last (GMT+2), but yesterday was just crazy and I didn't get to look into this any further.

Armed with this info, I'm pretty confident I'll be able to get this project sorted out and set up the way we want quite easily now. :)

[Andre_G_1]

In the interest of not abandoning this thread; while I haven't completely rebuilt our project just yet, I have created a few other test projects and played with migrating some code, including a simple Gulp script to watch files for changes and automatically recompile LESS with the rules of my choosing.

Massive thanks for all the help Paul, feeling a lot more confident about working with XDK now than I did a few months back. :D