The CODE development blog

"Code Once Deploy Everywhere"

Building web apps with Sencha ExtJS – EWD.js – Node.js – part 1

When designing and coding powerful web applications for the enterprise, you need:

  • a powerful, stable JavaScript framework that covers all application needs in the browser (not only the UI views, but also the data structures and the client-side business logic – controllers)
  • a back-end server like Node.js because it allows you to write your back-end code in the same language (JavaScript) as your front-end
  • a powerful framework that ties the front-end and the back-end together

In an enterprise or healthcare setting, you need long-term stability. You don’t want to start learning a framework today that will possibly become obsolete in the next few years. And the framework you choose needs to cover everything you’ll need during the development phase of your application. It’s nice to have all functionality in one front-end framework without the need to bring together components downloaded from the internet needing integration and maintenance.

Because of this, Sencha ExtJS is a very good choice for enterprise applications because it covers a lot of your needs. And you can extend the functionality if you wish – you can take ExtJS as the main “container framework”. You can even integrate other components or framework parts as ExtJS components (e.g. as been shown in a demo with D3.js).

At the back-end, Node.js is these days the obvious choice for your application server at the back-end. Just have a look at the module growth and the fast adoption in the enterprise.

To glue ExtJS and Node.js together in your application, you can use the standard functionality provided in ExtJS itself (using Ajax REST calls e.g.), but there is an even more efficient option by using the EWD.js framework as the “glue”. It offers you many advantages like WebSockets, security, session handling, it automatically manages multiple concurrent Node.js back-end processes (making your back-end multi-processing!) and much more.

As an example, I will show here how basic integration works with these three building blocks.

Watch the EWD.js course to get started

If it’s the first time you start developing a web app using Node.js, I strongly recommend to watch the EWD.js introduction course on Udemy. It shows very nicely how to get started from scratch in a Windows or Linux environment.

Create your ExtJS application

Once you set up your Node.js & EWD.js environment, you can start building using the ExtJS framework. I won’t go into detail how to download and install a trial – just go to the Sencha website to get you started, but the easiest way to get started is using Sencha Architect. First, create a new project in Architect.

Next, you need to include the client-side EWD.js file from the EWD.js framework into your ExtJS project. You’ll find this file in the D:\ewdjs\www\ewdjs directory (assuming you just installed EWD.js in the D:\ewdjs directory). This file contains all functionality you need to initialize EWD.js and sending messages to your back-end application.

Once the file is included, integration is really easy. You just need to properly initialize ExtJS first followed by EWD.js. Please follow these steps carefully, otherwise your application will not start (and work) properly!

Basically, all you need to do is hooking into the Application.launch method to start EWD.js:

Ext.application({


launch: function() {

/*
startup sequence:
– ensure Ext is fully initialised (use this Application.launch event)
– issue here an EWD.start(), don’t start Ext application yet!
– in EWD.start, after socket initialisation completed, onSocketsReady is called
– in onSocketsReady, create your initial Ext view to start Ext app
(set initialView false in Viewport properties, this removes Ext.create(viewPort) in this launch function)
*/

EWD.start();

}

});

Next, define the EWD.onSocketsReady function and start your ExtJS application:

EWD.onSocketsReady = function() {

EWD.application.framework = ‘extjs’;

// start Ext application by creating the viewport
Ext.create(‘MyApp.view.viewport.MyViewPort’);

// send a startup message – this loads the application’s node module
// and enables Node Inspector to load the module for debugging
EWD.sockets.sendMessage({

type: ‘EWD.onLaunch’,
params: {},
done: function(messageObj) {

// possible initialisation code after launch for UI
console.log(‘EWD.onLaunch called’);

}

});

};

That’s all you need to start using EWD.js!

Now you can simply define your event handlers in your ExtJS components and communicate with your back-end using the EWD.sendMessage function:

onMyButtonClick: function(button, e, eOpts) {

var me = this;

EWD.sockets.sendMessage({

type: ‘testView.loadCustomer’,
params: {

customerNo : 100

},
done: function(messageObj) {

var json = messageObj.message.json;
me.getCustomerFormPanel().getForm().setValues(json.formData || {});
me.getPurchasesGrid().getStore().loadData(json.gridData || []);

}

});

},

As you’ll see, the EWD.js back-end is returning a JSON object that is used to set the data values in your form and grid. All in one round-trip to the server! Compare this with REST calls, where you’ll need multiple calls for each resource you need at the front-end.

However, this way of working is even not the best way – better is using the new MVVM capabilities the ExtJS 5 version provides. In this case you can set the viewModel using the JSON response from EWD.js – I will post an example of this in a next blog post!

Advertisements

Universal software development using JavaScript – part 2

As explained in part 1, developing applications these days is undergoing a major change. While in the past, you could choose a platform (mostly tightly coupled with a specific OS), now one has to develop an application that can run on all kinds of devices and form factors.

Once you start developing (web) applications, you can take two major approaches:

  • HTML/XML-based development
  • JavaScript based development

In HTML-based development, you write your pages/views with HTML/XML tags. By styling these tags using CSS, you create your views in the application. A lot of frameworks help you to write views like e.g. Bootstrap, AngularJS, …

In JavaScript-based development, you write your views using JavaScript code. E.g. ExtJS from Sencha is a framework where you define your views in a declarative way using JSON. The framework then generates at runtime the HTML tags out of the JSON view declaration.

One of the great challenges when writing web applications are the number of technologies involved. You have to know HTML, CSS, JavaScript and the language(s) used at the back-end. This is a major issue when you start developing web applications: it’s not easy to find developers that cover the whole application.

In the past, the application flow was using complete HTML page refreshes, when Ajax was introduced, complete page refreshes were no longer needed but the communications channel to the server was limited to a request/response mechanism. These days you can use WebSockets to keep a bi-directional channel open to the back-end server.

Today we came to a point where you can write a real application running completely in a browser. As every platform has at least a performant browser, you can run your application on every kind of device.

In addition, mobile devices are changing the world. However, one has to support different platforms and form factors. For a small company, developing apps is very costly and a common development environment is a must-have.

Because of that, development of native mobile applications is also undergoing major changes: development tools like Apache Cordova & Phonegap allowed to write applications for different platforms using a single codebase.

One major technology however tries to merge all these different development environments: React.js and React Native. This technology allows you to write web and native applications the same way! As you have to cope with only one learning curve, this is a major step forward.

Once you take a deep dive into these technologies, you will soon realise that you need a mechanism to interface your user interface to your back-end. To develop efficiently, one needs an interface framework to the back-end server.

Depending on the type of connection, you will have a stable connection to your back-end, but for consumer apps, the connection will be less stable, dropping out sometimes or maybe you even need to work offline.

To implement all these requirements without a framework that copes with these issues for you, is a major issue. In fact, it requires a lot of “plumbing” to create a good and secure binding to the back-end server.

A couple of years ago, I started writing applications using EWD from M/Gateway. This framework allowed me to write web applications for any UI framework and also provided all the security and “plumbing” to efficiently write applications using XML tags. The advantage of this was a clear separation of view code and business logic and a secure connection to the back-end. Calls to the back-end were using Ajax technology, the views were declaratively coded using XML tags for each (customisable) component. Because of the use of XML (component) tags however, you still needed a compilation step to convert these tags into executable HTML and back-end code.

Last year however, once I understood the big advantages of using Node.js at the back-end, I switched my develoment environment over to the EWD.js framework. This framework has several big advantages over the previous EWD framework:

  • no compilation needed anymore of your sources
  • you can develop now using all technologies and tools available for the UI framework of your choice; EWD.js doesn’t limit you anymore to the use of XML tags
  • it provides all the “plumbing” you need to bind securely and efficiently to your back-end
  • it is using WebSockets for communication with the server, it’s even possible to use Ajax (REST-like) binding instead; the back-end can update the interface without the need for (long) polling on the UI
  • it scales very easily as it’s running a pool of concurrent back-end child processes; it avoids the single-thread limitation of Node.js back-ends
  • you can develop your front-end (UI) and your back-end in the same language (JavaScript)
  • it provides support for web services, REST calls, …
  • you get all the advantages of having Node.js at the back-end (you get access to thousands of ready-to-use packages for all kinds of functionality you’ll need in you applications

As EWD.js is a framework that doesn’t force you to use either technology, you have the choice and you can decide on the technology you’ll be using to write you application. E.g. if you want to use the all-new React technologies and build a GraphQL endpoint, you can do that. You want to build a restify server endpoint? No problem … the possibilities are endless.

In my daily development, I’m using EWD.js in multiple scenario’s:

  • in (default) WebSockets mode for building ERP applications using Sencha ExtJS 5.1 making extensive use of the MVVM pattern
  • in HTTP (Ajax) mode for integration with external cloud services like e.g. sms gateway providers
  • in HTTP mode for mobile apps customers use to manage their orders in the retail stores (the app uses a loosely coupled connection to our back-end and allows wireless disconnects)
  • the ewd-federator is used as a REST endpoint for a retail store chain – allows real-time updating of supply on the central webshop
  • the ewd-federator allows suppliers to enter their product data immediately in our systems for approval

Summing up some of the possible scenario’s, it is clear that this framework is very flexible. Introduced in one of the latest builds, it’s even possible to use it as a GraphQL endpoint  to creates a well-defined data gateway for existing applications. In fact, adding wrapper functions to your existing codebase allows you to modernize very quickly existing applications without the need to rewrite everything.

One additional advantage of using such a framework: because you can use it with all kinds of UI frameworks like React.js, AngularJS, ExtJS, … and it can also easily interface to e.g. React Native, you can write a web application and a native app using one and the same back-end!

Which brings me to the title of this blog … CODE (Code Once, Deploy Everywhere)!

Universal software development using JavaScript – part 1

As a developer, you experience very exciting times because of the current evolution in software development. Computer industry is undergoing a major revolution and it poses some important challenges.

For several years we see that sales of pc’s and notebooks are under big pressure. The market has shifted towards mobile devices like tablets and smartphones.

On a pc or notebook, you had to support fundamentally only one form factor: the desktop. However, these days you can’t limit yourself anymore to the desktop and you have to support all kinds of form factors.

Furthermore, because of the success of tablets and smartphones, the operating system is becoming more and more irrelevant. The fact that all devices are always “connected” allows the shift towards cloud computing.

As a developer, to support all these kinds of devices, form factors and operating systems, one can ask the question how you can support all this with one codebase? For smaller companies, it’s not possible to write applications natively using classic programming languages like C++, C#, … because you have to write the same application several times (and support it).

Fifteen years ago, I decided to start developing applications for the web. At that time functionality for real applications in HTML and JavaScript was still limited, but sufficient for my purposes. But this technology has been undergoing such a major evolution in the last 15 years that it has reached a level of maturity to replace all kinds of applications without limitations or performance penalty.

Especially when Node.js saw the light as back-end technology on the server, you could now stick to one single development language for your applications: JavaScript. In fact, it is IMHO the only technology one can use these days for developing applications that have to support all kinds of form factors as outlined earlier.

Which technologies I chose to develop applications in an efficient way will be discussed in part two of this blog post.