Heartbleed Notification & Update

Recently the Heartbleed Bug, known more officially as CVE-2014-0160, was discovered and found to exploit vulnerabilities in 1.0.1 and 1.0.2 of OpenSSL. See the National Vulnerability Database Summary and the OpenSSL Security Advisory.

We wanted to update the community on the vulnerability (or, happily, mostly lack thereof) of various Sencha web services due to Heartbleed. After reviewing our web services and products, we have determined that they have not been vulnerable to Heartbleed, with one specific exception that only affects users of Sencha Space on a device running Android 4.1.1.

The Space Android 4.1.1 client in question inherits a vulnerability from the Android 4.1.1 system library, which is known to be vulnerable to Heartbleed. Even though Google has distributed patches to its mobile partners, it’s likely that it will take quite a while for all Android 4.1.1 devices to be patched &quotin the wild.&quot

A successful exploitation of this Android vulnerability requires the user to also navigate to a malicious server &#8212 a task which is possible but difficult with Space’s managed application lists. Even so, we still recommend that Space administrators manually block Android 4.1.1 clients from using Space until users patch their mobile devices.

More information regarding Heartbleed and Android 4.1.1 is available here.

If you have any questions, please contact us via our General Discussion forum.

20140428-heartbleed.png No Comments   Read more

Are You Ready for Ext JS 5?

Ext JS 5 New Features

Ext JS 5: Getting Ready To Upgrade


We are very excited to welcome Ext JS 5 to the Sencha family! As with every major release,
Ext JS 5 will introduce a bunch of new features, including:

  • Tablet support
  • Two-way data binding
  • New MVVM Application Architecture
  • Widgets and the Widget Column
  • Crisp Theme
  • Routing
  • and much more!

Please read our What’s New in Ext JS 5 guide for a complete list of our exciting new features.

Want to learn more about Ext JS 5 and ask questions about upgrading? Register now for our one-hour webinar on 4/24/14 at 10am PDT — Are You Ready for Ext JS 5.

Update: May 14, 2014
The recording for the webinar is up! Check it out below.


Testing 1, 2, 3


While there are lots of new features in Ext JS 5, many of these changes are under-the-hood. With the release of Ext JS 5 beta, we want to help you prepare your application for the upcoming GA by highlighting the following areas.

Our Ext JS 5 upgrade checklist will use the following rating system to indicate how difficult the upgrade process will be for each change:
Ext JS 5 Difficulty Scale

Ext JS 5 Difficulty Scale EasyRemoving Legacy Browsers

Ext JS 5 has removed support for IE6, IE7 and older versions of other browsers — which allows for a significant reduction in logic and styling across the entire framework. Coupled with additional optimizations, Ext JS 5 is an amazing step forward for enterprise web applications!

Removing Legacy Browsers

Ext JS 5 now supports the following browsers:

  • IE8+ (standards mode only)
  • Firefox 12+ (PC & Mac)
  • Safari 6+
  • Chrome 18+
  • Opera 12+ (PC & Mac)

Most developers know which browsers they need to support, so we anticipate this part of the upgrade will be easy.

Ext JS 5 Difficulty Scale EasyDoctype

Another important change in Ext JS 5 is that we now recommend the use of the HTML5 doctype:

<!DOCTYPE html>

Omitting this doctype or using something different could result in strange behavior, such as incorrect display, positioning issues, etc. The HTML5 doctype is supported by IE8 and is the new standard doctype with backwards compatibility for HTML4, so it really makes the most sense for Ext JS 5.

We imagine this part of the upgrade should also be relatively straightforward. If your application has a lot of CSS geared specifically for IE6-7, then changing the doctype might be a bit more cumbersome.

Ext JS 5 Difficulty Scale EasySencha Cmd

With the release of Ext JS 5, it is highly recommended that you use the latest version of Sencha Cmd to generate your application architecture and manage production builds.

The Ext JS 5 framework is now an encapsulated Cmd package — which means that "core" pieces of the framework are now fully modular and even shared by Sencha Touch.

Opening up the Ext JS 5 SDK, you’ll see the following folder structure:
SDK Folder Structure

As you can infer from the package names, packages named with the "ext-" prefix are specific to the Ext JS framework (e.g. "ext-theme-neptune") while those named with the "sencha-" prefix are shared resources across frameworks (e.g. "sencha-core").

It will help to familiarize yourself with the location of these new packages, even though much of the underlying code has not changed.

Ext JS 5 Difficulty Scale EasyAlready Use Sencha Cmd?

If your existing application runs Ext JS 4.2.x and was built using Cmd 4.x, then updating your app via sencha app upgrade should be relatively smooth.
Ext JS applications already built with Sencha Cmd should experience minimal impact when upgrading to Cmd 5.x. See the Sencha Cmd 5 Upgrade Guide for more details.

Ext JS 5 Difficulty Scale MediumNot Using Sencha Cmd?

If your application was not built with Sencha Cmd, you might decide to simply generate a fresh application using sencha generate app and manually copy your /app/ folder into the new architecture in order to take advantage of the many benefits in Cmd. Alternatively, if your application is already using the recommended folder structure, you can just generate the Cmd scaffold on top of the app with "sencha generate app –starter=false".

Customers new to Cmd should certainly expect a small learning curve. See the Ext JS 5: Getting Started Guide for more info.

For those customers who wish to remain independent of Sencha Cmd, you can find more information about the build files (e.g. ext-all.js or ext-all-debug.js) in the Ext JS 5 Upgrade Guide.

Ext JS 5 Difficulty Scale EasyCompatibility Layer

One additional benefit of using Sencha Cmd is the ability to easily control the new compatibility layer, which will help to make the 4.x to 5.x upgrade (as well as future upgrades) as smooth as possible.

Ext JS 5 introduces some new mechanics in how parts of the API get marked as deprecated. To compensate for applications upgrading from a previous version, you simply set your supported framework version in app.json and warnings about deprecated APIs will be output to the browser console.

For example, the class Ext.form.field.Trigger is deprecated in 5.x and using it will throw an error. But if you set the compatibility layer to 4.2, the old behavior will be restored and you will see a warning issued to the browser console. In this manner you can smoothly upgrade each warning rather than experiencing broken APIs.

To configure your application with Ext JS 4.2 level compatibility, simply set the following property in your application’s app.json:

compatibility: {
                ext: '4.2'
            }

Because the compatibility level is an optional development feature, there should be no negative impact to the upgrade process. In fact, using the compatibility level should make the upgrade process easier overall. See the Ext JS 5 Upgrade Guide for more details.

Ext JS 5 Difficulty Scale MediumConfig System

Sencha Touch developers should be intimately familiar with the config syntax for defining classes. Ext JS 5 adopts this paradigm in a slightly modified fashion — more information can be found in What’s New in Ext JS 5.

This change will likely affect any custom components which call initConfig() themselves — so be sure to check your UX classes.

You still need to use "config: {}" to declare new config properties, but derived classes can now set these directly on their class body. This approach allows derived classes to remain compatible with their base even if the base class switches a config over to use the config system.

Classes written for Ext JS 4, where the config system was not used, remain compatible with Ext JS 5 even where the config system is now being used.
The config system will create some work during the upgrade process for developers unfamiliar with the concept. Generally speaking, the framework will issue warnings to the browser console when properties should be moved into a config object, but expect this part of the migration to take some time.

Ext JS 5 Difficulty Scale MediumCharts

With Sencha Touch 2.1, we introduced a new, high performance, touch-optimized charts package. With Ext JS 5, we have enhanced this charts package to work on both Ext JS and Sencha Touch. This brings lots of new capabilities as well as great performance on tablet devices.

The Ext JS 4 charts have been converted into a separate package, so you can still use them when upgrading to Ext JS 5 to minimize your conversion effort. The process of updating to the new charts package simply requires switching out the ext-charts package for the new sencha-charts package. Most of the APIs are the same, and the few that are not are covered in the Ext JS Charts Upgrade Guide.

Our current Ext JS charts will remain in the framework at least until Ext JS 5.1. However, they will not gain any of the new features or functionality included with Sencha Charts.

Many customers have customized the charting package for their applications, so upgrading to Ext JS 5 might cause some friction. While the new charting package is very similar to the old one, expect to find some API differences – refer to the Ext JS Charts Upgrade Guide for more details.

Please note: the new Sencha Charts package in Ext JS 5 beta does not support chart rendering in IE8 because it lacks a VML renderer. We hope to add support for that before the Ext JS 5 GA release.

Ext JS 5 Difficulty Scale EasyMVC and MVVM

Ext JS 4 introduced support for the MVC architectural pattern. With Ext JS 5, we are adding support for a popular alternative to MVC: MVVM (Model-View-ViewModel). One of the big attractions to MVVM is data binding, which connects the model layer to the view — updating the model when the view is modified, and vice versa.

In Ext JS 4, controllers provided a global solution for application-wide logic. Ext JS 5 now offers view-specific controllers that can be associated directly with a view instance. From instantiation to destruction, the ViewController is tied to the component that referenced it.

While global controllers created with the Ext JS 4 MVC architecture operate as usual, creating ViewControllers might be a better fit in some cases. Regardless, the immediate upgrade process should be smooth. For more information about the new MVVM pattern in Ext JS 5, please refer to the View Models and Data Binding Guide.

API Changes in Ext JS 5


We focused a lot of additional energy in making sure the transition from Ext JS 4 to 5 would be as painless as possible. Having said that, some changes should be pointed out to make sure that you are completely aware of the new landscape.

Ext JS 5 Difficulty Scale EasyMicroloader and app.json

Ext JS 5 applications built with Sencha Cmd will now use the Microloader and app.json file, making Ext JS 5 apps very similar to Sencha Touch applications. All extra inclusions should be made via the app.json file. This includes JS and CSS resources which historically were included in index.html.

Users unfamiliar with Sencha Cmd or Touch may experience a slight learning curve, but the Sencha Cmd 5 Upgrade Guide should answer all of your questions.

Ext JS 5 Difficulty Scale EasyExt.dom.Query

Since all supported browsers now have querySelector(), Ext JS 5 has removed Ext.dom.Query as a default requirement. This means that if you still need to use Ext.dom.Query, you’ll need to include it manually. It is also now recommended that you use only Ext.Element methods, (e.g. select(), selectNode() and query()) rather than relying on Ext.dom.Query directly.

The upgrade process for most customers might be as simple as requiring Ext.dom.Query at application start. If you spend the time to replace all uses of Ext.dom.Query with querySelector, then it may take some additional time.

Ext JS 5 Difficulty Scale HardStores & Models

Stores required a few changes in Ext JS 5 that may cause issues for some updated applications. Most notably the remove event now mirrors the add event and only fires once for a range of records instead of once per record. Long-standing issues with the add and datachanged events have also been resolved, which may cause some issues if these behaviors were being relied upon. Finally, buffered store is now its own class of store and should be created using the "type" config (though "buffered: true" still works in most cases).

Models have also experienced an overhaul in Ext JS 5. Several properties on the record object have changed — most notably that record.raw no longer exists, as all data (even undeclared fields) are now available on record.data. Associations have received a lot of attention, and record.destroy() has been changed to record.erase().

Most Ext JS applications rely heavily on data access, so this is likely the place where most customers will experience friction. Please refer to the Ext JS 5 Upgrade Guide for a deeper look at the changes to the Store and Model classes.

Recommended Steps


While a more complete Upgrade Guide is available to help you navigate the full application upgrade, here are some quick recommendations for preparing your application for Ext JS 5.

Upgrade from the latest versions

We recognize that not all of our customers have the luxury of running the latest versions of Ext JS and Sencha Cmd. Time restrictions, deadlines, and support licenses often dictate what version of Ext JS is used by your organization or clients.

Taking the time to first upgrade to the latest versions of Ext JS 4.x and Cmd 4.x will make the jump into our 5.x branch much smoother because you get the advantage of many bug fixes and avoid significant API changes across several major product versions.

Check Overrides and UX

Framework overrides and custom components are usually the places where upgrade bugs are found.

The key is to document every one of these overrides and UX classes, and be sure you completely understand them.

Dissect your application logic

When you get this far in the upgrade process, it is more than likely your application loads successfully in the browser.

Inevitably the trickiest part of a major upgrade is physically testing the app during runtime. Expect most of your time during the upgrade to be spent dissecting your application logic contained inside your Controllers and event handlers.

Suggested Reading


For more information about Ext JS 5, you may want to check out a few of our guides:

20140410-ext-js-5-teaser.png 38 Comments   Read more

Introducing Sencha.com/videos

Sencha Video Chanel

Over the years we’ve been producing videos on building better HTML5 apps, JavaScript tips, and thought-provoking conversations from around the world. Most of these videos have been available on our Vimeo channel, but now we’ve created a channel on our own site to make them easier to find.

Check it out at www.sencha.com/videos.

Here are some of our favorites…

20140213-sencha-video-preview.jpg 1 Comment   Read more

Sencha @ Developer Week With Architect Bootcamp

We will be at the Developer Week conference next week in San Francisco where we will be running a boot camp on Wednesday, February 19th from 9:00am–10:40am. At the boot camp you’ll use Sencha Architect to quickly build a Touch Asset Tracking application. You can still sign up for the bootcamp, so add Sencha to your agenda today.

Here’s a roundup of our recent blog posts about Architect to bring you up to speed:

Architect is a great value as part of Sencha Complete or Touch Bundles, which you can try free for 30 days or buy today.

We are looking forward to seeing you there!

20140214-developer-week.png 1 Comment   Read more

Half a Million Forum Members!

Today we’re excited to announce that we’ve reached a fantasic milestone: 500,000 registered forum members! Congratulations to Tim Guthrie for becoming the 500,000th member of the community. In the last five years, the Sencha community has grown by 10x. We can’t thank you enough for all the participation, assistance and feedback that’s helped us to create and improve our projects and products.

The Community Today

Today, we’re one of the leading communities of professional developers creating serious applications for business. We’re a global community: 30% in North America, 30% Europe, 15% in India and 25% distributed across almost every other country in the world. Three fifths of the community are full time professional developers, and another 15% are full-time professional designer/developers. 15% of you manage software development teams. One third of you work for development agencies and systems integrators. Two-thirds of you work for companies.

It always blows my mind to see the richness and inventiveness of the applications you’re creating for all kinds of end users. About one third of you are creating B2B applications for companies, but that’s followed closely by B2B and B2E applications (about a quarter each). The remainder — about 20% — are ISVs creating SaaS or packaged applications using Sencha.

Participating in the Community

The Sencha Forum is the main place we talk about Sencha technologies, give each other help and provide feedback on where you want our projects and products to go. We’re now closing in on a million posts. Over the last few years, based on your requests, we’ve added new features like search, voting and top threads. We’ve also (mostly :)) successfully fought spam and spammers. Our spam filter has blocked almost a million spammers from registering for the Sencha forum. While the anti-spam features occasionally trip folks up, we think we’ve made reasonable tradeoffs balancing access and convenience vs. spam protection.

Of course, the forum is not our only venue for participation. Senchadevs.com, our community developer registry, is the number 1 ranked SEO page for “find a sencha developer,” and it has over 1,600 firms and individuals listed. Sencha Market, for extensions and community contributed code, has almost 200 listed extensions. Until recently, Market was a little difficult to find, but we’ve improved accessibility with the recent site redesign. Keep those contributions coming!

A Final Thank You

Thank you for being a part of the biggest professional JavaScript application development community on the planet. What we do here every day at Sencha is dedicated to making it easier and easier for you to create more and more powerful business applications with web technologies. With your help and contribution, we plan to continue to work toward this mission. We’re grateful that you’ve chosen to take the journey with us.

20140122-500k.png 5 Comments   Read more

Join Us for ModUX in Amsterdam Sept. 18-20

ModUX Conference

We’re very excited to announce that Sencha is a platinum sponsor for the ModUX conference September 18–20 in Amsterdam, Netherlands. ModUX is a three-day developers conference dedicated to bringing together thought leaders in the desktop and mobile web industry. Get the latest and the greatest about Sencha frameworks and tools, listen to what experts have to say about the future of desktop and mobile web, and hang out with some awesome developers from companies around the world.

Community-driven Event

ModUX 2013 — organized by Modus Create — includes 18 sessions over two days on topics ranging from advanced Sencha and JavaScript techniques, unit testing, responsive design, and agile best practices. Check out this impressive list of speakers. There’s also a full-day Sencha Touch on BlackBerry 10 Bootcamp, and — of course — an awesome after party.

Learn All About Sencha Space

Join our Sr. Developer Evangelist, Greg Rewis, to learn how to develop apps for Sencha Space, including how to implement the Invoke API to connect web applications with one another. You’ll experience how easily applications can be centrally managed without the need to access the device. You don’t want to miss this session.

Buy Your Ticket Now and Save 30%!

ModUX is a great opportunity for networking with your colleagues and learning from industry leaders. And, as a Sencha community member, you’ll save 30% off the full conference rate of €115 by using the coupon code sencha. So get your ticket now! We look forward to seeing you in Amsterdam.

20130828-modux.jpg 3 Comments   Read more

Faster, Better Search for Sencha Forums

This year we wanted to make big improvements in the Sencha Forums. We started by adding post voting, JIRA integration and trends. Next up, we set out to make search better. Here’s what we’ve done to make search more useful for the community.

Background

The Sencha forum is built on vBulletin, which has a built-in search function. I’ve found vBulletin’s built-in search to be pretty accurate for most cases and it offers many advanced search options. The built-in search also allows us to render results using Sencha templates—which is nice. The issue with this search is that it’s not optimized for large communities, and as the community grew, we had to replace the native search with Google search for performance reasons.

However, this had its own disadvantages: Google search was very fast but you couldn’t search particular forums; accuracy wasn’t as good as native search; and, the results were not rendered within our template. In other words, we fixed the server load issue but dropped features.

Neither solution worked for our community which led us to build our own search solution for the Sencha Forums. Our goals were for the solution to be fast, flexible and easy on the servers without sacrificing accuracy. Our very top priority was to have both accuracy AND performance.

Technology

The core of the new search service is powered by Apache Solr, an open source enterprise search platform from the Apache Lucene project. At the heart of Apache Solr is Lucene Core, an advanced search engine library implemented in Java and designed to be highly accurate, very fast at indexing and searching documents at large scale. Apache Solr extends Lucene Core to provide an easy to use RESTful API, additional data types, advanced text analysis, query parser extensions, full and delta import capabilities, and much more.

Apache Solr was a perfect fit for this project for the high performance search capabilities it is well-known for. Beyond high performance, we needed our search solution to return results scored according to relevancy rules we could control and change over time as needed. We also wanted to provide a search query interface that could be easy to use by anyone yet powerful and flexible for the power-user. Solr gave us the control and flexibility we needed for our specific search requirements.

Smart Queries

Our new search is very flexible. You can use queries that are simple and basic, to queries that are as advanced as you want. The new search interface allows you to search with advanced options (conditions) without opening an “advanced options” form. We’re calling this ‘smart queries’. But, you can use the “Options” dialog to add or remove conditions.

Here is an example of a smart query:

grid -title:(cell row) +author:mitchell* from:2011-01-01 to:2012-01-01 #ext4 #st2

Before we analyze this search request—a little background on syntax. Currently there are 4 fields that you can search on: title, author, from and to. For each field, you can include or exclude matches from the result values. To exclude matches for that field, just add a minus ‘-‘ sign before the field. To include matches, add a plus ‘+’ sign before the field (which is the default behavior). In the above example we’re searching on “grid” but excluding matches that have a title with ‘(cell row)’, and including matches that are written by ‘mitchell*’. The ability to include and exclude based on fields gives you flexibility and accuracy. You can also specify multiple matches for each field.

The value you pass to a field is very flexible and can be specified in multiple formats. You can specify a simple term like ‘grid’ or you can use parentheses as in our example above. Within the parentheses, you can use AND and OR explicitly. The implicit behavior within parentheses is to treat multiple terms as connected with ANDs. In other words, ‘(cell row)’ is the same as ‘(cell AND row)’. In the case of our example above, we exclude results that have ‘cell’ AND ‘row’ in the title. You can also use an asterisk as a wildcard anywhere in the value. In our example, ‘mitchell*’ will return any author with a username that begins with ‘mitchell’. You can also use the wildcard in a term within parentheses like ‘(*cell row*)’. The wildcard will match any result that ends with ‘cell’ and starts with ‘row’.

You also can search in any given date range within the “from” and “to” fields. Two things to note is that first you can only search a single date range. And second, unlike title and author fields, the “from” and “to” fields require a specific date format. The required format is YYYY-MM-DD, which is why the example was formatted as ‘2011-01-01′ and ‘2012-01-01′.

In some cases, you may want to specify what forums to search. You can do this by adding hashtags to your query. In our example above, we wanted only the Ext JS 4 and Sencha Touch 2 forums so we used ‘#ext4′ and ‘#st2′. We have pre-specified which forums fall under which hashtag. #ext4 has all the Ext JS 4 forums, and #st2 includes all the Sencha Touch 2 forums. Premium forum content is also included. If there are multiple versions of a product (Ext JS has 4 versions), we also have a more general hashtag to include all versions. For example, ‘#ext’ includes all forums related to Ext JS. Here are the available hashtags today:

  • #general
  • #premium
  • #ext
  • #ext4
  • #ext3
  • #ext2
  • #ext1
  • #st
  • #st2
  • #st1
  • #gxt
  • #gxt3
  • #gwt2
  • #gwt1
  • #architect
  • #architect2
  • #designer1
  • #market
  • #io
  • #animator
  • #international

User Interface

Because the underlying search service is very fast we wanted the user interface to be equally fast, simple and flexible. The main search input is on the forum index page where the Google Search box once lived. To search, just enter a query and hit enter or click the search icon.

By default, results are shown in a popup modal dialog but you can see them in page-view by clicking the “Open” link at the top-right of the dialog. If you specified any matching conditions or forum hashtags, you will see them listed between the search box and the results panel in page-view. Each result highlights matched text in green and shows which forum the post is from. You can go directly to the source post by clicking on the result.

You can also add matching rules to your result set by clicking on “Options”. The Options interface is a wizard that allows you to add matching rules via a GUI (if you don’t want to type your own smart query). The Options dialog has three tabs: Conditions, Forums and Settings. The Conditions Tab allows you to add new matching rules. The Forums tab allows you to pick individual forums to include and is more granular than the hashtags we support in the search command line.

The Settings tab allows you to configure your default search settings.

  • Persist forum selection—When checked, the forums you select in the Forums tab will be used in all searches.
  • Grow field on focus—If checked, the search input box’s width will grow when you focus on it. If unchecked or if you are using Internet Explorer, the field will have the full width.
  • Reset paging on new search—If checked, each new search will reset to the first page.
  • View results as—This is where you can choose whether page view or popup view is the default display mode for search results
  • Refresh page on success—If checked, when you click the “Save” button, the browser will reset to the original search page.

We hope the new Sencha Forum search is useful. We built this so you can easily and quickly find information that you need to build great applications. Since this service is for the community, if you have any suggestions or bugs, please post this on the forums and we will do our very best to address it.

20120920-blog-forum.png 9 Comments   Read more

SourceDevCon Returns, Join Us in London May 2-5

London Bridge

SourceDevCon will take place in London, England this May 2-5, 2012.

SourceDevCon 2012 We’re very excited to announce that Sencha is a Platinum sponsor at this year’s, SourceDevCon May 2-5 2012 in London, UK and Sencha’s CEO Michael Mullany will present the keynote. Building on the success of last year’s SourceDevCon in Split, Croatia, this year’s conference is a four-day program of intermediate to advanced-level sessions and brings speakers from around the globe to present on topics of interest to web developers. Topics include client and server side JavaScript, modern HTML5 and CSS techniques, unit testing, mobile application packaging, web games development, and more.

Get your tickets now and save 25%

As a Sencha community member, you’ll save 25% off the full conference rate of £799 by using the coupon code sencha, that’s a savings of more than £200 ($300). Conference attendees can also take advantage of special lodging rates at the venue, so get your tickets now!

Sencha Focused Topics

Just like last year, this year’s SourceDevCon has Sencha-focused tracks and sessions. There are over 17 sessions on topics devoted to Sencha Touch 2, Ext JS 4.1, Sencha.io, and Sencha Designer. And, the content will be delivered by Sencha’s core dev team and some of the most prominent Sencha community members, such as Brian Moeskau, Jay Garcia, Mats Bryntse, Shea Frederick, Rich Waters, Nick Cooley, Nils Dehl, and Frederic Berling.

Community-driven Event

SourceDevCon 2012 has an intensive schedule of 37 presentation-style sessions spanning across three tracks mark the central two days of the conference. There’s a stellar lineup of speakers from the JavaScript, web development, and design communities, including Douglas Crockford, Remy Sharp, Joe McCann, Paul Kinlan, Seb Lee-Delisle, and Anis Kadri. Highlights of their industry-related presentations include sessions on reaching excellence with JavaScript, Node.JS, MongoDb, PhoneGap, and CanvasJS.

Training Available

Prior to the event, Sencha partner Modus Creates will be conducting a two-day Sencha Touch 2 and Ext JS 4 training session. Register now to get up and running quickly with this pre-event bootcamp.

Join us. Get your tickets now.

SourceDevCon is a great opportunity for networking with your colleagues and learning from industry leaders. Reserve your spot now and save 25% off the full conference rate of £799 by using the coupon code sencha. We look forward to seeing you!

london-bridge-thumb.jpg 8 Comments   Read more

Sencha Learn Roundup

We’re constantly updating the Sencha Learn section with new content, here is some great content you might have missed:

h3. New Tutorials for Ext JS 4 and Sencha Touch 2

thumbnail for Upgrading to Sencha Touch 2 PR2 Tutorial on Sencha Learn

With the preview of Sencha Touch 2 available, it is a great time to explore the APIs and prepare to upgrade your existing applications. In this article from our newsletter, “Upgrading to Sencha Touch 2 PR2″:https://www.sencha.com/learn/upgrading-to-sencha-touch-2-pr2, we take a simple existing example app–the Touch 1 CityBars guide–and explore what is required to make it compatible with the Touch 2 PR2 release.

The Sencha Class System

Following up from his highest-rated SenchaCon talk, Jacky Nguyen prepared a great tutorial on “the Sencha Class System”:https://www.sencha.com/learn/sencha-class-system within Ext JS 4 and Sencha Touch 2. Both frameworks use the classes to manage dependencies, improve reuse, and provide rich features commonly found in class-based languages. Developers writing code using Ext JS 4 and Touch 2 can inherit from internal classes in the frameworks and make their own code object-oriented.

thumbnail for Sencha Touch 2 Class System Screencast on Sencha Learn

Community member Jay Garcia has posted his own take on the Sencha Touch 2 Class System, which you can find as an 11 minute screencast in this “contributed piece to Sencha Learn”:https://www.sencha.com/learn/sencha-touch-2-class-system.

Ext JS 4 tutorial by Tommy Maintz

Tommy Maintz continues his Ext JS 4 MVC series of articles. In the previous two articles, he explored architecting a Pandora-style application using the new features of Ext JS 4. In the third installment, he implements controller logic inside of the application’s MVC architecture. Catch up with Part 1 and Part 2 if you haven’t already. Or go straight to Part 3 of “Architecting Your App in Ext JS 4″:https://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3.

h3. New Tutorials for Ext GWT 3 Beta

thumbnail for Running Ext GWT 2 and 3 Together Guide on Sencha Learn

Ext GWT 3 Beta is now available! To allow a smooth transition from Ext GWT 2 to 3, Ext GWT lets you include both v2 and v3 components in the same application. Ext GWT Team Lead Darrell Meyer explains how to “run Ext GWT 2 and 3 together”:https://www.sencha.com/learn/running-ext-gwt-2-and-3-together in the same app.

Ext GWT 3 Declarative Markup with UiBinder

Our newest Ext GWT team member Justin Hickman wrote an interesting article on Ext GWT 3 Declarative Markup with UiBinder. UiBinder support has been one of the major driving factors for many of the API changes in Ext GWT 3.0.

h3. Catch up with Ext Designer & Sencha Animator

thumbnail for Build a Car Store with Ext Designer 1.2 and Ext JS 4 Tutorial on Sencha Learn

Check out this tutorial for building a Car Store with Ext Designer 1.2 and Ext JS 4. This article takes the previous “car store” sample project, upgrades it to Ext JS 4, while adding new JavaScript charts.

thumbnail for Animator Guided Tour Guide on Sencha Learn

If you haven’t seen the new Sencha Animator (which recently hit 1.0, and is on special for Flash developers), get familiar with our Quick Start and Guided Tour. Our guided tour provides a brief introduction to Animator functionality and suggests exercises to help you learn your way around the tool.

If any of these articles are a surprise to you, sign up for our newsletter to get them earlier. Get started now, and happy learning!

learning-center-material.png 6 Comments   Read more

Introducing Siesta: A Testing Tool for Ext JS

Siesta logo In a previous guest post I described how we upgraded Ext Scheduler to Ext JS 4. As I mentioned then, one key factor that greatly simplified our upgrade was unit testing. While it may sound like an obvious thing to do, unit testing a UI generated by JavaScript is not as trivial as unit testing your server code.

For us, about midway through our upgrade, we realized that we badly needed a tool to help us verify that what used to work in the Ext JS 3 version still worked in the Ext JS 4 version. Doing the testing manually for each feature and API method would simply have taken way too much of our time. After evaluating a few popular options, we realized that none really fit our needs, so we started to design and write our own tool: Siesta. Siesta can help you test plain JavaScript or code built with popular JS frameworks such as Ext JS or NodeJS.

But before we get into the details of Siesta, let’s take a step back and give some more background.

Why testing JavaScript UIs is hard

Testing Ext JS, or any other JavaScript centric UI framework, is hard because the available tools are not really suited for the task. When it comes to DOM and user interaction testing, most popular web UI testing tools don’t offer enough help unless your application uses simple static HTML pages. Using Ext JS, the HTML markup is usually generated by JavaScript code, meaning that you cannot safely rely on pixel coordinates, element IDs or XPath/CSS selectors. Brittle tests become very time consuming, if you have to update them every time that you make a slight change to your UI. A tool to test Ext JS must know about Ext JS and make use of its power. This is where Siesta is different from the rest, because its top priority is Ext JS testing.

What we wanted from a test tool

There are a few underlying reasons why we decided to write our own tool. Here are the main features we needed in a good Ext JS test tool:

  • Write tests in JavaScript — we don’t want to have to learn a new language to write tests.
  • Automatable — we should not have to open a browser to run our tests
  • Extensible — we should be able to easily add our own assertion methods and abstractions.
  • Optimized for Ext JS — it should offer high level abstractions to assist with Ext JS testing.
  • Simple and user friendly UI — low learning curve, should be very easy to get started

Together, we believe these features provide a very powerful testing tool. Let’s take a peek at the Siesta UI. Below you can see the two main panels of Siesta: The left hand side holds the test suite tree, and the right panel shows the test assertion list for one of the recently executed tests.

Siesta user interface

The Siesta UI. Click to view larger.

How to write a simple Siesta test.

Let’s look at how to write a simple Hello World test. It would look something like this:

StartTest(function(test) {
    var myTextField = Ext.create("Ext.form.TextField", {
            renderTo : Ext.getBody()
    });
 
    test.click(myTextField);
 
    test.type(myTextField, 'Hello world', function() {
            test.is(myTextField.getValue(), 'Hello world', 'We did it!');
    });
});

A test starts in its StartTest method, which is similar to how you use Ext.onReady in your application. A text field is created and then typed into using the type() method. This method operates asynchronously and in the provided callback function we simply assert that the text field value is what we expect it to be — “Hello world”. When running this and enabling the “View DOM” mode, this is what you see:

Siesta output after running a simple test

Siesta output after running a simple test

Since Siesta can be automated easily using tools like Selenium or the excellent Phantom JS, you could just as well run the test above on the command line. You would then see the following output:

Siesta Command Line

Siesta Command Line

Even complex tests are made trivial by Siesta, for example testing moving, resizing and closing an Ext.Window:

StartTest(function(t) {
    var win = new Ext.Window({
            height : 200,
            width : 200,
            // Set window position to known state
            x     : 0,
            y     : 0
    });</p>
 
    win.show();
 
    t.ok(win.rendered, 'The window is rendered');
 
    t.hasPosition(win, 0, 0, 'Correct initial position');
    t.hasSize(win, 200, 200, 'Correct initial size');
 
    // Use component query to drag the header 20 px right/down
    t.drag(win.down('header'), null, [20, 20], function() {
            t.hasPosition(win, 20, 20, 'Window could be moved to new position');
 
            // Use regular CSS selector to drag the east resize handle 20 px to the right
            t.drag(win.getEl().down('.x-resizable-handle-east'), null, [20, 0], function() {
                    t.hasSize(win, 220, 200, 'Size increased');
 
                    t.click(win.down('tool[type=close]'));
 
                    t.notOk(win.el.dom, 'The dom element of the window is gone');
            });
    });
});

What unit testing can do for your codebase

Testing your code brings lots of advantages, perhaps the biggest one is that it increases your confidence in your codebase. How do you know your code actually works? How do you know if a small change in the core of your application is safe or if it breaks some feature? The only way is to actually manually verify each and every feature of your system—but that’s not realistic unless you have a test suite.

There are other advantages that are definitely worth thinking about:

  • You will save lots of time if you can automate your cross-browser testing prior to pushing out a new release of your application. Doing this will move the quality of your releases to a whole new level.
  • If you use a write-tests-first approach, you are forced to think about your spec and requirements one extra time, before even writing a single line of code.
  • Unit tests help you find tightly coupled code. If you cannot test component A, without also creating a component B and C, then you should probably refactor your code.
  • Siesta can automatically detect global variable leaks for you by analyzing the window at the end of a test.

Another advantage, especially for custom components, is that unit tests provide real usage examples for your APIs, which is like extra documentation built into your project.

When refactoring your code or when upgrading the underlying Ext JS version of your application, it is a huge plus to have a test tool to help you verify the state of your application. Or as someone wrote on Twitter recently: “Without unit tests you’re not refactoring. You’re just changing sh—”.

That is why, for big systems without a test suite, programmers are often afraid of refactoring, and instead only make minor cosmetic changes on the surface, patching here and there. As a result, such systems accumulate a lot of cruft, making further development much more costly.

Summing it up…

I hope this post has given you an idea of what Siesta is and how you can benefit from using it. We still have many features to implement. In the next couple of months we’ll be adding support for Sencha Touch testing, code coverage, performance benchmarking, and lots more. I’d like to invite everyone to join our forums and try Siesta. We are constantly looking for new ideas and ways to improve it, so please let your voice be heard in our community forums.

siesta-thumb.jpg 21 Comments   Read more