Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dojo vs extjs for large single page js app

I'm going to be building a very large mvc js app admin app and have narrowed it down to dojo and extjs

I would like to know if anyone has any experiences with either of these frameworks within the last 6 months and if you had any issues with any of the following areas

  • speed of development
  • mvc
  • documentation
  • bindings
  • internalization
  • theming of widgets
  • a searchable client side store (doesn't have to be offline just the ability to store records once received and then do local searches on those records)
  • testing using some full stack tool like selenium
  • datagrid, pagination, sorting the whole works
like image 529
tee Avatar asked Jan 17 '12 17:01

tee


People also ask

What are the advantages of using ExtJS?

It allows you to save time on development and make the process easier, there are no compatibility issues, many multiplatform advantages, and you get great support services from Sencha.

Is ExtJS still popular?

Even though ExtJS is well known among many coders, the technology is not globally spread. Nevertheless, this framework is most often used by big companies. They use the tool to develop production software and create other complex applications.

Are the powerful part of the Ext JS framework?

Ext JS is a powerful application development platform based on JavaScript. It helps you to create data-intensive HTML 5 applications by using JavaScript. Ext JS framework allows us to create an enterprise application with user experience with the help of JavaScript, without writing the code of CSS or HTML 5.

Is ExtJS like react?

ExtJS is a pure JavaScript framework, meaning that the entire application is written in plain JavaScript, unlike React where the application is (typically) transpiled into JavaScript from JSX (more on this later). Although it is possible to use custom HTML components, this is rarely done in practice.


2 Answers

Since Dojo does everything you required.

Dojo supports "stores" that do exactly what you ask. They also support different things like JsonRestStore, XMLStore, HTMLStore, and many others so you can easily switch the source of your data.

About unit testing you can either use the built-in tool called Dojo Objective Harness, and it's robot, or something else like selenium or eventd (dojo).

About MVC, dojo has something called dojox.mvc : http://livedocs.dojotoolkit.org/releasenotes/1.7#mvc

Though there many other things too :)

I would recommand reading the tutorials here : http://dojotoolkit.org/documentation/

Your question is a bit hard to answer because i guess pretty much every decent framework today, can do what you ask. And each dev will tell you the framework he likes better is better ^^

Personally, I use Dojo, I find it powerfull and especially well made for large applications. They also are very active and keep up with the latest trends (AMD Loader RequireJS, etc). There is a nice community also, helping each other, especially on the mailing list and irc channel.

Also, if it matters in anyway, companies such as IBM trust and spend time helping the framework to make it better.

  • speed of development : good
  • mvc : good
  • documentation : good - huge progresses recently :)
  • bindings : good
  • internalization : good
  • theming of widgets : using LESS rocks
  • a searchable client side store (doesn't have to be offline just the ability to store records once received and then do local searches on those records) : good
  • testing using some full stack tool like selenium : good
  • datagrid, pagination, sorting the whole works : new dgrid is great, old grids are ok Dojo is quite powerful, but can be tricky at times, good support makes up for it
like image 67
PEM Avatar answered Oct 23 '22 13:10

PEM


Here's what Ext-JS offers.

  • Speed of development: http://docs.sencha.com/ext-js/4-0/#!/example Look at how easy the examples are
  • MVC: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller (Routing is not built in yet)
  • Documentation: http://docs.sencha.com/ext-js/4-0/#
  • Bindings http://docs.sencha.com/ext-js/4-0/#!/example/grid/binding.html
  • Internalization: every widget can be i18ned
  • Theming of widgets: Uses SASS
  • A searchable client side store: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-find
  • Testing using some full stack tool like selenium: Not built in, but since it's all OO based and decoupled, testing is easy
  • datagrid, pagination, sorting the whole works: http://docs.sencha.com/ext-js/4-0/#!/example/grid/multiple-sorting.html and http://docs.sencha.com/ext-js/4-0/#!/example/grid/paging.html
  • Dynamic Class loading: http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/
  • RTL support: http://www.sencha.com/forum/showthread.php?137065-EXTJS-4-RTL-When
  • Charting: I personally think it's below par for Ext-JS standards but they offer a pretty feature-full package (bugs non-withstanding) http://docs.sencha.com/ext-js/4-0/#!/guide/drawing_and_charting I actually prefer to use http://code.google.com/p/flot/ and I created a simple wrapper to use it as an Ext-JS Component

This doesn't belong in the answer, but if you end up using Ext-JS, you may need the following for better performing charts. The advantage of Ext charts is that they are easier to interact (mouseover, click) since it's not canvas based like flot.

/**
 * Renders a single flot chart, a much simplifed version of ExtFlot
 */
Ext.define('Ext.ux.FlotPanel',  {
    extend: 'Ext.Component',
    alias: 'widget.flot',

    /**
     * @cfg {number[][]} data The data to be drawn when it gets rendered
     */
    data: null,

    /**
     * @cfg {object} flotOptions
     * The options to be passed in to $.plot
     */
    flotOptions: null,

    /**
     * @property
     * The Flot object used to render the chart and to manipulate it in the future. It will only
     * be available after the first resize event
     * You may not set this property but you are free to call methods on it
     */
    flot: null,

    initComponent: function() {
        this.callParent(arguments);
        // The only time that we're guaranteed to have dimensions is after the first resize event
        this.on('resize',  function(cmp) {               
            if (!cmp.flot) {
                cmp.flot = $.plot(cmp.getTargetEl().dom, cmp.data, cmp.flotOptions);
            } else {
                // Flot knows to look at the container's size and resize itself 
                cmp.flot.resize();
                cmp.flot.setupGrid();
                cmp.flot.draw();
            }
        });

        this.on('beforedestroy', function(cmp){
            if (cmp.flot) {
                cmp.flot.shutdown();
            }
        });
    }
});

When I looked at Dojo 4 years ago, I hated it. Coudln't stand declaring widgets in HTML. I much rather declare them with JS objects ( I have heard that you can now declare widgets without specifying the HTML. There are people who love creating widgets in the HTML, but in my case (dynamic business minded apps), every piece on the screen is dynamic and the configuration comes from the server, so I don't want the server generating my HTML since I need knowledge about it in my JS.

In any case, I'm really happy with Ext-JS and have no reason to go out shopping for a new framework.

like image 9
Juan Mendes Avatar answered Oct 23 '22 12:10

Juan Mendes