Simulator/Emulator/Device way too different

3 posts, 0 answers
  1. Gilles
    Gilles avatar
    11 posts
    Member since:
    Oct 2013

    Posted 04 Apr 2014 Link to this post

    Hello guys,

    I've been taking time this week to port an application to WP8. The app is currently deployed for a customer on iOS and Android, and runs smoothly on both OSs.

    Must say it has been quite challenging without any console output and no ability to debug the app for the WP8, but I finally made it.

    What made it the most difficult is the huge rendering differences between the Simulator inside AppBuilder, the Emulator thru VS Express/Hyperdrive, and an actual device.

    In fact, at the beginning I trusted the Simulator, and had queer results. The app rendered almost flawlessly on the Simulator from the very beginning, even considered that I use a custom css design (corporate design) for the app and not the standard native one (I use Kendo Mobile UI).

    To be simple, in the Simulator, my WP8 app worked almost immediately, without notable differences in the rendering/navigation compared to the iOS and Android versions. I was quite happy, yeah, hybrid is so the way to go.

    Then I built my first XAP, and pushed it on the Emulator. In fact, on all the devices I could emulate, one after the other, to be sure.

    Gosh. The app simply didn't work - blank page with only one of my divs (a loading animated gif in fact) displaying. Wouh. No error message, no way to see where exactly the problem was and... well, dammit, frustrating, the app worked so well in the Simulator.

    Some (many ^^) curses (and hours) afterwards, I had the app work on the Emulator without any design.

    What I did was

    1) create a new project
    2) transfer all my scripts, structure (I use requirejs) etc. while keeping the actual main.css
    3) comment everything except the first view in the index.html and the very first js to be loaded
    4) iterate things until I found the single line of code that didn't work (no, the WP8's browser doesn't support "navigator.language" which I used to determine at runtime the current language (the app is multilingual), and I must admit I still haven't found a way to determine the language that doesn't crash on a Nokia device... I'll dig deeper soon but we have a working demo to show tomorrow so yeah... hard-coded language will do for now :D)
    5) from there, rebuilt step by step the code to find the various problematic differences (knowing that I did it on the Emulator and had to do this wonderful iteration : make a very small change / build / download the xap to the HD / deploy to the Emulator / begin again 1000 times ^^)
    6) get happy 'cause the app worked on the Emulator
    7) get angry 'cause it doesn't on the Device
    8) begin section 5) anew on the Device and only on the Device
    9) got it working (some time later...)
    10) better separate the .css between the platforms (and discovered that I could separate files with the format [name of file].[name of os].[extension] for the automatic selection at build time, that is a great point, we never stop learning :D)

    To make it shorter, it now works, with the corporate design, on the Device. The port is IMHO quite ok, some very small bugs remain and what I couldn't do has nothing to do with the way AppBuilder (or Cordova) works, but with annoying platform differences (yes, it's an M$ platform, it's not worse or better, it's just... done the M$ way... why bother to implement what others consider a standard, huh...).

    All that to say, in the end, that what made it extremely painful for me to make this port of an already fully designed app is the absolute lack of use, for the moment, of the Simulator (not to mention the Emulator, but that's beside the point, it's probably not well designed to work with hybrid apps anyway, and has nothing to do with Telerik's AppBuilder). You simply can't trust what it shows, and you can't trust the Emulator, so get yourself a device and from the very beginning, only use the device.

    In fact it's the same for any platform and we know it - if you want to be sure your app works on a real phone, you always have to step after step test it on a real phone. That's true for iOS and Android - for instance, I still have some glitches on both Simulator's versions of those OSs.

    The problem is, for the moment the differences between the way the real device renders the app is way too different.

    It will get better, I'm pretty sure of it - I've seen what you guys can do, and I'm extremely confident that in some months the WP8 Simulator will have the same level of reliability as the other ones. That's to say I'm absolutely not complaining, the WP8 integration is fresh out of the box. I'm barely making a statement of what currently is there, or more accurately, of my own experience, fresh out of the box too (and I'm certainly not the best developer around, extremely far from it, so all in all it might well come from the way I have badly arranged my code :P)

    @support team : if you want to have a look at the code to see and experiment for yourself the differences, feel free to do so, the current version is named 51App2_Dev in my project list; it might either help lessen the differences between the actual Device and the Simulator, or prove that I code with my bare feet :P
  2. Gilles
    Gilles avatar
    11 posts
    Member since:
    Oct 2013

    Posted 04 Apr 2014 in reply to Gilles Link to this post

    "The problem is, for the moment the differences between the way the real device renders the app is way too different. "

    That was well written ^^ - I meant

    "The problem is, for the moment the differences between the way the real device renders the app and the way the Simulator does it are too big to trust the Simulator."
  3. Zdravko
    Zdravko avatar
    657 posts

    Posted 08 Apr 2014 Link to this post

    Hello Gilles,

    Thanks for the detailed feedback. We find it very important since WP8 support is still in beta and we continue improving it.

    I am sorry for your unpleasant experience with AppBuilder Simulator.
    We strive to improve our Simulator constantly, but notice that a major factor for the visualization differences is the fact that WP8 devices use IE and our Simulator use CefSharp which I think is webkit based.
    I compared your app deployed on device with the simulator. The differences I found were the different colors which is caused by the color scheme (WP8 thing) and the tabstrip size which the Simulator shows on two lines because of the font size/margins values.

    There are known issues for WP8 which are beyond our control so far and others that await a solution.
    Following this link to our documentation you will find more about the known limits.

    Finally, I want to add that the best way to test your app remains a real device deployment.
    Thanks and stay tuned.


    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

Back to Top