Ext JS is a powerful framework for developing complex web applications for your business. With more such business applications moving to the web everyday, a framework such as Ext JS can speed up your development and help you sharpen the quality of your applications.
This video course will take you through the components of the framework that you need for a typical business application.
You will get a thorough overview of how the Ext JS data package works, how it interacts with the many frontend widgets, and general concerns such as security, production optimized code, and continuous integration. We'll then show you data using the wide variety of components available, before moving on to charting and graphics, and bringing our app to life. Finally, you will deploy and test your code to make your application production-ready.
By the end of this course, you will cover all the key aspects of the Ext JS framework and successfully build and deploy your application.
About the Author
Simon is the head of the Big Data team at Red Gate, focusing on researching and building tools to interact with Big Data platforms. Previously, he has worked in the data intensive worlds of hedge funds and financial trading, ERP, and e-commerce, as well as designing and running nationwide networks and websites. These days, his head is in Big Data and visualisation.
In the course of those roles, he's designed and built several organisation-wide data and networking infrastructures, headed up research and development teams, and designed (and implemented) numerous digital products and high-traffic transactional websites.
For a change of technical pace, he writes and produces screencasts on frontend web technologies such as ExtJS, and is an avid NodeJS programmer. In the past, he has also edited novels, written screenplays, developed websites, and built a photography business.
An overview of the application we are going to create, the key themes, and what the viewers will get from this course.
Creating a folder structure for a blank application can be tedious and error prone. SenchaCmd provides a handy command line utility to initialize a skeleton for your application and get you started.
Identifying users is often the first thing your application needs to do.
Users need a way to identify themselves to your system.
Knowing who the user is is just the first part of security; we also need to know what that user is allowed to do. This requires a permissions model. It is also a good idea to make sure that actions the user is not allowed to perform are properly disabled, or hidden in the user interface.
Client-side security can always be by-passed, and you should never have your server trust what it receives from a client. You need to duplicate validation on the server, and ensure that the same security mechanisms are followed.
It is all very well creating a few test users by hand in the database, but when your application reaches production you will need some sort of interface to allow administrators to create users and work with permissions.
Different users have different needs and access rights. We shouldn't be showing them menu options that don't make sense to them, so here we will look at dynamically building the menus in our application.
We have already seen some use of stores. This section is a deeper dive, working to refactor our existing code for better reuse and handling some interesting edge cases.
Here we will be looking at some of the alternative options for proxies, how to best deal with different types and formats of data, and how we can optimize the way we talk to our server.
The structure of data on the backend is not always the same as the model in the frontend, but careful thought is still needed.
Grids are a key part of most business applications and a great way to show and interact with tables of data. This section goes into some of the advanced features of grids in Ext JS.
A common pattern in business applications is to give a user an overview list of items, and let them drill down to the details of a particular item by selecting one from the list.
Present date-based information in an intuitive way that matches calendar applications that users are familiar with.
Often the basic components in Ext JS don't give you enough flexibility in formatting display. Xtemplates let you display information better.
Tables may be a good way of showing individual detail, but charts and graphs make it much easier to see broad trends.
Sometimes you might want to be able to save your charts and share them with other programs. Exporting them to PNG helps.
SVG and PNG files are great for use on screen, but if you want to print out your chart results, a PDF might be better.
Some data is linked to specific locations on a map. We can display this geospatial data as annotations on a map panel.
Not everyone speaks English, and practically every country has different ways of showing numbers and dates. Translation and locale support are essential for a global application.
The default Ext styling is nice and usable, but sometimes you're going to want to put a bit of a personality into your application.
Making your application more accessible to people with disabilities can be a legal requirement. There are a range of disabilities to consider from poor sight and color-blindness to difficulties with typing and pointer control.
Users expect their browser back button to work in an intuitive way. This video shows you how to add history support and management to your application.
Ext JS applications can get very big. It is important for network performance to reduce the size as much as possible with a variety of compression techniques.
Developing your application is just the first step; you need to be able to deploy the right bits to the right server to get it into the hands of users.
Sometimes, you need access to special device APIs, or need to deploy your application as a desktop native app rather than as a website. You can wrap the application as a desktop executable with these techniques.
Speeding up loading and display of your application for international users.
Chrome dev tools are extremely powerful for debugging a number of issues with any web browser. Here we look at how you can use them to track down problems in your application.
Ext components produce complex HTML which can be too granular for us to debug. Tools like illuminations provide a more Ext-centric view and present information in a way that's closer to the way the framework works.
While you're developing, it can be tedious to have to keep running through a series of actions to test the bit of interface you are working on. You can automate using the application with Selenium to avoid this.
Cross-browser testing is repetitive and time consuming. We can automate a lot of this, just as we did with Selenium.
The automated testing of your interface and units of code is great, but we can take this to the next level by setting up a continuous integration server to keep running these tests for you.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.