The blog that aims at the largest possible balance of pleasure over pain

Main menu

Tag Archives: senchacon

Post navigation

Don Griffin, @dongryphon, from Sencha presents on ExtJS 4.1 features and performance improvements which I recently watched on vimeo here. These are my notes from that session.

Main theme is performance, especially in the Grid. On IE8, it takes ~4.7 seconds to fully render the Grid, with render and layout taking the most time and initalize and load taking the least. In 4.1, the load time is cut 2.4 seconds in IE8. Focus was placed in all areas to improve on this to get it closer to the way it was in 3.4, but there are many more components in 4 which exacerbates the issue.

Regarding initialization, you can use the new class system and minimize the classes you load by using custom build. This will then only load the classes (over the network) that you use in your app. initComponent was also improved.

Rendering changes in 4.1 including removing createElement (createElement is fairly costly in 4.0); renderTpl manages this better by creating the elements in the hierarchy and then using renderSelectors during onRender to tie it back to the base element rather than doing this incrementally. In 4.1, you now need to move custom code from onRender to beforeRender so that it gets called prior to be created in the DOM.

In 4.1, dockedItems config is available to add titles and other things to the edges of a container.

CSS calculations are expensive: Write + Read = Reflow because when you write to the DOM, the browser won’t cache it and thus causing an expensive reflow. In 4.1, “layout context” is moved to the global context so all the components are read at once and then writes after everything is read first. This minifies reflows and thus performance.

Other areas of investigation include converting layouts to CSS where possible, optimizing class creation and optimizing DOM Event binding. This is being looked at for future releases.

In 4.1, Grid scrolling has gone back to “native scrolling” (or having true momentum when scrolling) especially when infinite scrolling. This is a big deal since there were so many issues with the feel of scrolling in version 4.0; it wasn’t very smooth especially in IE.

API enhancements for 4.1 include:

Border Layout you can now do multiple regions (i.e., 2 west’s and 2 east’s) without nesting border layouts. You can also set preferences to how regions layout with each others. Regions can be added and removed dynamically too all within ONE border layout. Splitters work as you’d expect, respecting the borders of its neighbors.

XTemplate compiles and runs faster and is now debuggable. Now they compile to a function and support else, elseif and switch case control statements. You can also add code right into the template.

Overrides will allow you to only bring in the components that you’re using in your build.

When porting from 4.0 to 4.1 you may need to check your custom layouts since now there is the global context for rendering as well as onRender which I mentioned earlier.

Increasing performance by 2 fold should certainly be welcome, but I especially like that attention was given to grid scrolling because I found it nearly unusable in 4.0 when using IE. That will make my customers very happy.

For more information, I would encourage you to take a look at Ed Spencer’s blog on the subject. An even more recent article is here that speaks to how to take advantage of the 4.1 performance enhancements in detail.

No compiler so all errors at runtime. Be sure you check case and check spelling. Declare variables in the appropriate scope by declaring vars at the top of a function to avoid accidental local vars. Careful using reserved words like “class”.

Truthiness & Equality: in JS there’s multiple ways things can be true/false rather than explicit. Type coercion not performed by “===”. Note: null/undefined are different (e.g., undefined means it doesn’t exist).

Closure you have to check for variable binding (outside the closure) and variable shadowing (response is an example in an ajax call).

No block scope only function scope (e.g., a variable in an IF block is global to the function)

Prototypal inheritance

Higher Order Functions can be passed to functions and be variables.

Tools to Debug

Chrome Debugger

Elements screen to look at position in DOM, see styles and their precedence. You can search for DOM ids and modify styles dynamically.

Scripts screen allows you to debug and view local and global variables. You can look at the call stack and set conditional breakpoints.

Resources screen shows size and time it took to load various artifacts that come over HTTP or XHR.

Console screen allows interactive commands and use log(), warn() and error() to log to the console

Made by Webkit staff on Sencha team to help debug Android devices (on Github and blog).

Sencha Touch Specifics

On Data

Is the URL correct?? Did the request complete?? Is data valid??

Does the model align with the Component (from JSON for example).

Event Driven Model

Use appropriate callbacks

Remember that things are typically async

Overnesting

Panels with no layout

Specify layouts instead (be sure to specify layouts for Panel and use “fit”). Use the DOM view in the Chrome debugger to see if elements have the correct height (common mistake is that they’ll be zero).

Dynamic Layouts

Remember doLayout and doComponent to reset layout after changes to the component

What is “this”

Log console.log(this) to be sure you’re dealing with the right object especially in callbacks and handlers. You may not be in the right context.

config.rb is the file you use to configure locations and themes for Sencha. SASS/Compass use Ruby to compile CSS. You can also set the output_style as compressed or expanded for production and development, respectively.

myapp.scss is the file you define your SASS. So define variables, import libs you’ll use and @include the components you’ll use. From there, you can define your custom rules.

Sencha has tons for variables. $base-color and $base-gradient are really cool to change theme colors across the board.

Helpful mixins include background-gradient, color-by-background, bevel-by-background and mask-by-background. The latter 3 will accept the background color and augment accordingly.

The “UI” attribute can be added to components that can allow you to customize. Buttons commonly use this to change the style of buttons (e.g. back/fwd, square, round, small, etc.). You can also customize your own buttons with a mixin as follows: @include sencha-button-ui(‘orange’,#ff8000, ‘glossy’) and to use in your component set the UI attribute to ‘orange’. Same with @include sencha-toolbar-ui and sencha-tabbar-ui.

Icons: over 300+ icons available. In SCSS use @include pictos-icon(‘refresh’) and then in the JS just use “xtype:’button’ iconCls: ‘refresh’ iconMask: true ui: drastic”.

Jamie Evans gives this excellent talk and how to use SVG, VML and HTML5 Canvas for Animation, charting and drawing.

Ext.draw.Surface renders primitives, text, images and gradients.

Ext.draw.Sprite to abstract the drawing elements and normalize differences between engine API syntax as well as do transforms and animations via Ext.fx. You can also do SpriteCompositions

Ext.draw.Component which extends Ext.Component and has engine preference via feature detection to work on any browser today. You can customize the engine pref order. Redraw is automatically taken care of for you. Performance is excellent!

xtype for chart and then set the type to the kind you want (pie, line, bar, etc.). It can do label config, special animation effects, shadow and highlighting effects, gradients, legends, callouts (tooltips on steroids) and renderers. Many customizations for each of them.

Uses cubic bezier curves for easing between animations in charting.

Printing will be supported across multiple browsers.

The demos are very visual and expressive. I highly recommend checking the slides out.

How is Mobile is changing the Web? The overriding question for this talk.

A perfect storm for HTML5, CSS3, and JS++ on new platforms like iOS, Android, and webkit. New innovation is coming from mobile browser experience itself together with very capable computing devices that are in our pockets.

Mobile should be used as an adjective instead of a noun to represent how we should treat the browser on mobile devices.

Simplest thing to do is to have a separate theme to present on mobile versus desktop.

Per the mobile evolution, things like UI and biz logic can now be run on the mobile device and syncing data sets between the device and the server. Sencha Touch does a great job at doing this, even when the user is offline.

Walkthrough of connecting WordPress with SenchaTouch to a mobile device to categorize and comment on posts:

Create a simple switching plugin

Use MVC to create app

CMS categories and posts will be modeled

Stores populated and synced with JSON

For item 1, he uses UA sniffing to see if the device iPhone and redirect to a new location that contains the Sencha Touch app. He creates a simple PHP plugin and enable in into WordPress.

For item 2, he uses a generator from cmd line to create a skeleton Sencha Touch app. He shows how it stubs out the MVC elements and tests it in a iPhone emulator to show it works.

For item 3, he shows how to create categories on the left side and the posts on the right. He does this again with the CLI to create these elements.

For item 4, he shows how we can switch the store to “ajax” and extend the PHP plugin to iterate through the data and serve that up in a JSON response.

Brian starts off with a history lesson on Western civilization. The Guttenberg press is how we came out of the dark ages but shows how knowledge is the essential component and it’s persistence and availability changes the human existence.

6 Rules for building amazing apps for the mobile and tablet:

Understand the medium: phones are about making the most of the moment and its primary function is communication — sharing your experience in real time. Tablets are about focus, consumption, simple tasks and portability over desktop computers.

Getting your data dialed: 1 out 3 projects go sideways due to BAD DATA! Content is data! There is no Design without the Data. Brian actual starts with DB modeling versus UI design to understand the data. #1 challenge with mobile experience is dealing with the “semantic web” where data can come from EVERYWHERE and is it push or pull! (See Pull). Finally, figure how to push or pull data from its source before you begin.

Be a Master of Context: See “Context of Mobile Interaction” from David Crow. Ask, how to add value to the user’s context. Requires insight into what the user is doing (PSYCH 101).

Design for the Interaction: The thing they see is the medium, the Know is the context and the do is the action they perform. Lighting is becoming more important to give the impression of 3D to emote with the user (See Norman’s Emotional Design). In Maslow’s hierarchy of needs, what need does your experience fulfill? Fulfill down to the lower level to reach level above. Affect, behavior, and cognition are aspects to consider on the response of the user to your application. Example is the “deck” in iTunes.

Focus on the Details: The future is in the details.

Allow for ample time: Forget the waterfall model and focus on a more iterative process where there’s more involvement of the designer up front but also some involvement of the developer. They will intersect and transition involvement as the project moves into development.

Brian admit’s that it feels like it’s always the first day of school — he feels he doesn’t necessarily have the answer due to the changes in this medium.

Glen Lipka from Marketo talks about how to optimize the desktop user experience in a fun presentation with lots of primates!

Get the unexpected wow when showing your app to achieve loyalty.

See Layout managers on the ExtJS docs to cover layouts. Here are some highlights to consider.

Global Nav should have maybe 4-6 components max

Use TreeNav on the left side

Use tabs to show local navigation

Show toolbar to have actions inside that tab

Canvas is the main area from the treenav actions

Aux tools are action oriented things that go on the right side

The drawer goes at the bottom to use for charting to complement stuff on the canvas

Mashup desktop and Web apps to create the Webtop application. Web = Fold. Percent of viewing time is spent on content above the fold (avoid scrolling!). Accordions are your friend for a crazy, busy form to keep it in the “fold”.

Owning UX is how you do the one thing you do well instead of how many options you have in an application.

You may have to take a few steps backward (i.e., invest in the technology) before things can get better. Get to “Global Max” island requires you to get in the ocean to get off “Local Max” island.

The Halloween Principle suggests that users are constantly distracted to spend attention on your application, even if it’s completely spelled out. He suggests that users are not being intentionally being stupid.

User research suggests that users our horrible judges of their own reality. It is better to watch and learn what a user does to understand how to create an application for them. You can’t validate an idea through a few people.

Users don’t read! They skim at best. Don’t expect them to read long instructions. You can use some tricks by using humor or making the action “fun to use” with simple demos including 1-2 minute videos.

It’s the little things that matter in your app. Lots of smaller features make a customer happy than 1 huge feature.

Ed Spencer gives a talk on the Ext 4 architecture and focuses on the data package integration in this release.

It used to be you had to configure a proxy, reader and writer. Now you define a store that has a model and proxy (with reader/writer underneath). Models define fields, associations, validations, proxy and any other biz logic you need for it to perform its functions. Stores use the model.

Example use Ext.regModel to define the model, “fields” to define the fields, and “hasMany” (and “belongsTo” to complete the relationship) to set-up the associations. Additionally, you can define validations and proxy which is pretty slick. Once you have the model, you can define this in a store and create a callback function to traverse the items in the model. Further, you can use this same model in a template to render this in a dataView.

Store now includes sorters and filters that can become “MixedCollections”. This allows you to add/remove them any time. Ext.util.Sorter and Ext.util.Filter and perform these tasks anywhere in the application.

ExtJS4 extends proxies to include RestProxy on the server-side and WebStorageProxy and WebSqlProxy on the client-side. The latter two will manage this in persistent local storage. WebSqlProxy allows for full relational access to the data.

Ext.data.Operation mediates between a store and a proxy for CRUD operations. Ext.data.Batch allows you to combine operations into a single request.

Post navigation

Hi, I'm a Solutions Architect for a major Telecom company. I design and develop software solutions leveraging several Java and JavaScript based platforms including ExtJS, Node.js, Spring, etc. I am also experienced using relational and NoSQL database solutions like MongoDB. I help evangelize Rich Internet Applications and open source technologies in Web application development, Web services, search, and developer collaboration. I graduated from the University of Michigan with a M.S. in Computer Science.
Note these views are my personal views and do not necessarily reflect the views of my employer. All code on this site is licensed under BSD.