Overview of Modern Web App Development

I started developing websites from the days, where JavaScript is considered as BAD and should be as minimal as possible – preferably for input validations. But things got changed over the time and JavaScript became the key for Web Apps!

I wish to share my encounter! Let’s start.

It was those days where Web App development is ruled by Server Side technologies like Classic ASP, ASP.NET, PHP etc., and JavaScript is used to do input validations. No AJAX. I have witnessed waiting for the site / app to load by looking at the blue progress bar in Internet Explorer (IE was dominant browser at that time).

Later AJAX introduced by Google through GMail app (though Microsoft IE has already have it through XmlHttpRequest ), which is revolutionary and it changes the way we develop apps. Developers considered AJAX as a powerful tool which can do miracles and it worked!

JavaScript started playing the key role in high performance web apps, where it triggered for Single Page ApplicationsSimultaneously developers started facing cross browser issues and it was really hard to achieve cross browser compatability! Hope you all agree with me.

Big thanks to John Resig for introducing jQuery library targeting cross browser issues which helped a lot! I know YUI(not actively maintained now) library already exists, but jQuery is instant hit and developers started using it and it’s open source!

With introduction of iPhone & Android, Mobile browsers started dominating desktop browser and they are powerful. This triggered injecting responsiveness to web apps through CSS3 Media Queries!

JavaScript started ruling the client side development and it’s time to take the JavaScript to Server Side. Ryan Dahl did it and called it as Node.jsIt again changed how we write server side code. May be if you wish to check first presentation on Node.js by Ryan himself!

Now developers started created packages of their libraries and pushing to npm (node package manager). Simultaneously CSS got better with frameworks like LESS and SASS.

Twitter created Bootstrap, a CSS framework which allowed to develop web app that are responsive targeting Mobile, Tablet and Desktop browsers! Also, they created bower, another package manager which is alternative to npm. Pros and cons of npm and bower is out of scope of this post!

SPA‘s got lot of attention and everyone started considering it instead of regular Multi page applications. It triggered to create MV* frameworks like Backbone JS, Angular JS etc.,

We have task runners – Grunt JS, Gulp JS to automate the tasks which we do repeatedly while building the app!

Frameworks changed the way we develop apps! Few of them :-

DOM Manipulation libraries:

jQuery, Lo-Dash, Underscore JS

HTML Templates:

Mustache JS, Handlebars JS

JavaScript MV* Frameworks:

Backbone JS, Knockout JS, Angular JS, Ember JS, React JS

Package Manager:

npm bower

Build Tools – TaskRunner:

GruntJSGulpJS

Scaffolding Tool:

Yeoman

Unit Test Framework:

QUnit, Jasmine, Karma

At Last, there are few developers, authors who guide & inspire us. Here are the few of them  –

Douglas Crockford, Paul Irish, Addy Osmani, Christian Heilmann, Remy Sharp, John Papa, Jake Archibald, Nicolas C Zakas, Yahuda Katz.

I strongly feel Web Apps will override Desktop apps. I will try my best to accomplish it!

Happy Web App programming!

Useful Chrome Apps & Extensions for Web Developers

I have made by work easy by using the extensions / plugins whatsoever we call them. It can be on Chrome or Firefox. In this post, i would like show you few apps & extensions for Google Chrome(my favorite browser).

I strongly believe that Tools are great assets for web developers to debug the resolve the issues in no time. Tooling is gradually gaining momentum and it’s reaching peaks!

Backbone Debugger : Developer Tools extension for debugging Backbone.js applications. It allows to debug the Backbone.js web application by inspecting the Views, Models, Collections, Routers objects.

It’s a great debugging tool to find the daemon views which is left in the DOM and it tracks the events triggered.

You can install it from Chrome Web Store – Backbone Debugger

Ember Inspector : Tool for debugging Ember applications. It allows you to –

  • View all the routes defined in your app.
  • Information about templates, controllers and models that are currently rendered.
  • Inspect the Objects – Models, Collections etc.,
  • Make your application’s objects available in the console as $E variable.

You can install it from Chrome Web Store – Ember Inspector

Grunt DevTools : It’s an awesome tool to run your grunt tasks right inside your chrome browser. Also, it’s capable of running grunt tasks from multiple projects.

You can install it from Chrome Web Store – Grunt DevTools

JSON Editor : One of my favorite JSON editor tools which allows to edit JSON in the browser. It formats the JSON and you can live preview the results.

I know there are multiple apps / extensions for JSON, but i feel this is pretty useful to me atleast. You can install it from Chrome Web Store – JSON Editor

Tincr: Allows editing and fast reloading of local files from Chrome developer tools. With this tool, you don’t need to traverse between your source code and web browser. You can edit the source code inside the browser and changes will be automatically saved to the source. Cool Isn’t it!

In addition, Tincr does auto reloading of JavaScript and CSS changes made in other editors.

You can install it from Chrome Web Store – Tincr

Clear Cache : It allows to clear the cache / history of the browser from the beginning with a click. It’s an extension written by me and yet to publish to Chrome Web Store. It available in GIT and you can pull from it and install manually!

Download from my Git – Clear Cache

I will post more tools as i found useful to web developers like us 🙂

Happy Web App programming!

Web Tools from Microsoft – modern.IE

I was amazed with the amazing tools provided by Microsoft for Web developers and they hosted a website specially for these tools – modern.IE

So, I’m planning to brief about the Tools in modern.IE site in this post. Let’s see what’s in?

Website Tile – I love this feature! It allows to create Windows Tile in few seconds. Allows the user the user to pin the website to their Windows 8 start screen.

Virtual Machines – It provides virtual machines for different platforms – PC, Mac and Linux. Allows to test your website on different versions of Internet Explorer from your Mac or Linux.

Site Scan – This is a service which allows you to scan your website for coding problems. It helps developers to improve the performance of the site by fixing the pitfalls. It’s Open Source!

Compatibility Scan – It allows to scan your website for your code which is no longer supported and you can update it! This is very useful for outdated browser support especially for < IE 9+ versions.

Browser ScreenShots – It takes the screenshots of your web site in different browser on various platforms includes Mobile Safari and Android.

Developer Channel – Like Firefox and Chrome, IE started pushing nightly build with upcoming features enabled on it! It allows the developers to test the upcoming features in IE to take advantage of latest features!

It has much more in it including Community Support, MSDN resources etc., It’s all yours to explore the hidden information!

Happy Website – IE programming!!!

Build Hybrid Apps Online with Adobe PhoneGap Build

The Pain area while creating Hybrid Mobile Apps is building to multiple Platforms. I’m NOT saying it’s too difficult, also, it’s not simple process. How it will be if you have a tool which does this BUILD process automated for different platforms? Super Cool… Isn’t it!

It’s Adobe PhoneGap Build tool! Adobe offers this as a CLOUD service, where you don’t need to install any Software on your PC/MAC. Great, Thanks to Adobe for making this. Personally, i love this 🙂

How to use this Adobe PhoneGap Build?

Before going to know about this tool, be ready with your source code for HYBRID Mobile App which includes – HTML, CSS and JavaScript.

Now, visit the PhoneGap Build URL – https://build.phonegap.com/. Register yourself. You have FREE and also PAID plans and it totally depends on your needs. If you are OSS developer, then FREE plan should be fine.

Once you logged in, you may have to click on + new app

newapp

It allows you to pull the code from GIT repo. It can be a Public or Private repo. To build Private repo’s you may have to pay for it and maximum number of Apps you can create is 25(with single login)!

newapp

I have pushed a demo app to Git to test this PhoneGap Build and if you wish to try out, you can use it. It’s https://github.com/roopeshreddy/PhoneGapAppDemo/

Once you have entered your .git URL, you can click on pull from .git repository. This will fetch the source files from Git and make it ready for BUILD.

NOTE: You can also upload zipped folder instead of .git repo!

Now, it will be ready to create BUILD. You can edit the name of the application, enable debugging etc.,

newapp

Once all the options are set, click on Ready to Build which will create respective installer files for different platforms!

Untitled

Aaah, we are ready with installer files for different Platforms. Just click on the platform icons to download the respective installer file.

As of now, Adobe PhoneGap Build supports following platforms –

  • iOS
  • Android
  • Windows Phone
  • BlackBerry
  • HP WebOS
  • Symbian

NOTE: As per the Official blog of Adobe PhoneGap, they are depreciating BlackBerry, HP Web OS and Symbian Platforms. you can ready more about it here – Phone Gap Platform depreciations

Happy Mobile App Development!

Hybrid Mobile Apps

I came across a question – “Questions on Hybrid Apps”  in one of the Forums, and i thought it’s worth writing a blog post, so that it will help others (at least for my blog post visitors 😉 ) May be many of us have doubts about Hybrid Mobile Apps. Let me provide my thoughts –

Hybrid, the word itself states that, it’s mixture of multiple things. Now, Hybrid Mobile Apps – it’s mixture of multiple technologies.

1. How it is different from Regular / Native Mobile Apps?

Let me tell you the basic difference of Native Apps and Hybrid Apps –

Native Apps – Developed using Platform specific SDK (Software Development Kit). Native Mobile Apps built on platform SDK’s. For example, if you wish to develop an iOS App, then you may have to download the Apple iOS SDK and start building app. Now, you thought of powering Android users with your app, then you may have to download Android SDK and start building the app from scratch.

Hybrid Apps –  You can leverage your web skills to develop an Mobile App.

HTML 5 + CSS 3 + JavaScript + (APACHE CORDOVA / IONIC FRAMEWORK / TRIGGER.IO etc., )

We can achieve PORTABILITY – write once and deploy on multiple platforms.

2. How to access the device features like Contacts, Camera, GPS etc.,?

You can definitely access to all the device features through  – APACHE CORDOVA / IONIC FRAMEWORKTRIGGER.IOThese plugins will help us in accessing OS features through their API’s. Same is well documented in their respective sites.

3. Can i deploy the Apps to Stores for different platforms?

Yeah. You can deploy your app to multiple platforms App Stores. Consumers can download you app just like the Native Apps.

4. How do you control the layout of an Hybrid app considering it’s one app which will be run on many different devices with many different layouts?

Responsive Web Design. Using CSS 3 media queries you can achieve responsive web design. It allows to design layouts for different resolutions of the devices.

5. Which development framework is better Apache Cordova or Ionic Framework or  Trigger.io or any other?

Hard to answer. Most of the Hybrid Apps are developed on Apache Cordova. It’s Open Source. Even Ionic Framework internally uses Apache Cordova. Trigger.io is licensed and you may have to pay for it.

Each of the framework will have their own Pros and Cons. It’s better to do through analysis on choosing the right one for you!

Happy Mobile App programming!!!

Scalability in Hybrid Mobile Apps

Hybrid Mobile Apps = HTML 5 + CSS 3 + JavaScript. Hybrid Mobile Apps possible through Adobe PhoneGapIonic etc., Many articles available if you google about this!

Scalability is a big factor to consider while designing an Monile App, especially Hybrid Mobile Application. Many people suggests to go with Native app instead of Hybrid app, if SCALABILITY is a primary factor for your app. One point of time, i even agreed it and suggested my team to go with Native app development. Considering the facts, yeah for highly scalable apps, Native app is preferable solution!

In recent R&D i found that, we can achieve Scalability in Hybrid Mobile Apps too. We should pay more attention on the DOM size and this will lead to a highly scalable mobile app.

Let me explain my scenario –

As per requirement, we have to display list of items(Each item has more information). These items will be fetched dynamically from Server. If the number of items greater than 100, our app crashes since the DOM size for the 100 items is huge. Also, we are displaying all items at once which is causing the ***CRASH***.

Now we have started our R&D by examining the code. We tried  removing unnecessary HTML, CSS and JavaScript but in vain. Tried Document Fragments and Object Pools solutions still in vain. Object Pools has provided us better results, but not the scalable results 😦

We know the root cause for the crash is the heavy DOM. So we started building ItemStack. ItemStack holds the chunked item size which we predefine(We define it as 20 items). In our scenario, the logic is total number of items / 20. Ex: If we have 100 list items, then the ItemStack size is 5.

Now we applied Lazy Loading approach. Based on scroll position we append or prepend ItemStack row, thus minimising the  footprint of DOM. I know appending and prepending again lead to more DOM access, but still we achieved it with DOM fragments!

Finally, we have fixed the crash issue with the above approach!

Happy Hybrid Mobile App programming 🙂