Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is ExtJS philosophy? Single page application? [closed]

I need to write my next project using ExtJs. It's a nice Javascript lib but I don't fully understand the idea behind it. Take the docs page for example.

Am I supposed to write my web applications with extjs like that? One page that should never be refreshed, and everything getting done by AJAX?

How do you debug such applications if getting to the right place may take a lot of 'clicking' and working with it. You cannot fix the bug and hit refresh in the browser to see the results.

Any suggestions?

like image 295
stach Avatar asked Oct 19 '09 14:10

stach


People also ask

What is the concept of single page application?

A single-page application (SPA) is a Web app that is presented to the user through a single HTML page to be more responsive and to more closely replicate a desktop application or a native app. An SPA is sometimes referred to as a single-page interface (SPI).

Is single page application the future?

1. Increased Speed – Speed has to be one of the biggest advantages of opting for Single Page App development. They are much faster than traditional web apps as they can load new information into a single page upon customer request instead of linking several HTML pages to the architecture of the site.

Is Ext JS still used?

For being over a decade old, Ext JS is still a good platform to develop many enterprise-grade (think intranet) applications.


2 Answers

Am I supposed to write my web applications with ExtJS like that? One page that should never be refreshed, and everything getting done by AJAX?

You don't have to write your applications like the ExtJS documentation. If you look at the example pages for ExtJS you'll see a lot of HTML mixed in with Ext widgets on individual pages. In my work I have two different apps that I'm using ExtJS on, one is a legacy site where I use the widgets to spruce up the pages, and the other is a full blown web application using nothing but ExtJS for the front end. I definitely prefer the latter once I got a hang of it, but the learning curve is pretty steep.

How do you debug such applications if getting to the right place may take a lot of 'clicking' and working with it.

The key here is to modularize your application. Build each component individually and test it in a vacuum. Don't get caught up into thinking this has to be some giant JavaScript file that contains the entire application. In most web apps the source had dozens or more JavaScript files which are only combined for deployment purposes.

A must have for testing and debugging is firebug. It allows you to inspect Ajax requests, debug the JavaScript live and much much more.

Here's a series of articles about composing large Apps using ExtJS, it a pretty decent read with a lot of good info.

Building a sample application in ExtJS 4 Part1 Part2 Part3

For ExtJS 3.3 and below Part1 Part2 Part3

I think it's ok to use ExtJS in either way, if you're just getting started it might make more sense to do what you're most comfortable with and add some ExtJS 'spice' along the way. That said, once you start using it to create single page apps and you have your back-end outputting nothing but JSON you'll probably never look back at the old way you did web apps.

like image 180
rwilliams Avatar answered Oct 03 '22 22:10

rwilliams


You could do what modern AJAX-based apps do and use the URL hash to deep-link your app.

Gmail is a great example of how this works. To get to my inbox, I navigate to:

https://mail.google.com/mail/?shva=1#inbox

To go to my contacts manager I browse to:

https://mail.google.com/mail/?shva=1#contacts

Both of these "pages" are on the same page, and navigation ever actually redirects me to a different page while I use the app. The hash is all that changes.

When the page loads, what you need to do is check window.location.hash and use that to update your app's state.

like image 38
Dan Herbert Avatar answered Oct 03 '22 22:10

Dan Herbert