Key Trends in Building Enterprise Applications with HTML5

Unless you’ve been living under a rock or on another planet, you have undoubtedly heard of HTML5 and how it has simply revolutionized web application development. Over the past four years, it seems like just about every tech conference had someone ranting about all the cutting-edge things you can do with web technology – but very often these presentations talk about the shiny new parts of HTML5 in the context of “Try this with a nightly build of Chrome” or “One day you might actually be able to use this in a real app.”

For those of us working on enterprise applications, the allure of these presentations may be exciting but they’re certainly not useful in our day-to-day development. The reality is that the enterprise cannot expect users to have a cutting-edge browser (usually they’re supporting legacy browsers), and more often than not, the coolest tech demos simply aren’t relevant or meaningful for business applications.

Trends for 2015 and Beyond

Please join us on Tuesday, March 3, 2015 as we cover:

  • the current state of HTML5 as it relates to enterprise application development
  • some emerging trends within the industry
  • a few key problems that enterprise applications currently face, and how Sencha tries to eliminate many of these issues

Why do enterprise companies care about HTML5?

Clearly HTML5 offers a great deal of technological improvement over Web 2.0 and promises a continued evolution of standards and features — but HTML5 also means something beyond just technology and code to the enterprise. Managers and executives have bought into the idea of HTML5 as a buzzword because it is essentially the Holy Grail for enterprise software development:

Applications with rich user experiences can be delivered to any device using the Web, and they’re all powered using the same standardized technology.

HTML5 enables the enterprise to develop applications consistently while also increasing the productivity of their developers.

This is a gigantic “win” for the enterprise, because they typically support many different applications across their organization – and these applications will likely remain in production for as long as five to ten years. That’s a significant amount of legacy code, and yet because HTML5 has reached W3C standardization, the enterprise is assured that their code will continue to work for many years into the future.

Strategy Analytics Developer Survey

Here’s an opportunity to shape the applications industry, win one of three tablets, and receive a report highlighting the survey findings that will give you the low down on industry trends. The survey will take 15 minutes to complete, and you’ll be entered for a chance to win one of 3 prizes: Apple iPad Air 2 32GB, Google Nexus 9, Amazon Fire HDX 8.9.


Take the survey now.

seminar-in-seoul.jpg No Comments   Read more

Forrester and Sencha Discuss Evolution of Web App Development and Management

Evolution of Web App Development and ManagementRecently, Sencha and Forrester held a joint webinar to discuss key trends and best practices in web application management and deployment. During this session, Forrester Principal Analyst for Application Development and Delivery Michael Facemire and I reflected on the evolution of application development practices and technology. In addition, we identified best practices that organizations can use to create cost-effective, successful, long-term application strategies.

Check out the webinar recording here.

In particular, we explored how web applications are expected to run on mobile devices, tablets, and on the desktop. Additionally, employees are becoming increasingly resistant to heavy-handed MDM approaches to management and security. Progressive IT teams are beginning to respond to these changing attitudes by refactoring application strategies to emphasize the management of web apps and end-to-end security of sensitive data.

Progressive IT teams are beginning to respond to these changing attitudes by refactoring application strategies to emphasize the management of web apps and end-to-end security of sensitive data.

They have realized that maintaining control over their apps and data over their entire lifecycle is more important than micro-managing employees’ personal devices. Many have also realized that for the increasingly common scenario in which third-party collaborators — partners, contractors, and consultants — require access to critical apps and data, MDM does not handle this use case effectively.

We outlined a few best practices, along with compelling supporting data. These recommendations include:

  1. Build your apps with web tech — Standardizing on HTML5 and JavaScript is the most cost-effective way to build apps that reach all devices you’re likely to find in the enterprise.
  2. Choose an application platform with integrated management and security — Don’t reinvent the wheel on management and security. Your time will be better spent using a solution that includes these capabilities out of the box.
  3. Ditch the siloed approach to apps — Organizations must deliver apps on desktops, tablets, and smart phones. Creating a false distinction between the desktop and mobile versions of your apps is inefficient and wastes your organization’s money.

We wrapped up the session with a lively round of Q&A. We weren’t able to address everyone’s questions in the allotted time, so I’ve answered the remaining questions below:

Q: How does sandboxing work for Sencha Space on the desktop? Is it just a webkit-based browser wrapped into the Sencha Desktop app?

A: We have ported the Space management and security features to the desktop and package them with a web runtime based on the latest version of Chromium. As with all of the other Space clients, Space for Desktop provisions individual sandboxed environments for each application, so local storage, cookies, etc. from one application are never commingled with those of another app.

Q: Does the consistent runtime environment approach across mobile devices include the device-specific UX/UI that users are expecting?

A: “Consistent runtime environment” in this context means running on a stable version and minimal distinct versions of a modern web runtime. We have built appropriate UX on top of that foundation which manages the tradeoffs between the cross-platform requirements of the solution and the idioms of a particular device type and platform.

Q: Regarding the encrypted local relational db and file system: What is the performance penalty for encryption? Do apps have access to the data at runtime from memory?

A: For bulk data transactions in either the file system or database, we have implemented optimized routines in portable C to maximize the performance; the solution performs very well in side-by-side comparisons. For individual row or file operations, the performance penalty is negligible.

During runtime, we decrypt and load needed files and records into volatile memory where the app can make use of them. As soon as the app is done, that memory is freed for use by other processes. If the Space client goes into the background, resident memory is cleared, so the security exposure during this time is minimal. An adversary would have to know your authentication credentials and device-specific PIN to unlock the device and access memory registers during this time.

Q: What would you recommend to streamline the workflow during the development life cycle?

A: Avoid point solutions. Many application technologies provide narrowly focused solutions that address a small problem in the workflow, but do not account for a holistic view of the application lifecycle. Consequently, they frequently create integration problems moving from one stage of the development/test/deployment/maintenance process to the next.

Come hear more from Michael Facemire at SenchaCon 2015, April 7-9, 2015. Register today for early bird pricing.

Learn more about Sencha Space and how you can easily and securely manage and deploy web apps.

analyzing-the-roi-of-javascript-in-enterprise-software-development-1.png No Comments   Read more

Best Practices for Building HTML5 Applications

JavaScript has enjoyed a long and storied history since its creation in 1995. As a prototype-based scripting language, JavaScript quickly became useful as a mechanism to implement dynamic logic and interactivity on web sites — and combined with the latest features of HTML5 and CSS3, JavaScript has evolved into a required technology for delivering powerful web applications.

But web development also has a frustrating past, and for many software developers JavaScript and CSS remain tricky to learn. Older Internet browsers delivered wide variations in the ECMAScript and CSS specifications which led to many problems creating applications compatible across browsers and devices. Rather than trying to implement this cross-browser code themselves, developers often turned to JavaScript libraries like Prototype (2005), jQuery (2006) and Ext JS (2007).

Over the years, Sencha has evolved with the needs of enterprise web applications, and our customers look to us for direction and leadership as these web technologies continue to advance.

Defining Best Practices

HTML5 has proven itself to be a reliable and powerful platform for building robust applications across a variety of devices. However, as web technology continues to evolve at a rapid pace, it can be difficult for developers to stay on top of the latest tools and techniques.

Our customers frequently ask our advice on the subject of “best practices” — and while we’ve covered many of these concepts in past webinars and at SenchaCon, we wanted to start 2015 by releasing a more robust collection of recommendations for building enterprise web applications with JavaScript and HTML5.

A lot of this advice is used internally at Sencha and certainly applies to building applications with Sencha frameworks — but this JavaScript style guide can also help teams building applications with any framework, or even just vanilla JavaScript. These recommendations are based on our own experiences, as well as direct interaction with our enterprise customers.

The overall goal for this document is to help you evaluate what Sencha considers to be the important aspects of “quality” code, and ultimately create your own readable, maintainable and scalable JavaScript projects. These best practices stand as a baseline from which your teams can implement your own strategy for building a high quality JavaScript codebase. We encourage you to fork our GitHub repo!

Hear More from the Experts

To go a step further, Sencha has organized a panel of experts to discuss a variety of topics in our January webinar titled Best Practices for Building HTML5 Applications. Join thought leaders from Sencha, Netflix, Salesforce, Apigee, Swarm Online and Modus Create as we examine:

  • Strategies for building scalable and maintainable code
  • Approaches to consider when building web applications for mobile or desktop
  • Which tools and resources the experts recommend

Best Practices for Building HTML5 Applications

January 22, 2015

10:00am PST

Best Practices for Building HTML5 Applications

5 Comments   Read more

Sencha Space: Beyond Native Packaging — Your Questions Answered

In last week’s webinar Sencha Space: Beyond Native Packaging, we discussed some of the important aspects of hybrid application development that cause significant friction. Specifically, we illustrated how native packaging tools waste both time and money by forcing developers to repeat the application development lifecycle for each of their supported platforms.

We then introduced Sencha Space and demonstrated how it makes the process of developing and deploying HTML5 applications much faster and easier. Using a managed runtime environment that supports desktops, tablets and smartphones, organizations can greatly reduce the amount of testing required for their applications and eliminate the hassles associated with deploying to consumer app stores.

Best of all, Sencha Space achieves these time and cost savings while also offering built-in user management and application security from the start.

Q&A

Following the presentation we had a lively Q&A with our audience, and we wanted to share some of that with you.

Can the Sencha Space client application be branded for my own organization?

Absolutely. Sencha Space can be uniquely branded with a custom icon, your logo and splash screen. Once users have been authenticated into the Space client, the colors and logo can be configured to match your organization’s branding. If this is something you’d like to do, please contact our Space team directly at space-feedback@sencha.com.

At one time, didn’t Apple allow apps to download and run “interior” apps without submitting those directly through the App Store. How does Space get around this?

Some time ago, Apple revised its terms of use specifically detailing how native apps can access or distribute content. The policy states that you cannot download or update native code without re-submitting the app through the App Store — but you can download or update HTML5 code running within the WebView, as long as it does not substantially change the intended purpose of the app.

Because the apps running inside Sencha Space are considered “web content”, Sencha Space abides by the terms of use for the consumer app stores.

Can Sencha Space access local resources on either mobile or desktop devices?

Sencha Space provides an encrypted file system for each application to use, so client apps can store resources locally (via the Camera or Downloads APIs) and retrieve them later. The Ext.space.Camera API also allows users to access photos from their devices’ libraries.

Does the Ext.space.Invoke API send messages through a server? Or do applications communicate directly within the Space client?

Invoke is a JavaScript API that lets one application securely run and communicate with another application running within Sencha Space. Because Sencha Space supports multiple WebViews to run the individual applications, your apps no longer have to send messages to a server and wait for asynchronous notifications. Using Invoke, applications communicate directly — which lets you build simpler, smarter applications.

The Ext.space.Invoke API allows apps to communicate either in the foreground or the background, and also handles the incoming messages received from other Space apps. And because all of this happens within the secure Space container, none of the data is ever exposed to the outside. Furthermore, administrators can configure which applications can communicate with each other.

Conclusion

The answers above represent just a fraction of the questions we answered during more than 20 minutes of Q&A. We covered a wide variety of other topics, and we encourage you to watch the recording in its entirety to learn more about Sencha Space.

You can check out Sencha Space for free by visiting manage.space.sencha.com and simply creating an account. Then watch Sencha Space: Beyond Native Packaging to see our great demos and learn how Sencha Space simplifies application deployment.

2 Comments   Read more

Sencha Space Webinar Series: Session 2 – Beyond Native Packaging

Native Packaging Webinar AnnouncementWe are pleased to announce the second installment in our Sencha Space webinar series. In this session, we’ll explore the deficiencies of native packaging solutions and how Sencha Space provides a better way to deploy, secure, and manage hybrid applications. By leveraging the management and security features of Sencha Space, while eliminating the need for native packagers and app store distribution, organizations can realize significant productivity gains and cost savings over the lifetime of their applications.

Space Webinar: Beyond Native Packaging

Tuesday, December 9, 2014

10:00am San Francisco PST | 1:00pm New York EST | 6:00pm London GMT

Space Webinar: Beyond Native Packaging

Jason Cline (Director of Engineering) and Art Kay (Developer Relations Manager) will demonstrate how to use Sencha Space to build, deploy and manage HTML5 apps more efficiently.

What you’ll learn:
  • How to accelerate application development by eliminating the need for multiple code bases across platforms, native packaging, and app store distribution
  • How to design security and manageability into your apps from the start
  • Best practices for streamlining application deployment

Sencha Space makes it easier to develop and deploy secure cross-platform HTML5 apps to a managed runtime environment that supports desktops, tablets and smartphones. Organizations can take advantage of this capability to design manageability and security into the application from the start and eliminate the hassles associated with deploying to consumer app stores. Sencha Space enables you to move beyond native packagers and bring your applications to market more quickly and securely.

There will be a Q&A session at the end of the presentation, so join us to learn best practices for deploying your apps and get your questions answered.

space-webinar.jpg 1 Comment   Read more

Introduction to Ext JS 5: Building Cross-Platform HTML5 Apps

Introduction to Ext JS 5: Building Cross-Platform HTML5 AppsAre you trying to develop apps for multiple devices and platforms, but unsure which tools will best fit your needs?

Ext JS 5 provides all of the tools necessary to build robust desktop and tablet applications using HTML5. With hundreds of components, customizable themes and support for both desktop and mobile devices, Ext JS 5 delivers the most complete platform for solving business app challenges.

If you are new to Ext JS, please join us for an upcoming webinar through Codementor where we will introduce the Ext JS framework and discuss how it differs from other JavaScript toolkits like AngularJS. A live Q&A session will follow the presentation.

Webinar: Sencha Ext JS 101 – Building Apps for Multiple Platforms

Thursday, December 11, 2014 at 11:00am PST

Webinar: Sencha Ext JS 101 - Building Apps for Multiple Platforms

Ext JS is very different than other HTML5 libraries like AngularJS. Developers today have an incredible number of tools to choose from – and it can be very challenging to pick the one that’s best for any project.

Most of the popular open source HTML5 libraries focus the development effort on writing raw HTML markup, using CSS and JavaScript to enhance the handwritten, hard-coded templates. While that approach does enable the creation of completely customized UIs, the downside is that an incredible amount of work is left to the developer to build this functionality from scratch (or cobble together from third party sources).

Ext JS takes a different approach to building applications by focusing the development effort primarily on JavaScript. As a comprehensive component framework, every widget can be easily extended and customized without forcing developers to start from scratch. And with support for more browsers than other libraries, Ext JS concentrates on adding robust functionality rather than building a customized stack of third party add-ons.

Join Us for Office Hours!

Codementor Office Hours are free live Q&A events where the top expert developers host regular office hours to live code, answer questions and debate about the latest technologies in a small group setting.

Sencha is very excited to be a part of Codementor’s vision to help connect developers with experts. We have always believed in helping our customers achieve success through community outreach, and we hope that this Office Hours session will help to answer some basic questions. As you begin to learn Ext JS you can also take Sencha training classes, work with our Professional Services and Support teams, and ask questions in our community .

What is Codementor?

Codementor is an open marketplace that connects you with experienced mentors for instant help via screen sharing, video, and text chat. You can get instant 1:1 help from expert developers in more than 800 categories — including JavaScript, HTML, CSS and many more. The expert mentors include book authors, creators of popular open source libraries, and even engineers at well-known tech companies.

cross-platform-html5-apps-teaser.jpg 3 Comments   Read more

How to Deploy and Manage your Ext JS and Other HTML5 Apps

How to Deploy and Manage your Ext JS and Other HTML5 AppsLast week, we held a webinar on Sencha Space 1.2 to provide an overview of the challenges around application development, deployment, management, and security that developers and IT professionals in the enterprise must address. We demonstrated Sencha Space extensively and showcased one of the marquee features of the latest release: integrated support for desktop applications in our platform — a major step forward in addressing key app development challenges that include:

  • Developing multi-device, cross-platform applications in an efficient, cost-effective way
  • Delivering applications to the right user on the right device at the right time
  • Securing sensitive application data end-to-end
  • Retaining control over applications and data over their lifetime
  • Having to publish enterprise applications through consumer app stores

ExtJS 5 application deployed and running securely in the Sencha Space desktop client

We explored how current application management and deployment technologies provide only partial solutions and introduce unnecessary cost and complexity into the app development and deployment workflow. For example, native packagers like PhoneGap and Cordova are mobile-only, provide no management or security features, leaving these as additional tasks for individual application teams.

Similarly, Enterprise Mobility Management vendors provide device and application management solutions that are mobile-only; they do not address management, deployment, and security issues for desktop applications. Because the mobile device management (MDM) solutions are focused at the device-level, not on individual apps and data, their enforcement mechanisms are too coarse-grained and heavy-handed for the primary use case for which they were originally intended: BYOD. Many employees will not yield control of their personal phone or tablet to an IT professional due to privacy concerns. For the extended enterprise BYOD use cases — providing app access to partners, contractors, and consultants — these solutions are a total non-starter because a non-employee business collaborator is even less likely to accept MDM solutions on their devices than a full-time employee would be.

These vendors also provide application management features — again for mobile devices only — and enforce policies in a more fine-grained way. These management features revolve around two approaches: app wrapping and native SDKs. Both of these approaches deliver no value without requiring developers at least to rebuild their application. At worst, these solutions require developers to re-code their applications to explicitly insert proprietary management and security hooks into their apps’ source code.

Consumer browsers support smartphones, tablets, and desktops, but provide no management, security, or API access to native OS/hardware capabilities.

Sencha Space addresses all of these challenges by providing a managed runtime environment for HTML5 applications on desktops, tablets, and smartphones. This approach provides the following benefits:

  • Eliminates the need for native packaging, multiple code bases across platforms, and app store deployment
  • Provides a single solution for developing, deploying, and managing multi-device applications on desktops, tablets, and smartphones
  • A consistent, modern, high-performance HTML5 runtime environment and SDK that make it easier to develop rich, secure applications for any supported device

If you weren’t able to attend the live webinar, watch the recording to see these capabilities in action. In addition to doing demos to show how Space can help organizations develop, deploy, and manage applications and users, we showed how you can build an application in Ext JS 5, which supports both tablets and desktops, and use Sencha Space to grant and revoke access to applications instantly over-the-air to any tablet or desktop.

Adding an application and deploying to users in Sencha Space is instantaneous.

Sencha Space provides a complete manifest of users, their group membership, and their devices. It allows administrators to revoke access to apps and data at the user or individual device level.

Using a single code base and without native packaging or app store deployment, Space can instantly deliver your application to the intended end user on their preferred device. In addition, it provides a secure runtime environment that protects your data, enforces your business and access control policies consistently across all devices.

A single ExtJS 5 application running unmodified in Sencha Space on both a Windows desktop and iPad.

We also demonstrated extensively the many new APIs we introduced with Sencha Space 1.2 and how they help developers build rich, complex applications. We encourage you to explore the Space APIs more on your own and discover these benefits for yourself.

You can also see how Space can help developers to simplify remote debugging of applications on both iOS and Android with a debug version of our client application that provides real-time introspection of a running applications. Learn more about this powerful developer productivity capability in the Space docs.

Sencha Space provides a powerful remote debugging capability to help developers quickly troubleshoot apps.

We answered a few audience questions during the webinar, but we wanted to follow up on the rest. I’ve included responses to the remaining questions here.

Q: How does Space facilitate offline applications?

A: Space supports the HTML5 app cache mechanism and provides a rich set of APIs for storing large volumes of sensitive data on devices using strong encryption. Future product enhancements will augment Space’s flexibility to handle offline use cases.

Q: Can Space management restrict an application to only a certain platform/device type? Some apps may run well on the desktop, but not on mobile devices and vice versa.

A: Space currently does not enforce policy to exclude device types or platforms at runtime. However, Space does provide APIs to determine the device type and OS, so developers can add a small piece of code to filter out unsupported devices. Stay tuned for enhancements in this area.

Q: How does Space manage the app development/upgrade process? Can we deploy a version of an app to QA and then move it to production?

A: Yes. Today, you can deploy different versions of your applications inside of Sencha Space and link them to specific users like your QA team. Once they have completed the testing process, you can then deploy that version of your app to your production users. Stay tuned for upcoming enhancements around application versioning and deployment.

Q: Can Sencha Space access my app’s data? For example, if the admin wipes her org’s data from the device, can Space send the data back to the server?

A: No. The application can explicitly synchronize local data back to the server. However, Sencha secure storage is specifically designed, so sensitive data can’t be recovered from a device unless an authorized user specifically accesses the application during a valid session and after a successful PIN challenge. We are researching secure data sync mechanisms for a future release.

Q: How does Space compare to MBaaS such as FeedHenry?

A: Space is not an MBaaS solution. It provides a managed, secure HTML5 environment and client-side SDK. It does not provide back-end capabilities such as cloud storage sync, server-side API management for applications and social media integration. In addition, Space supports desktops, so it bridges the mobile/desktop divide. Space user management integrations and push notification API are features that enable richer and more secure client-side user experiences.

Q: Does using Space for my apps prevent me from using a consumer browser or native packager too?

A: No. We provide an API, so you can develop your app to easily tell whether it’s running in Space or somewhere else and take the appropriate action.

Watch the webcast recording to see the product demos and learn more about the new features. Keep an eye out for details on the next webinar in this series about the exciting new capabilities of Sencha Space.

space-blog-1.2-launch-webinar-redux-teaser.jpg 4 Comments   Read more

JavaScript in the Enterprise – Your Questions Answered

JavaScript in the Enterprise - Your Questions AnsweredIn last week’s webinar, Analyzing the ROI of JavaScript in Enterprise Software Development, we discussed the requirements for building enterprise applications and highlighted some of the challenges commonly faced by our own customers. We also examined how choosing a JavaScript framework can impact the long-term economics relating to development, maintenance and operational processes.

To view the webinar, please visit the Sencha Channel on BrightTalk

To learn more, join us for our upcoming webinar - Analyzing the ROI of JavaScript in Enterprise Software Development

At the end of the presentation (~56:00) we received a few interesting questions that we simply didn’t have the time to answer. We promised to follow-up on these questions — so here are our responses:

Upgrading JavaScript Frameworks

How mature is any Javascript framework (and Ext JS in particular) in terms of supporting upgrades? Transition from Ext JS 3 to 4 was relatively a big effort compared to a Java 5 – 6 upgrade. Do you consider a better upgrade transition supported by JavaScript frameworks in the future?

This was one of the major concerns we raised during the presentation. As you point out, many other enterprise technology platforms (e.g. Java) have far longer release cycles compared to web technologies. In fact, Wikipedia cites roughly two years between the major versions J2SE 5 and Java SE 6.

With the explosion of HTML5 in recent years, web technologies (specifically JavaScript) have enjoyed an incredible amount of innovation as browsers continue to implement new HTML5 capabilities. The downside to the innovation is that the technology changes so fast that we currently see a huge difference in functionality between legacy browsers (e.g. Internet Explorer 8) and the latest versions of Chrome.

During the webinar, we spoke about how some widely popular micro-frameworks (AngularJS and jQuery, among others) have completely abandoned legacy browser support in their most recent versions. This is of great concern to enterprise organizations who must continue to support older browsers for the foreseeable future — and to your question, many JavaScript frameworks are not “mature” in their support for upgrades in this sense.

Sencha however has firmly aligned itself with the needs of the enterprise, and we learned a lot from the experience of our customers during the Ext JS 3 > 4 migration. First we made sure that our latest release (Ext JS 5) offered a smooth upgrade from 4.x. Second, we kept support for the legacy browsers our enterprise customers still require. Third, based on our customer’s upgrade experiences, we have made upgrade paths and backward/forward compatibility a standard roadmap item.

While it’s hard to say if all JavaScript frameworks will mature into longer, more stable and smoother release cycles, we believe that Ext JS is the clear leader in this area.

Browser Support

What rule/commitment does Sencha have on supporting older browsers? For example, when will you stop supporting IE8?

The only rule Sencha has for deciding which browsers to support comes from what our customers tell us they need.

When we first released Ext JS 4.0 in 2011, the browser landscape looked a bit different than it does today. Internet Explorer 6 still had significant market share, and Chrome had only just begun its shorter 6-week release cycles. Mobile browsers were far from mature, and at the time, few enterprise companies had mobile strategies.

The browser landscape today is much different, as are the requirements for enterprise web applications. While the need to support Internet Explorer 8 is clearly still a priority for our customers, only a few organizations require anything older (and for those customers, we are supporting them via customized extended support programs). On the other hand, many of our customers also specifically asked us to begin supporting mobile browsers — particularly for use on tablets. Therefore, Ext JS 5.0 (released earlier this year) evolved with the needs of our customers.

When will we stop supporting IE8? Certainly not in the immediate future. The majority of our enterprise customers tell us they still need to support IE8, and this aligns with research from Net Market Share that legacy Internet Explorer still commands a sizeable chunk of IE usage.

Legacy browser support is truly one of the features that sets Ext JS apart from our competition — so while we plan to continue innovating with new features, we also plan to continue evolving with (and not away from) our customers.

Legacy browser support is truly one of the features that sets Ext JS apart from our competition — so while we plan to continue innovating with new features, we also plan to continue evolving with (and not away from) our customers.

Code Specialization

Micro-frameworks are specific. How can Sencha guarantee best-in-class features for each specialization?

I mentioned in the webinar that micro-frameworks, by definition, only strive to implement a subset of the functionality needed by enterprise applications. This isn’t necessarily a bad thing — as you point out, micro-frameworks can provide best-in-class features by specializing in their area of expertise.

Taking that point on its own, you might argue that it can be difficult for Sencha to compete with micro-frameworks that specialize in certain areas. One example might be charting and visualizations: Ext JS ships with charting and visualization packages, but how can Sencha guarantee ours are “the best”? There are several parts to this answer.

First, asking which framework is “best” is always a loaded question. Does “best” mean quality? Performance? Extensibility? It’s an entirely subjective analysis, and ultimately “best” is only true in given situations. From our perspective, Ext JS offers an extensible framework in which all of the features are fully integrated. We guarantee you’ll be able to easily modify and extend every class in our framework if the built-in features don’t meet a specific need; moreover, you’ll be able to do this using a consistent code style. Micro-frameworks typically don’t guarantee that because they’re specialized, so in cases where a library doesn’t perfectly fit your needs you are often stuck hacking away at code not intended for customization or extensibility.

Second, you need to consider that micro-frameworks are not used in a vacuum. A specialized charting library needs to be wired into the rest of your application stack — work that can be very tedious as none of the moving parts are fully integrated.

And finally, it’s important to find the right tool for the right job. Ext JS is ideal for building feature-rich and complex line-of-business applications — and while our framework delivers the overwhelming majority of features an enterprise application needs, there may indeed be cases where you want to pull in a third-party library to do something Ext JS doesn’t specialize in (e.g. cryptographic algorithms). Ext JS can play nicely with other libraries — the webinar just warned against complicated dependency chains as they cause problems for long-term maintenance.

Performance

What gains are you seeing in HTML5 performance for Sencha apps as it relates to overtaking native apps and becoming the standard for mobile app development?

Sencha engineer Ross Gerbasi recently wrote an article discussing how HTML5 performance on iOS 8 has gained a lot of speed — but that there are also some bugs that still need to be addressed.

Sencha has strategically focused on HTML5 because we feel incredibly confident in the direction HTML5 is heading. JavaScript performance continues to improve both in mobile browsers as well as in the WebView.

During the webinar, we briefly talked about different approaches to building applications. It is hard to beat the performance of native apps with HTML5 simply because native apps are built with technology one step closer to the physical OS, but HTML5 applications can still achieve fantastic speed. Sencha proved this two years ago with our Fastbook demo, and since then others have also built impressive HTML5 apps with performance so good that users can’t tell whether-or-not they’re native.

Our take is that HTML5 already offers great performance for mobile apps, and it will continue to improve to the point where “performance” is good enough that we stop asking this question.

Security

How do you secure your framework? Basically, how would a customer have assurances that it’s secure enough?

Security is definitely a big issue for enterprise applications, but application security also comes in many flavors. Browser applications are inherently insecure as the runtime is open for anyone to debug, so let’s examine how Sencha tackles security.

In the Ext JS framework, many of our classes can be configured to help mitigate common security threats. For example, Ext.ElementLoader automatically prevents remote scripts from being loaded unless configured otherwise. Classes that enable user input (e.g. Ext.form.field.Text) can easily be configured to prevent the direct input of certain characters or expressions, and can also be configured to validate their input on submission. Ext JS also ships with a number of utilities (e.g. Ext.util.Format.stripScripts and stripTags) that enable the developer to implement security as needed.

But as I already mentioned, the browser is inherently insecure. Even if the client application prevented direct user input, savvy developers can easily open their debugging tools to manipulate script logic, DOM interactions or access localStorage. At the end of the day, a client application running in the browser must rely on server-side and network security.

For mobile applications built with HTML5, having your web application wrapped with tools like Cordova might make this more difficult for a hacker — but unfortunately, Cordova applications are still not completely secure.

We created Sencha Space specifically to address the enterprise concerns around building secure mobile applications with HTML5. Our recent white paper goes deeper into the security details to discuss how Sencha Space can help to lower risk, strengthen security, and lower the total cost of ownership for application and data mobility.

Conclusion

Sencha understands the impact that HTML5 and JavaScript can have on the long-term economics for enterprise software development, and Ext JS has been strategically engineered to help the enterprise build applications more efficiently. Please feel free to ask us more questions about the presentation in the comments below!

We really hope you enjoyed last week’s webinar — please join us in November to hear about what is new in Sencha Space 1.2, and how Sencha Space makes it easier to develop and deploy secure cross-platform HTML5 applications!

analyzing-the-roi-of-javascript-in-enterprise-software-development-1.png 3 Comments   Read more

4 Questions to Ask Before Choosing a JavaScript Framework

4 Questions to Ask Before Choosing a JavaScript FrameworkOver the last five years, there has been an explosion of innovation in both web and native technologies. With the rapid release of libraries, frameworks and tools, developers now have many options to create applications for this new world. But, have design patterns and the general utility of micro-library stacks really added productive value to full-scale enterprise web development?

I’ve had the opportunity to interact directly with Sencha enterprise customers over the past several years, and I’m frequently asked how Sencha compares to alternatives in the wider web application development ecosystem. With the evolution of popular (but limited) libraries like AngularJS, Ember and others, developers today have an incredible number of tools to choose from — and often the resulting “solution” is a completely customized stack of multiple, single-purpose, third party libraries.

While these individual libraries and the resulting custom stack have the potential to do some things very well, the unfortunate reality is that a great deal of the functionality must be gathered together from disparate sources, written in-house and require a dedicated team of maintainers in order to meet the demands of enterprise software development.

To learn more, join us for our upcoming webinar.

Analyzing the ROI of JavaScript in Enterprise Software Development

Tuesday, 10/14 at 10:00am PDT

To learn more, join us for our upcoming webinar - Analyzing the ROI of JavaScript in Enterprise Software Development

Sencha has long recognized the power of HTML5, and we have worked hard to create a feature-rich, fully integrated product line focused on developing powerful web applications in the enterprise. As a continually evolving, modern, full-feature JavaScript framework, Ext JS is carefully engineered to meet the most important needs of enterprise web applications — without requiring an assortment of third party add-ons.

Before you start work on your next project, ask yourself these four questions:

  • How can you make your development teams more productive?
  • Can you accurately estimate the development effort involved in making long-lived enterprise applications?
  • Can your developers easily re-use code across the company’s complete application portfolio, regardless of the end-user device or platform?
  • Can you accurately predict the long-term maintenance requirements of an application across its entire lifecycle and potential end-point delivery platforms?

Let’s address each of these questions in detail and examine why the Sencha Ext JS framework is a better choice for building enterprise web applications compared to an arbitrary stack of solutions built on top of third party libraries like AngularJS.

How can you make your development teams more productive?

Every company wants to know how they can help their employees be more productive, and this is particularly true in software development.

One of the most important benefits of HTML5 is that web developers share a common skill set — allowing them to build powerful, interactive applications in a variety of environments. But despite the fact that HTML5 is a common skill set, the reality is that fragmentation exists across the popular libraries and tooling, and it’s difficult to train developers consistently.

Modern Web Stack Criteria

(click to enlarge)

Consider the matrix shown above, which contains all of the different features an enterprise application will likely need. Most popular application libraries, like AngularJS, only implement a small subset of these features — meaning the developer (and by proxy, the enterprise) becomes responsible for pulling together an array of third party software components (and their dependencies) to cover the missing features, unless these features are developed and maintained in-house.

A functionality map showing the broad feature set of Ext JS 5 compared to Angularjs' smaller subset of features

(click to enlarge)

With this approach, it’s also important to consider that each of these third party libraries is independently distributed, each with their own release cycles and “best practices.” Combining many disparate libraries into a single highly-customized application stack often highlights the lack of integration for individual features across the stack, and documentation is also usually incomplete because no two application stacks are exactly the same.

Plus, what happens if you need help? Google might be driving development of AngularJS, but they don’t offer support of any kind, let alone dedicated and timely enterprise support. The same is also true for nearly all of the popular third party JavaScript libraries.

Clearly the challenges companies face with this approach involve:

  • Adequately training their developers across all of the moving pieces
  • Testing the latest releases of all third party dependencies against many internal applications
  • Finding enterprise-level support

This “Rube Goldberg” approach will adversely affect productivity over time, and usually sooner rather than later. The overall efficiency of the development and IT organizations suffers because large development teams are frequently split into two areas of focus: the team doing the updating, documentation and maintenance of the internal custom framework and then the team doing the actual application development that matters to customers or end users.

By contrast, the Sencha Ext JS framework contains nearly all of the features in the matrix. These features are fully integrated across Ext JS, helping your developers design, develop and deploy applications consistently. Our world-class dedicated Training, Support and Professional Services teams also ensure that your organization can get the training and support when needed, giving them the additional resources they need to stay focused and on schedule.

Can you accurately estimate the development effort involved in making long-lived enterprise applications?

It’s no secret that the most common cause of runaway software projects and budgets is poor estimation. A large part of this problem is poorly defined scope, but IT managers also frequently neglect to look at the tools being used to write the software.

No software library or tool is perfect, and it’s certainly unrealistic to expect anyone to know 100% of the tools being used. When you apply that fact across all of the dependencies a project might require, you can easily see how complicated the project estimation matrix becomes.

By applying some simple mathematical formulas, you begin to understand the real-world consequences of having too many dependencies. Assuming every dependency has a 90% reliability factor, and if we treat these dependencies as existing in series, all you need to do is multiply by the number of factors to visualize the overall reliability of the architecture:

(Dependency A = 0.9) x (Dependency B = 0.9) = 0.81 //or 0.9^2
 
(Dependency A = 0.9) x (Dependency B = 0.9) x (Dependency C = 0.9) = 0.729 //or 0.9^3

Although 90% is an average (and perhaps a somewhat arbitrary) metric, the mathematical premise remains intact. You can clearly see how adding more dependencies reduces a system’s reliability exponentially — and that reduction in reliability will translate into problems like delays in delivering features, additional maintenance and testing time, or the need to allocate additional development resources. This directly leads to increased costs and a whole lot of “attention and help” from senior management — something most developers don’t enjoy.

When choosing to build your own framework with AngularJS, your team immediately assumes a number of external dependencies. The customized application stack typically involves AngularJS, jQuery, Bootstrap, Grunt, and others — not counting any code developed and maintained in-house. While this might be fine for smaller projects and teams building relatively straight-forward applications and websites, the potential risks and consequences become very pronounced in the enterprise, where teams are larger, geographically diverse, and maintain a large code base common to many applications.

A full-featured framework, such as Ext JS, has fewer development dependencies because the framework simply contains more functionality, eliminating the need for most third party libraries. But the factors of reliability even go beyond the number of dependencies — because Ext JS contains more functionality, that functionality is inherently more reliable because each feature is guaranteed to be compatible across the framework. With fewer required points for third party integration, it’s easy to see how estimating future development is less complicated by using a full-featured framework.

Can your developers easily re-use code across the company’s application portfolio, regardless of the end-user device or platform?

There are two popular acronyms often used in software development: DRY (Don’t Repeat Yourself) and KISS (Keep It Simple, Stupid). And while most developers and application managers understand those terms, it’s also clear that not everyone follows this advice.

For example, most senior developers understand how to extract common code patterns into a higher-level abstraction to be used in multiple places — and therefore the problem of re-use at the small scale is pretty well solved. But what happens in the enterprise, where an organization may have very large software teams managing many applications across a variety of devices and platforms?

The reality of software development in the enterprise is that large-scale code re-use is mostly an unsolved problem. Modification of re-used code is particularly error-prone in these situations, so the “third party library” approach to application development really begins to cause issues as individual modules, developed by different teams with uncoordinated release cycles, need to be updated or replaced.

Ext JS solves this problem by applying a standard application development process, organizing the code itself and providing a consistent methodology. Combining Ext JS with Sencha Cmd, the fully integrated Sencha product line makes it simple to share code across teams and applications.

Can you predict the long-term maintenance requirements of an application across its entire lifecycle and potential end-point delivery platforms?

It has been said that software maintenance is largely about adding new capability to old software — not necessarily fixing bugs. In fact, maintaining existing applications typically consumes between 40 and 80 percent of software costs.

Enterprise software often is designed to stay in production for as long as five to ten years — sometimes longer. Consider that most of the popular JavaScript libraries are only targeting “modern browsers.” Keep in mind that older browsers (namely IE8) still maintain a sizeable chunk of the desktop browser market share, and yet AngularJS and other libraries have completely dropped support for it.

With those sorts of numbers, it’s absolutely critical that development teams actually understand the tools used to build the product. If simply reading and comprehending the existing code consumes as much as 30 percent of the total maintenance time, you can conclude that application maintenance is more difficult than the initial development. This problem only gets worse when the teams maintaining applications inevitably change over time, and the constant influx of new developers results in additional confusion.

Because all Sencha applications follow the same design patterns and methodology, any developer on the team can handle both new development as well as maintenance of legacy software. Ext JS also supports legacy browsers (including IE8) in addition to the latest “modern” versions, so your applications are guaranteed to work for years to come with no additional worry.

Conclusion

Popular JavaScript libraries like AngularJS certainly have their place in the world of web development. The incredible growth of permissive open source code has enabled HTML5 to explode as an application delivery platform and secured its future as a critical web technology. But the enterprise has very specific, long-term needs that are simply not addressed by ad hoc assemblies of disparate micro-frameworks gathered from uncoordinated sources.

Ext JS is clearly positioned to address these concerns, and does so through a robust and tightly integrated set of features. Download the free 30-day trial and see for yourself how building powerful enterprise web applications is easier with Ext JS.

Want to learn more? Join us for our upcoming webinar.

Analyzing the ROI of JavaScript in Enterprise Software Development

Tuesday, 10/14 at 10:00am PDT

To learn more, join us for our upcoming webinar - Analyzing the ROI of JavaScript in Enterprise Software Development

Additional Resources

This blog post specifically compared Ext JS to AngularJS, but Sencha has compiled a much deeper analysis of Ext JS to other JavaScript libraries. For more information, please read our recent whitepapers:

analyzing-the-roi-of-javascript-in-enterprise-software-development-1.png 11 Comments   Read more

Optimizing Your Ext JS Apps for Touch and Tablets

Optimizing Your Ext JS Apps for Touch and TabletsWoop there it is — Ext JS 5. Now, you might wonder why you should upgrade. There are many reasons why you’ll want to upgrade your existing Ext JS 4 applications, but most important is optimizing your application to support touch and tablet devices.

Right now, everybody is used to running their applications on “mobile” devices. We live in a multi-device world. I read most of my email on my phone. Usually when I have to read a PDF or browse to a website, I use my tablet. I don’t even print documents anymore because I have a tablet. Going mobile is extremely important. This is why a lot of enterprises want to have their apps work on a touch device too.

Sure, you can run any website or web app on your iPad, so your existing Ext JS 4 application might run fine. But often, it behaves strangely or looks funky. That’s because it’s not optimized for touch support.

To learn more, join us for our upcoming webinar.

Optimizing Your Current Ext JS Apps for Touch and Tablets

Thursday, 9/25 at 9:00am PDT

Let’s take a look at the next screenshot — the app is running on an iPad Retina. Obviously, it doesn’t look right, there’s not enough space for the chart. The grid rows are too small, and there’s no white space around the buttons. I could easily tap the wrong button with my fingers.

Also, tablets don’t support the features that were designed for use with a mouse and keyboard, such as right mouse click, hover states, etc.

Band Manager App

MC Hammer would say: “U can’t touch this!”.

That’s why you need to optimize for touch. Because Ext JS 5 is an HTML5-based framework, we can optimize our apps by upgrading to Ext JS 5. But what about Sencha Touch — the other “mobile” framework.

Hammer Time

The Difference Between Sencha Touch and Ext JS

Sencha Touch is a lightweight framework, specifically designed to support phones. It ships with all these device-specific themes (for iOS, Android, Tizen, Blackberry and Windows Phone). Sencha Touch also has a platform switcher, and it can run in offline mode.

You may wonder: if I can use Sencha Touch for tablets, why would I use Ext JS 5 instead?
Ext JS 5 also has support for mouse and keyboard, so you can run your apps on desktop and touch devices. Ext JS 5 continues to support Internet Explorer 8 and 9. It has many components and the architecture was developed to support large data sets. When you need to build large enterprise applications, Ext JS 5 should be your first choice. Also, when you already have an existing Ext JS 4 application, it’s much easier to upgrade to Ext JS 5 (and also better to maintain), than writing another Sencha Touch app.

Stop! Hammer Time!

Let’s break it down, and review all the features and components that ship with Ext JS 5, and what you can use to create touch applications.

  • New Event System & Touch Gestures
  • Touch Themes
  • Responsive Config
  • Touch Components

Event System & Touch Gestures

The Ext JS 5 event system makes a significant paradigm shift from previous releases by moving away from directly attached DOM listeners to a delegated event model (first implemented by Sencha Touch). The advantages are that it reduces the number of interactions with the DOM which can, especially on older browsers, be quite expensive. Also, it enables Touch Gestures, such as: swipe, pinch and rotate.

This means that for each type of event (mousedown, touchstart, etc.) a single listener is attached at the very top of the DOM hierarchy (the window object). When a DOM element fires an event, it bubbles all the way to the top before it is handled.

So we have an event system, which works out of the box; what else can we do for easy touch optimization? Well, Ext JS 5 has new touch optimized themes you can directly use in your apps.

Touch Themes

Ext JS 5 ships with new themes that are designed for touch devices. Buttons, components and icons are bigger and include more white space to make sure you won’t mis-tap an item.

Take a look at the next screenshots.

Neptune Touch Theme

The Neptune Touch theme is highly customizable. This theme takes the modern and minimalistic look and feel of Neptune and adapts it for use in touch­-centric contexts by increasing the size of some tappable elements to make the theme more touch­ friendly.

Crisp Touch Theme

The Crisp Touch theme takes Neptune Touch and modifies the default colors, icons, etc., while keeping the same touch­-friendly, iOS-like dimensions.

You can switch between themes by adding the theme property to myapp/app.json:

"theme": "ext-theme-neptune-touch", //or "ext-theme-crisp-touch"

Although technically, you are running a touch-optimized app now, it still might not feel exactly right. That’s because optimizing for tablets also requires that you wear your designer hat. Sencha gives you all the tools, but you might need to re-think and re-design some parts of your existing app.

For example, on your desktop you can layout components next to each other, but on a tablet you might want to dock components underneath each other; maybe there are even components you would like to hide. You can do this with the responsive design feature in Ext JS.

Responsive Design

With the release of Ext JS 5, Sencha supports responsive design. To implement responsive design, you don’t need to code media queries in your CSS, you can write Sencha configurations, just like you’re used to:

plugins: ['responsive'],
responsiveConfig: {
        portrait: {
                dock: 'bottom'
        },
        landscape: {
                dock: 'right'
        }
}

For more info, see also:
http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.plugin.Responsive

Responsive Theme Ex

Apart from responsive design, you might also need to review your current view components. By upgrading to Ext JS 5, all current components would be optimized for touch support. For example, the grid would behave perfectly on a tablet. A long press on a grid header would show the sorting dropdown. But you may also want to change certain components.

Touch Components > Forms

Ext JS 5 uses the HTML5 doctype. Therefore, we can use HTML5 forms and set form types. Such a form type can force a particular device to display the correct keyboard. Such as email, search, file, url, number, datetime, etc.

Here’s an example of how to set form types in Ext JS:

{
        xtype: 'textfield',
        inputType: 'email',
        name: 'email',
        fieldLabel: 'Email'
}

On an iPad, it will display the keyboard used for email addresses — note the @ key.

ipad Display

Touch Components > Tabs

In Sencha Touch, you could position the Ext.tab.Panel at the bottom of your screen, center aligned with an icon — a common design choice for tablet interfaces. Now, in Ext JS 5, the Ext.tab.Panel can be configured like that too:

Ext.create('Ext.tab.Panel', {
        title : 'Bands',
        renderTo : Ext.getBody(),
        height : 500,
        width: 400,
        layout : 'hbox',
 
        tabBar: {
                layout: {
                        pack: 'center'
                }
        },
        tabPosition: 'bottom',
 
        defaults: {
                iconAlign: 'top',
                bodyPadding: 15
        },
 
        items : [{
                title: 'The Ramones',
                glyph: '117@Pictos',
                html: 'Blitzkrieg Pop'
        }, {
                title: 'Billy Idol',
                glyph: '117@Pictos',
                html: 'White Wedding',
        }, {
                title: 'Rolling Stones',
                glyph: '117@Pictos',
                html: 'Paint it, Black'
        }]
});

Touch Tabs

Touch Components > Charts

Chart components can use the same chart package as the one in Sencha Touch. These charts are SVG- or HTML5 Canvas-based, and can deliver better performance on mobile devices. This enhanced charting package brings many new features to Ext JS 5, including:

  • Pan, zoom and crosshair interactions
  • Candlestick and OHLC series
  • Floating axes
  • Multiple axes
  • Greater customization

Touch Charts are not included in the framework, but they are available in a separate package. Therefore, to use them, you’ll need to enable the package:

"requires": [
        "sencha-charts" // ext/packages/sencha-charts
]

Please note when using the new charting package, some of the chart syntax has changed. It’s best to look at the Charts API docs or guides for more info.

Touch Charts

Conclusion

There are many more tricks that Ext JS 5 can offer that would work perfectly in the multi-device world. Device and feature checking, offline proxies…and more. You can start playing with this right now and test it on your touch device.

If you’d like to learn more about upgrading to Ext JS 5 and optimizing your existing apps for tablets, take our course: Upgrade to Ext JS 5 & Optimize for Tablets. Check out our course listings to sign up for one of our classes — online, on-site or at worldwide locations.

No Comments   Read more