Concept

But what is ionic by the way?

web or native? or better both with ionic?

First of all, these applications are intended to offer the best of both worlds, web and native, with a shorter development time (time-to-market), and without undergoing the complexities associated with each OS. This is the promise of ionic.

By the way, these are above all web applications that benefit from a unique and especially generic technologic stack: HTML + CSS + JS, regardless of the type of device (desktop, mobile…) and regardless of the operating system (Android, iOS, Windows…).

This is the famous write once, run anywhere

But these applications are also able to take advantage of the native experience. Applications are integrated, reliable and above all interoperable with native equipment and services such as:

  • GPS geolocation
  • camera
  • strong authentication by fingerprints or face recognition,
  • a payment API for example

So, hybrid or Progressive Web App ?

Ionic as future proof as the web

https://ionicframework.com/

It is interesting to note that whatever standard best suits your needs, ionic provides you with a suitable solution. Thus, you can choose to develop Mobile Hybrid applications or Progressive Web Applications (PWA).

But then, what type of applications to choose? Jnesis is there to guide you because the universal solution does not exist. Nevertheless, let’s give you some insights.

Hybrid application

First of all and to put it simply, a hybrid application is a web application converted to a native application. It may therefore be published in the respective public or private app stores, or distributed directly (Android only).

It should be noted that the field of hybrid applications has evolved very rapidly in recent years. Where Adobe PhoneGap was still the only option a few years ago to convert Web applications, the Apache Cordova Open Source version has since given birth to multiple implementations. But with ionic capacitor, ionic goes further and goes beyond the framework of the native mobile. This way your web applications will be able to run in any environment: Native desktop, Progressive Web App (PWA)….

Finally, thanks to the plugins offered by ionic / capacitor, the application will be able to integrate with the vast majority of native equipment and services.

Progressive Web Application (PWA)

More recently, Progressive Web Applications (PWA) have appeared. They are not converted into native applications but take advantage of the new features of modern web browsers that now offer secure gateways to the hardware and services of the device.

Above all, these are web applications that behave like mobile applications, so they are more engaging than traditional web applications and appear fully integrated.

To summarize here are some of the characteristics of PWAs (non-exhaustive list): 

  • work totally offline (store information and perform some basic processing)
  • accessible via shortcuts and application libraries
  • appear totally headless (without a graphical browser interface) and start with a splash screen (home screen) like any native application
  • receive server notifications (push notifications)
  • access the camera, GPS,…

Which javascript framework for Ionic ?

ionic applications hybrides

If ionic privileged angularjs at its origin, one of ionic’s strengths today is its total independence from the web framework. Its integration with the Web Components standard makes the developments totally web framework agnostic:

An all-in-one development toolkit

Whenever possible, Jnesis first priority are vertical solutions because they offer you an immediate return on investment (ROI).

On Ionic applications, we focus on efficiency thanks to the continuous integration.

Finally, thanks to Ionic Studio, developers can also take advantage of an integrated development environment.

 

Choose to work directly with an official ionic partner

jnesis partenaire ionic officielJnesis is one of ionic’s official partner in Europe, with a strong technical know-how around ionic development and associated services, but also back-end (java, node.js, ..)

Feel free to contact us for any request for development, training, coaching or consulting. Our teams of ionic specialists will be happy to answer you.

To not miss any of our news, follow us on  linkedin jnesiset

 

Looking at working with THE Ionic official partner for France and Switzerland?

Ionic and Jnesis are now partners

 

Ionic and Jnesis are now partners

We are proud to annouce Jnesis is now the official Ionic partner for France and Switzerland. This is the outcome of an extensive assessment of our development team by Ionic. Ionic is a leader in the development of cross-platform mobile applications (iOS, Android and Windows Phone).

As an Ionic partner, we now offer a complete range of services in regards to this technology:

  • full development or in cooperation with your teams of your mobile Ionic application
  • code auditing
  • architecture design of your mobile project integrated with existing Information Systems
  • consulting

In case you need to know more about Ionic, it is a technical solution that allows developing efficiently a mobile application with one single codebase and deploy it into Android Google Play, iOS App et Windows Phone stores.

But you still take advantage of the built-in sensors and services offered by the device like for example the GPS, the camera or strong authentication by fingerprint or face recognition.

It saves you rewriting the application for the different platforms. This is the well-known principle of “write once, run anywhere”.

Planning to develop an cross-platform mobile application?

We are looking forward you sharing with us your mobile projects and strategy. Our team will be with you from the design of your application to the deployment and delivery.

Jnesis official trusted partner of ionic

 

Jnesis official trusted partner of Ionic

Check us out on the official Ionic partner website (yes we are the green spot located in France!), on the Jnesis website and on the social networks (twitter & linkedin).

Internationalization & Localization with Sencha Ext JS

Ext JS offers internationalization features out of the box, and the framework is easily extensible to cover additional requirements with a small amount of effort. Ext JS comes bundled with a localization package that supports over 40 languages ranging from Indonesian to Macedonian, and it’s easy to implement.

In this article, we’ll review solutions for handling some special circumstances and requirements that we’ve offered to our customers at Jnesis, but let’s first sum up what we know about internationalization.

The main focus is giving users the option to choose their preferred language for the application. This feature requires the application to be “translatable”, a feature that is often expressed with the words “i18n” or “internationalization.” “Translatable” meaning not only the possibility of translating into another language, but also considering all of the technical requirements attached to it.

Sencha provides a good internationalization and localization solution for the most common situations. It can also be extended, taking into consideration specific requirements of an enterprise environment.

How to Localize Ext JS Applications

You will find details on the Sencha recommended way to localize your applications in the Sencha localization documentation. There are also some additional recommendations in community member Saki’s blog post. In the following post, we will address how to:

  • Write language files (singleton or override) directly in the application, so they can be integrated afterwards into the production build
  • Generate, via Sencha Cmd, as many production builds of the same application as there are languages set in the configuration
  • Reload the entire application each time the language is changed
  • Easily load additional resources before starting the application
  • Use different languages in different parts of the application

 

Externalization of Sources

Enterprise developers view internationalization differently than the general developer because of their unique needs. Before choosing to adopt a framework and extend it, they must carefully assess their users’ actual needs. (Sencha Day 2015 presentation by Vincent Munier, Technical Manager at Jnesis.)

Companies of a certain size generally come to the same conclusion: multilingual management is a concern that spans beyond the development framework. Multilingualism is a general concern for large organizations, because their business processes require different languages at different stages of product development and company evolution. In some cases, where language requirements are changing regularly, translations should be done outside the application, mostly managed by third party software and loaded into the application via one or several web services.

The advantages of this approach are:

  • Changing the language doesn’t require the developer to rebuild the application – the change is applied instantly after reloading.
  • Translation doesn’t necessarily have to be done by the same people who write the code.

It could be argued that entrusting translation to people who do not know the code or how a JavaScript file is coded could pose some problems. However, it is perfectly conceivable to use a translation tier tool to translate content, one that can be used by non-programmers, and to load the data into the application.

As mentioned above, the official Ext JS solution (which can be found here: online localization guide) doesn’t allow any tier tools to be natively implemented.

It is important to introduce good practices for building internationalization into applications at the beginning of a project to avoid a painful refactoring phase.

The Elegant way

Let’s first follow Sencha localization guide and insights from Saki’s blog post: loading language data before the application main screen is built.

This solution is close to what was possible before Ext JS 5: adding dependencies to specific resources in the application’s “index.html” file.

 

To achieve that, let’s first store the localization values as variables of a “singleton” class, like that:

 

This will allow them to be accessed from anywhere in the application. How ? As simply as typing Jnesis.Labels.button or Jnesis.Labels.title

The advantage of this approach compared to the use of “override” (i.e what is recommended by Sencha) is that localized values will all be in one file, and easier to use, because each element is a variable, as explained above.

Once that is done, we simply have to override the default language file (« Jnesis.Labels ») with the translations in the selected language.

There are two options:

  • loading the data via web-services:

Where the server JSON response would look like this:

 

You then would have to parse data and override your default localization singleton with those values:

 

  • loading overriding Ext JS classes:

 

Then using Ext.Loader.loadScript function to process it and loading your Main view when it’s done.

 

We would then want to use the native inheritance mechanism to our advantage by defining a new property (“localized”, for example) in the base component, and generate the attribute to be translated. This attribute would be a simple JavaScript object with keys and values (remember the Jnesis.Labels.button and Jnesis.Labels.title from above).

Values can be updated only when the object is read, by defining the keys as strings:


Once that is done, you just have to override the “initComponent” method of the base class and evaluate the keys, so they can be used in any Ext JS component:


This solution works at any hierarchical level in the component’s declaration (container configuration or item configuration) in a transparent way.

To go further

The latter solution works with both Ext JS 5 and 6 (Classic toolkit). You will find below examples of possible adaptations made by Jnesis in the past:

  • Deporting the loading functions and their associated processing in a specific class like “Ext.mixin.Mashup”. It ensures that every necessary file or JSON data from web-services are loaded before the class to which the “mixin” is applied is stored in memory.
  • Ensuring compatibility with the Ext JS 6 Modern Toolkit. It has no “initComponent” function. Another option can be found in the “config” property and in the generation of the associated “apply” method.
  • Loading and interpreting the translation variables in a dynamic way without having to reload the entire application.

Please leave comments below, so we can share more information on these improvements.

The source code is available on our github here