JS vs Native controls in Web and Hybrid apps

If you find yourself in the situation where you have to choose between native or JavaScript controls you should consider that there’s more than simply focusing on the technical advantages and disadvantages when choosing an approach. You should also bear in mind how your choice will affect the user experience.

nativeVSjs

Differences between Native and JavaScript controls

Native controls in HTML5 or hybrid apps are good, and can be used pretty easily. They are limited however. So for areas of your UI where it isn’t important to have a distinctive, custom look, you can pick the native controls.
They are created for generic usage but don’t provide a flexible API nor extensive styling capability.

In case of JavaScript controls with HTML and CSS in the background, you can fine-tune the user experience to the max and make your app “smarter” by exploiting its decision-making capabilities. You can use JavaScript to enhance HTML forms and to make it look as part of your app and consistent with your brand.

Another huge hassle is OS and browser compatibility. While the modern browsers and platforms keep up with the HTML5 specs fairly well, there can be differences in support and rendering. If you want to make sure the UX is the same on all platforms and in all browsers, running with a JS control should be your pick. Make sure to check caniuse.com to see if the native elements are supported.

Below we provide you a comparison of what we have found to be the downsides and the advantages separately for native and JS enhanced components like in the case of a date picker or select tool:

Native

Pros

  • no extra code needed
  • visual integration with the OS
  • integration into native form navigation between form elements
  • Cons

  • no control over the displayed date/time format (date/time, calendar)
  • no control over style (for popups like date/time, select and form elements like check box, slider can be styled on modern browsers, but in different ways)
  • no invalids (in the case of date/time)
  • hard to style cross browser (in the case of slider, progress)
  • no tooltip, step markers (in the case of slider)
  • not supported in every browser and OS
  • JS

    Pros

  • control over displayed date/time format
  • control over style, visual integration with the brand and the OS
  • extensive customization capabilities
  • the possibility to fine-tune the user experience
  • Cons

  • extra code to include / download
  • not popping up when navigating between form fields with previous/next button on some platforms (iPhone, some Android distributions)
  • Conclusion

    We enumerated the cons and pros that we have encountered during our working processes to help you get a detailed overview about the downsides and advantages of both approaches.

    We know that it isn’t always clear and obvious which is the best of the two and the reality is that it depends. Our suggestion is that first of all you think about your product and how your choice will affect the user experience and overall feel. You should decide by weighing the advantages and disadvantages separately for Native and JS controls and consider how it will be used by your target audience and customers.

    If styling and customization isn’t important and it’s OK that it might not look and work in the same way on all devices, pick native controls.

    If customization, validation and enhanced user experience is important to you, JS controls are the way to go.

    What controls have you used or worked with? Do you prefer Native vs. JS or maybe something else?
    Do you have anything to add to our cons and pros list? Let us know in the comment section below.

    Start building better products
    Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!

    Tags: , ,