10 Things I Learned about Ext JS After 1 Week

I recently had the opportunity to work on a project for a new web application on the Ext JS framework. I am a front-end developer (“UX Engineer” by title) so my background is primarily in HTML, CSS, and JavaScript. As such, my responsibility on this project was to implement the user interface design, which had previously been conceptualized in Abode Photoshop.

Starting off, I did have some understanding of the basic concepts, but almost no practical experience. A co-worker helped me install the necessary bits and get the project up and running. I completed my work in Aptana Studio 3, primarily because it provided an easy way to compile and run the project.

I worked on the project for about 5 days, which was just enough time to get a crash course in Ext JS and complete the tasks assigned to me. During the frenzy that ensued, I learned several things about the Ext JS framework that I felt were worth sharing.

  1. Ext JS takes a very modular view of, well, everything. Instead of working in a few massive documents, I found myself working in several small documents. In some ways, this was nice because the documents were easy to scan through and work with, but it also meant that I usually had a lot of documents open in Aptana. I had to develop a system for ordering the tabs so I could easily find the one I needed.
  2. Ext JS projects come with a pre-built interface that includes dozens of UI components that can be utilized at will. There are several themes to chose from that allow developers to create projects with little-to-no CSS required.
  3. If you need to implement a custom interface, it seems that creating a new theme is the best approach. Ext JS has a theming guide that provides a pretty good overview of how to set up a new theme.

  4. Even custom themes need to start with a base theme. This provides a basic set of styles for all of the UI components included in the project. The “ext-theme-base” includes the least amount of inherent styles and should be the easiest to override.
  5. Ext JS utilizes SASS, which allows you to use variables, math operators, and other functionality not available in regular CSS. This was also my first real foray with SASS, but I was already familiar with the core concepts. Although I looked to make use of the various benefits that SASS offers, I was working on a very small project and I found that I only feature I needed was variables. Unfortunately, in this case, I don’t think the 10 or so variables offset the extra overhead that came with compiling the project every time I needed to check my styles in a browser.
  6. Even the CSS is modularized in Ext JS. Ext JS has a separate SCSS file for each UI component (which I didn’t touch) and I had a separate SCSS file for each custom view. That provides some organizational benefit, but, in the end, Ext JS compiles all of them into one file when the project is built, which nullifies any speed optimization benefits that separating the code may have also provided. It also means that you need to have a good understanding of how the final CSS file will be compiled or your style updates may get overridden by other code that is inserted later in the document.
  7. Ext JS allows you to create a “universal” style sheet in your theme that will be included on all views of your application. Under /packages/{your-theme}/sass/etc create a file name “all.scss.” I used this file to hold the base styles for my application as well as my SASS variables and then had view-specific styles in separate files.
  8. Although Ext JS does allow you to create custom themes and override most default styles, there are still many instances where inline styles are inserted. In those cases, I found that I usually needed to apply the !important CSS snippet in my file.
  9. The generated HTML in Ext JS 4.x is massively bloated. Although there are ways to insert your own HTML, most of the time, I worked with Ext’s UI components. A simple button generated by Ext might include like 10 nested HTML elements. I believe that the main reason for this is that the default themes still support IE6 and they need a lot of elements to pull off gradients, borders, etc. in exactitude in all browsers. This might be my least favorite thing about Ext JS, because it creates a lot of unnecessary overhead for the browser and makes navigating the DOM through Chrome’s Dev Tools (or a similar tool) an essential step in styling anything.
  10. Ext JS has pretty good documentation. I found it to be a little cryptic until I had worked with the framework for a little while, but then it was quite helpful. However, if you do have a question that the document doesn’t answer, I found that there are not a lot of other resources available. Even stackoverflow is short on answers. I’m told, however, that the Sencha forum is quite good in a pinch, but I have yet to try that route.

By the end of the week, I felt pretty comfortable working with Ext JS. There was a bit of a learning curve, but, between my helpful co-workers and Ext’s documentation, I was able to overcome most issues with little trouble.

After a week of total immersion, I don’t feel like I can fully endorse Ext JS. I can see how it would be a good tool for development teams that don’t have any front-end developers, but it certainly didn’t make my tasks any easier. In general, I prefer to work with lightweight frameworks that provide more control over the HTML and CSS.

What has your experience with Ext JS been like?

Advertisements

MVC: Taking the Web By Storm

Author: Matthew Grigajtis 10-27-2011

MVC has become a very popular abbreviation lately, especially among web developers – and for a very good reason. MVC stands for Model View and Controller, and it is basically standardizing modern web application across platforms and languages. The MVC architecture uses what is called the DRY (Don’t Repeat Yourself) philosophy, and has succeeded in taking an object oriented approach in making web applications development elegant and powerful while being easy for multiple developers to maintain.

The Model of the MVC architecture is basically the object. For example, if you were building an application that kept a record of employees in a database the Employee would be the Model. The Model is also the portion that is intended to work directly with the database.

The View portion of the MVC architecture is what the End User sees. Many open source developers would think of this as the template, while Old School Microsoft ASP.NET developers would think of this as the Master Form. All the presentation and JavaScript is contained within the view and it is not supposed to contain any business logic.

The Controller portion of the architecture is the glue that holds it all together.  The controller is what interacts between the Model and the View. The controller will often contain business logic, call functions that interact with database from the model, process the forms, and handle all of the redirections.

An MVC architecture is available in virtually all platforms and languages.  Microsoft is up to version 3 of their MVC architecture and it is available for developers to use right now in MS Visual Studio, supporting both C# and VB in .NET.  There are also a myriad of Open Source MVC architectures available for free that run on *nix systems.  Ruby on Rails has gained a great deal of popularity in the recent years. Django is another elder MVC web application framework written in Python that has also had a cult following. CakePHP and Symfony are two of the more popular PHP MVC frameworks that many PHP developers prefer to use in modern application development.

While there are many legacy applications out there that probably have several years left in their lives, applications using the MVC framework will quickly become the norm and a standard skill that employers will be seeking.

Detecting Mobile Devices — Don’t Bother

Image of mobile phone showing this site.Author: Adrian Roselli  10/11/2011

Since I started working on the web (and was slowly coaxed to the world of Netscape from Mosaic and HotJava), clients have asked me to find ways to adjust how a page behaves based on what browser the end user has. Before campaigns like the Web Standards Project (WaSP) took hold and slowly convinced web developers, and by extension clients, that the right approach is to build for standards first, web developers struggled with everything from clunky JavaScript user agent sniffers to server-side components like the browscap.ini file for IIS. These all took time to maintain and were never 100% effective.

I am thrilled we’ve gotten to the point in the web where progressive enhancement is in vogue, finally falling in line with our own practices of the last decade or so. With the advent of mobile devices and plunging screen resolutions, we have support in the form of CSS media queries to adapt a single page to multiple devices, now referred to as responsive web design. Yes, we are still struggling with the best practices and design differences (such as forgetting print styles), but the overall concept is solid. No longer must you code a text-only page, a mobile page, a printable page, and a regular page (or the templates for each if you are using a web content management system). You can build one page and let it handle all those scenarios.

Except sometimes you find yourself in a situation where you have been asked to develop a different experience for a mobile user that lies outside the ideal of responsive sites. That different experience can be as simple as sending a user to a different page on the site if he or she is surfing on a mobile device. All those years of progress are swept away in one moment and we are back to struggling with user agents. I’d like to provide a little context on why such a simple-sounding request can be such an effort to implement.

Techniques?

If we fall back to user agent sniffing (reading the browser’s User Agent as it reports to the server), then we have an uphill battle. Just finding a comprehensive list is an effort. One site lists hundreds of user agent strings, and there is even a SourceForge project dedicated to staying on top of them all. When you consider how many different phones and browsers there are, and how often new ones come out (such as Amazon Silk), your clients need to understand that this approach is doomed to failure without ongoing updates (and fees).

If all you do is follow Google’s advice on its Webmaster Central Blog to simply look for the word “mobile” in the string, you’ll fail immediately — user agents on Android devices do not need to conform (and often don’t) to what Google says you will find. Opera doesn’t include “mobile” in its user agent (Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1109081720; U; en) Presto/2.8.149 Version/11.10), and the browser Dolphin doesn’t even include its name in the user agent string (Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; PC36100 Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 ).

You can take the inverse approach and instead detect for desktop browsers. It’s smart and simple as far as user agent sniffing goes, but still falls prey to the same problem of the constantly changing landscape of browsers. Given that the next version of Windows is intended to quickly switch its interface back and forth between desktop and mobile (keyboard and touch), unless the user agent for all the browsers installed on that device change as the user changes the device orientation, that technique is also doomed.

Serving different content based on screen resolution gets you around the user agent sniffing, but isn’t any more effective. With tablets approaching desktop screen resolution, and smartphone resolution approaching tablet resolution, there is no clear method for determining what kind of device a user has. An iPhone 4S held horizontally has 960 pixels of resolution and the Dell Streak tablet has 800 pixels (to clarify, the smaller device has more pixels, which is contrary to what most might expect). If you want a tablet to have a different experience than a phone, then serving it based on screen resolution won’t do it. As it is, the resolution of many tablets matches that of my netbook (1,024 x 600), which is definitely not the same type of device (it has a keyboard, for example).

What To Do?

Try to solve the objective earlier in the overall process — generate a different URL for mobile, embed it in different QR codes, look into feature detection, look at using CSS media queries to display or hide alternate content, and so on. Every case may require a different solution, but falling back to methods that were never reliable certainly isn’t the right default approach.

Amazon Silk, Yet Another Web Browser

Amazon Silk logo.

Amazon’s long-awaited tablet/e-reader was formally announced Wednesday, and the conversations about whether or not it will compete the iPad are underway. I don’t much care about that. I am far more interested in the web browser that it includes.

Amazon Silk is a new web browser, built on Webkit, and that is really the news of interest here. Add to that Amazon’s super-proxy approach to help users get content more quickly and efficiently and you’ve now got a new pile of potential chaos as a web developer. It’s far too early to tell how this will shake out, but in a client meeting Wednesday I already had to address it, so I think it warrants a little context for the current state of browsers so we can consider potential developer impact.

Amazon posted a video on its brand new blog to provide an overview of Silk (with an obligatory Geocities reference):

The 400+ comments raise some questions that tend toward a common theme — in the absence of a technical explanation, when can we get our hands on an emulator? Granted, there are plenty of comments about privacy, security, and some wild speculation, but the theme is clear.

As a web developer, I can tell you that we all feel overburdened with the assault of browsers we have out there already. We can champion the ideal of targeting the specs, not the browser, but when the clients call to complain about a rendering difference, not even a problem, on another browser it can get pretty draining. As Silk comes to market we’ll need to account for it, its hardware configurations, and its coming release versions (within reason, of course).

For some context about the burden we already have, yesterday Google Chrome developer Paul Irish wrote that, only taking into consideration Internet Explorer for desktop, we’re already on track to need to support 76 versions of just Internet Explorer (including version 8) through 2020. There are some broad assumptions in his article regarding how people will use the IE document modes, but the potential is still there. Add to that the new release schedule of many browsers (Firefox has gone from version 5 to 7 in ~90 days), and then pile on the browsers available for mobile devices, and we’re already at well beyond the number of variations of browsers that we had to support even in the heyday of the browser wars.

But Silk isn’t just a web browser — it’s got a super-charged proxy server that will compress images, compile JavaScript into its own machine-readable format, and batch files into a singular, smaller download. While this is nothing new (Opera Mini has done this for some time on mobile devices), Amazon’s implementation raises the hairs on the back of my neck when I think about all the years I’ve had to troubleshoot web applications because proxy servers are caching files, munging JavaScript, brutalizing images, and generally gutting the real-time features that the web had been moving toward more and more. I don’t know if this will happen with Amazon Silk, but given my experience with Opera, proxy servers, and users in general, I am filled with apprehension.

Related

Opera responded to the Amazon Silk announcement with its own explanation of how its own “cloud-compression” technology works:

Picture of web pages being process by HAL 9000 and delivered to Borat.