It’s been a while but we have finally started our project. J
What have we been doing for the last few months; you might
ask?
Well; we initially worked on an interim web project. This
really helped us get our feet wet with creating a Single Page (SP) Web application.
If this is your first time developing an SP Web application, I highly recommend
working on a small interim project before you start on your main project. Even if you have a lot of Web development
experience, I would recommend a small interim project. Creating an SP Web application is far
different than creating a Web site. Some people may say that you just need to build
some prototypes to learn how to develop an SP Web application but I
disagree. Until you start hitting the
big hurdles during development, you don’t really get the sense of what it takes
to build an SP Web application. (I’ll talk more about the hurdles we
encountered in future posts).
What is the one thing you really need to look at to build an
SP Web Application?
You really need to look at a robust JavaScript framework. We used Kendo UI (http://kendoui.com) for our interim project. The product does provide a good amount of UI Widgets and their MVVM frameworks allow you to separate presentation from business logic. But the widgets and the MVVM don’t seem to fit smoothly together. It seems like MVVM was an afterthought.
So
we started to look at other frameworks (Angular.JS, Ext JS, Ember.js, and YUI). We came to the decision to use Ext JS from
Sencha (http://sencha.com). Some of the
key features that we liked about the framework are:
a.
MVC:
With version 4.0, Sencha has redesigned the framework to work with the
MVC pattern from the ground up. The UI
Widgets and Controllers work seamlessly.
b.
UI Widgets:
To list out their Components and features would take too long for this
blog. I would strongly recommend looking at their example site: http:// http://docs.sencha.com/ext-js/4-2/#!/example
. If that is not enough to have you
thinking about using Ext JS, I don’t know what else to say. J
c.
Documentation:
Out of all the frameworks I looked at, Ext JS has a robust documentation
site (http://docs.sencha.com/ext-js/4-2/#!/api),
with a large number of examples and guides to help you.
d.
Performance:
A lot of Ext JS 3.X users made a lot of noise about performance when Ext
JS 4.0 first came out. But with the
release of 4.1.X and now 4.2 (We are working with version 4.2.), I think a lot
of the performance hurdles are behind them.
e.
Build and Deploy tools (minify):
Ext JS uses a Loader class to automatically load the JS files as needed
during development. This allows you to
separate your controllers, models, stores, views, and custom classes into
separate files. This is a huge benefit.
Without this, you could end up with large JS files that are difficult to
maintain.
(Note: there are open source libraries that allow you to do this too, but
it’s nice that it is included in the Sencha framework.)
Having all those files is great for development but bad for
production. Luckily, Sencha has a tool
(names: SenchaCmd) that can merge all the files and minify them for your
production site. It fits well into our build process.
One
thing to note about using Sencha, is that it is large. There is a learning curve (especially if you
have not used a JavaScript framework before). There are a ton of options and
settings you can use for each component. I recommend looking at their training
classes. But before you go, I recommend
working with the product first and getting some exposure to it. That way you don’t feel overwhelmed with
information during the week long training.
