Ext JS and Sencha Touch Customer Spotlight – pixx.io

pixx.io is a modern and easy-to-use media management application targeting the needs of semi-professional and professional photographers, creative agencies, startups and SMEs. The software is built with Ext JS 5 and Sencha Touch 2.4. In addition, we used PHP and Perl in combination with MySQL database.
pixx.io enables users to collect, manage and share all kinds of media. A state of the art user interface, intuitive search fields, and various filters (GPS, date, author, orientation, etc.) allow users to find the needed files quickly and easily. pixx.io also makes it possible to share files safely with colleagues and customers. Users can decide in which size and for which time period they want to make data available. They also can integrate freely selectable watermarks on their images.

The Media View

Why We Chose Ext JS

We chose Ext JS because we wanted to make the pixx.io interface attractive and customer friendly — meaning our designers could change all styles and arrange all desktop elements exactly as they wanted. It was also important that the front-end framework not restrict us from building back-end processes that worked smoothly and quickly to ensure the best performance for our customers. The third goal was to ensure we delivered the application to market on time.

We had been working with Ext JS for more than five years and had excellent results using it in various software development projects, so we decided it was the best framework for building pixx.io. The major reasons why we had used Ext JS for such a long time are:

• Ext JS components are perfect for the kind of software we build. We rarely have a case where Ext JS components don’t meet our needs.
• Ext JS makes it easy for us to theme and extend components, when needed.
• Ext JS offers the cross browser compatibility our customers expect.
• The individual support and training provided by Sencha is excellent.
• The Sencha community and the available user extensions inspire our own creativity.
• The perfect interaction of Ext JS and Sencha Touch makes our job easier and offers a broad range of new possibilities for our application.

We used the following Ext JS components to build pixx.io.

DataViews

We created all major pages of pixx.io with dataviews. Depending on what needed to be depicted, we used various templates to adjust the look of the respective pages. It’s very simple to change the look of the dataviews, because there are an unlimited number of templates, which allows a nearly effortless creation of new designs. We also used several stores with the same model for our application. This means each view can also be filled with different content. We use this option mainly in the Media view (see above) and the Collections view (see below).

In addition, we use Buttons and Panels that are blended into the templates to provide the right functionality on each page.

The Collections View

The same dataview is used when selecting multiple files to edit, download, relocate or group. The only thing that differs here is the styling of the dataview. Further, the dataview is combined with buttons, tab panels, forms and grouping grids.

We use the DataView.DragSelector to improve the usability and enhance the possibilities of the dataview.

The built-in drag and drop functionality allowed us to integrate features that users expect, based on their experience using standard desktop applications. For example, that functionality enables users to select multiple dataview items (in pixx.io mainly thumbnails of photos and files) with a mouseover event. It further allows an Explorer / Finder-like selection of multiple dataview items, by pressing the Shift or Ctrl key.

Windows

If a user clicks on one of the photos (item click), on any page, pixx.io opens a window to display the file in full size and provides more information about it. Various layouts are used — combined with buttons, tab panels, forms and grouping grids again. This combination provides a lot of possible user actions and provides a good overview of the relevant data at the same time.

Using the tab panel, a user can open the tag catalog, manually tag files, and delete or adjust tags that were automatically set by pixx.io — by reading the meta data and descriptions (EXIF, IPTC, etc). To implement this functionality, we used combo boxes and split buttons.

Features like the integrated combobox filter, and especially the combo boxes, improve the user experience, because they minimize the effort of manually tagging photos and files in the media database. Using Ext JS, we implemented a catalog of preset keywords, which can be easily updated by uploading csv files into pixx.io. Using this keyword catalog, the combobox displays various appropriate keywords when the user starts typing the first letters, and it refines these suggestions instantly when the user adds more letters.

All keywords selected or entered by the user are displayed as split buttons. Using split buttons makes it easy to work with the keywords, especially if the user wants to delete or change one of the keywords later. The development in this case was really effortless, because the buttontext is used to display the keywords, so we didn’t have to change the components.

Why We Chose Sencha Touch

During our first beta test, we recognized that more than 60% of the beta testers were trying to open shared image collections with mobile devices, including their smartphones and tablets. Back then, we did not have a mobile-optimized version of pixx.io released. Due to the good experience we already had with Sencha Touch, we extended and optimized our application user interface for mobile users.

The biggest benefit was the time savings. Using Sencha Touch, we were able to create the first version of the mobile application in just one day of development work. This was possible because the shared images are displayed in dataviews. The navigation in the mobile version of pixx.io was built by using well-known gestures like swipe, slide and pinch. Using these gestures, users can also switch to the single photo view and back. If we had started programming this app from scratch, not using the Sencha Touch framework, we would probably have needed several weeks to achieve similar results.

Our Advice to New Developers

What we love about Sencha is the continuous performance enhancements and the vision and expertise we see in the development of the various frameworks. The latest features are really easy to use. For more complicated use cases as well as a basic understanding of the products, Sencha provides in-depth training. We recommend that all developers who are just starting to use Ext JS attend one of the online or classroom courses, because they really boost your understanding of the broad range of possibilities in building apps with Sencha frameworks.

Another reason we really like using Sencha products is the good documentation, the forum and really vivid community that helps when you are stuck at some point of your development. They boost your creativity by solving complicated customer problems.

We also highly recommend Sencha Support. We contacted the support team when we had questions that were too specific for a Google search or the Ext JS community. Sencha provides really good and fast help to solve our questions and issues.

Final Thoughts

Ext JS facilitates team development and speeds up delivery of software projects by removing a lot of unnecessary, repetitive work for developers. At the same time, it offers unlimited possibilities to customize components to your needs.

In addition, you can really profit from the range of other products in the Sencha portfolio, including Sencha Touch. The various tools can be used easily in combination.

To enhance the features of pixx.io, we are currently developing a video and sound archive that will be integrated into our current app. Using Ext JS, we can focus on the design work, as the framework takes over all the tedious tasks of the programming process.

If you’d like to try pixx.io, you can get it either as an independent server solution or as a hardware and software bundle called pixx.io box. Pixx.io box is the all-in-one solution for photographers and small teams, including a stylish and high performance mini server and the pixx.io software.