community code: clicktime
DESCRIPTION
“How To Create 1000 ExtJS UI Controls. Fast”. So your business requirements necessitate putting a ton of UI controls on a single page? Sure, you say, but there’s going to be a performance hit. Not so! We recently ran into this issue at ClickTime and were able to achieve the desired user experience without sacrificing speed. In this session, Allen will show you how to scale the hell out of the number of controls on a page while keeping your load times fast and your overall performance nice and zippy, even in older browsers.Allen Liu is a lead application developer at ClickTime. For the past three years, with his undeniable passion for JavaScript and other web technologies, he and his team are proud to have created one of the most sophisticated and visually pleasing time and expense reporting websites on the market today. Prior to joining ClickTime, Allen was a senior application developer for a large retail IT department and a global consulting company. He is currently spending his free time exploring NodeJS and creating the “most awesomest” wedding website for his fiancée.TRANSCRIPT
PRACTICAL EXTJSTIPS AND TRICKS
Techniques and hacks that saved my day
Allen Liu Oct 25, 2011
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Agenda
About Allen Liu About ClickTime How we use ExtJS Tip: Scope Control Trick: Performance hacks Q & A
2
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Allen Liu (badallen)
3
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
About Allen Liu (badallen)…
Lead Developer @ ClickTime Loves Dogs & JavaScript Background:
IT for global retailer
Major consulting !rm
4
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime… SaaS
Web timesheet and expense reporting
Founded in 1999
Customers in 54 countries Small Business and
Fortune 500
Located in San Francisco
5
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime…
Agile Development C#, JavaScript, MSSQL n-tier architecture
6
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime…
MS SQL
Middle Tier (C#)
ASP.NET (C#) Web Services
Client BrowserJavaScript
7
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime
Why we chose Ext JS Started with Ext 2.x
2 projects written with Sencha frameworks. ClickTime Web Timesheet (Ext JS 3.x)
ClickTime Mobile Time & Expense (Sencha Touch)
ClickTime ExtJS Demo
8
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc. 9
Tip: Scope Control in Custom Components
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Tip: Scope Control in Custom Components
Ext JS Out-Of-The-Box UI Components are great Extending components is a great way to add
custom functionality
We use CLOSURE to control the scope
10
Wednesday, November 2, 11
start of the function
end of the functionfunction execution
private static members
private instance members
instance public members
Wednesday, November 2, 11
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Trick:
13
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Trick: Performance Gains through Deception Our dev team needed to create a time entry
page.
14
Wednesday, November 2, 11
ComboBox ComboBox ComboBox Button Text fields Custom field
Row Component
Panel 1
Panel 2
Wednesday, November 2, 11
There could be ….
1000+ Components !!!!
REDRUM!!!!!!
However, we would soon realize…
Wednesday, November 2, 11
Not Good9784 ms
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
A simple question…
How do you create hundreds or thousands of Ext JS UI Components?
18
Wednesday, November 2, 11
You Don’t.
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Let me ask again…
What if you MUST create hundreds or thousands of Ext JS UI Components?
20
You fake it.
Wednesday, November 2, 11
This is an illusion…
Not Actual Comboboxes
Not Actual Text Fields
Not Actual buttons(hidden) Singleton Combo box
Get value from the underlying record of the grid to the (not hidden) combo box
Set value to the underlying record of the grid from the (hidden) combo box
Grid Panel (using CSS to have each cells looking like
controls)
Column Cell Click Event
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Ways to fake controls:
EditorGridPanel○ Use CSS to style each cell○ Only works with Ext.form.Field components
GridPanel (what we use) ○ Use CSS style each cell○ Give Ext.grid.Column a hidden singleton object
that can be any Ext component○ Position and show the hidden singleton object
when users click on the matching grid panel cell
22
Wednesday, November 2, 11
Live DemoGood UI, Fast UI
Let me show you how we lie.
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Summary Use EditorGridPanel is possible, otherwise… Use Ext.grid.Column object to fake UI components.
Create a singleton UI component and its related functions (bind/unbind) at Column’s “initComponent()” function.
Use HTML/CSS to fake the cells to look like the actual UI components at Column’s “renderer()” function.
Bind the singleton at Column’s “processEvent()” function.
Unbind the singleton at its “blur” event.
Wednesday, November 2, 11
<shameless plug>
Sign up for free demo at: www.clicktime.com
Send resumes to: [email protected]
</shameless plug>
Wednesday, November 2, 11
Demo Source Code and Slide: www.clicktime.com/SenchaCon/2011.zip
Contact Info: [email protected]
www.twitter.com/badallentweets
Wednesday, November 2, 11
Thank you.
Go AL West!on my fantasy team!
Wednesday, November 2, 11
Q & A
Wednesday, November 2, 11