UI Development Frameworks & Responsive Web Page Design

Traditionally to design & build a web page, HTML technology was used.

Using plain HTML to develop a web pages has the following challenges,

1. Takes more time to design & build web pages
2. Working with Rich UI elements (Tables, Complex forms, Wizards,..) is difficult & needs specilization skills
3. Cross browser & device compatablity is not supported by default
4. More lines of code
5. Performs slow

To address the above challenges, over the past few years, the number of User Interface (UI) frameworks have exploded.  These recent UI frameworks were largely created in response to new mobile devices that have flooded the market, new browsers, new HTML specifications, the increasing use of Responsive Design, and the decreasing use of Flash.

The following are some of the popular HTML 5 based UI development frameworks available in the market,

1. Twitter Bootstrap
2. Mobile Angular UI
3. Sencha Touch
4. Kendo UI
5. Intel XDK
6. WebIx

These frameworks are cross-browser, cross-device JavaScript frameworks for building interactive web applications using JavaScript, CSS, HTML5 techniques.

So, it is the time to say good bye to developing web pages with traditional approach & consider using the above frameworks to simplify work & improve productivity.

I’m sure most of us have started to use these frameworks, if not it is the right time to get started 🙂

Memory Management in Java Script apps

While developing Java Script (JS) rich applications/pages using UI development frameworks (Say Bootstrap or WebIx) or plain JS, managing memory utilization of our code is very important.

Like JRE, Browsers also have inbuilt Garbage collector (GC) to reclaim the garbage or memory occupied by objects that are no longer in use by the program.

The GC available in older browsers such as IE 9, 10 in not as effective as GC available in the latest browser versions. And hence if your JS application is required to be used in older browser versions, special attention should be given to effective memory management.

Irrespective of the browser versions, to provide a seamless browsing experience to the user; designing JS web pages  by following the memory management best practices is must. Otherwise as the user browses through the app, memory utilization piles up resulting in browser crash leaving the user with bad experience.

We should aim to develop the web pages which performs equally well on any of the hardware, devices (Desktop, tablets, Smart phones) & browsers (IE, FF, Chrome,..) following best practices such as freeing memory used by JS objects, removing DOM nodes from memory, nullifying reference to DOM,..

So next time, before you write any JS code make sure it is memory optimized.

Customer/Developer experience enrichment tools

Though we put our best efforts in Build & QA phases of the project, it is likely that sometimes defects find their way to production.

Traditionally, we expect users to report these problems,  We then try to provide fixes; for critical issues we stretch & stress out to meet SLA’s.

This process results in bad user experience & also drains energy levels of Staff.

Times are changing, technology is evolving and expectations are growing,

We now have tools which helps us to proactively observe the user experience, discover issues affecting the users in real time & act on the issues proactively.

Raygun is one such tool,  https://raygun.io/

Key features of Ragun:

• Amazingly easy to integrate to our app, just a matter of few minutes
• Can be configured for both Desktop & Mobile apps. Real savior specially for mobile apps where we don’t have much provisions to track errors
• Works with all major web and mobile programming languages
• App performance and error tracking in one platform
• Can be used during Build, QA, SIT, UAT, Production Support,.. phases as well

So are we ready to embrace this change for good?

Privacy friendly apps

With the emergence of Web 2.0, there is an increase in business adoption of the Web as a means of doing business/delivering services. This results in increased information/data sharing through web.

Hackers often attack the websites/apps to steal the data or to bring down the apps.

As a result, industry is paying special attention to the security of the web applications.

Generally, web app developers and testers follow the security best practices defined by OWASP.

OWASP is the emerging standards body for Web application security. In particular they have published the OWASP Top 10 which describes in detail the major threats against web applications.

Secure web application development should be enhanced by applying security checkpoints and techniques at early stages of development as well as throughout the software development lifecycle.

Knowing the security threats & it’s after affects, it is important that we take proactive measures to enhance our apps with security best practices followed widely across industry.