AppFoundry is a company with a strong focus on mobile development. About 4 years ago we started developing Sencha Touch applications. A little while later a client (Bayer) requested our assistance in development of some in-house desktop applications. Sencha Touch has a very similar syntax as ExtJS so it wasn’t a big leap.
This is why I came to love it so much:
- Ext JS is JavaScript framework unlike any I ever saw.
- Use 1 framework for a complete application.
It is a set of reusable components
For in-house applications, the design isn’t the main focus. You don’t have to ‘sell’ anything except for a good application that improves, speeds up or automates daily tasks for employees…
ExtJS provides an extensive set of reusable components: form components, grid component, layout components, buttons, tabs, windows, trees and many more. Check the
Kitchen Sink example for a first impression.
I have to write (and maintain) very little HTML and I have to write (and maintain) very little CSS (or SASS)
You
can build your own theme and you can build your own custom components. You can also override small template parts of components. These are the only times you will need HTML or CSS. The rest is highly structured JavaScript components.
Low Level manipulations
It has utilities for DOM, string, array, object, date and many more… However most DOM manipulations are done on component level so you don’t have that very often unless when writing custom components.
It has a complete data package handling all
backend communication. You can do low level AJAX calls similar to the jQuery AJAX methods. Or bind a ‘proxy’ to a store or a model to load/sync data with you backend. That can be done via REST, plain JSON, XML, SOAP, AMF, ext direct (sort of rpc). You can even make up your own communication…
Structure
It encourages you to have certain structure (but still flexible). You can use
MVC (since Ext4),
MVVM (since Ext 5), a combination or even your own pattern!
Sencha CMD is a tool that helps you generate a lot of boilerplate code and takes care of the folder structure for you. Nothing is to stopping you from deviating from that structure of course.
In practice
At Bayer we are developing a huge application for managing plant material, going from an inventory to registering experiment data to creating full experiment workflows, workflow templating and many more. It’s all extremely flexible. We use the Sencha data grid to browse millions of records. We created powerful search tools, facet filtering and some nifty features like dragging down on cells to fill up other cells like in Excel. And it’s all running in a single page application! This means you don’t have to refresh and redraw the whole page but bits and pieces are re-rendered for you.
Designing
For designing or prototyping you can use
Sencha Architect. Sencha Architect is a tool that you can use to visually drag around components and create an app in a WYSIWYG way. Although when doing more complex things you will have to resort to a classic IDE and fix the code.
IDE Plugins
Sencha has a lot of IDE plugins for JetBrains (IntelliJ, Webstorm?), Eclipse and Visual Studio. I’ve only worked with IntelliJ. Even without plugins the autocomplete is awesome! Combine that with your custom live templates and you’re well on your way to create small apps in a matter of minutes! By the way, Sencha is working on some plugins for text editors like Sublime, Atom, …
Building
I already mentioned Sencha Command to generate boilerplate code. But Sencha Command can do lots more for you, such as creating minified production builds, perform certain checks, build sass and creating builds with just the components you used. Sencha Cmd even has a build in webserver to quickly test your app without a lot of setup.
Testing
A very recent feature is the
test suit. Testing frontend web apps has always been a hassle. Because of the asynchronous nature, because of hard to test codes, because of high maintenance of integration test… Sencha’s test suit helps write and automate those tests. Its API attempts to make testing asynchronous actions just as easy as synchronous actions. They use a sort of promise like structure to wait for asynchronous actions to be done.
