Community Code: ClickTime
Upcoming SlideShare
Loading in...5
×
 

Community Code: ClickTime

on

  • 1,537 views

“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. ...

“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.

Statistics

Views

Total Views
1,537
Views on SlideShare
1,442
Embed Views
95

Actions

Likes
1
Downloads
38
Comments
0

2 Embeds 95

http://www.sencha.com 92
http://sencha.site 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Community Code: ClickTime Community Code: ClickTime Presentation Transcript

  • PRACTICAL EXTJS TIPS AND TRICKS Techniques and hacks that saved my day Allen Liu Oct 25, 2011Wednesday, November 2, 11
  • Agenda  About Allen Liu  About ClickTime  How we use ExtJS  Tip: Scope Control  Trick: Performance hacks  Q&A October 25, 2011 © 2011 Clicktime.com, Inc. 2Wednesday, November 2, 11
  • Allen Liu (badallen) October 25, 2011 © 2011 Clicktime.com, Inc. 3Wednesday, November 2, 11
  • About Allen Liu (badallen)…  Lead Developer @ ClickTime  Loves Dogs & JavaScript  Background:  IT for global retailer  Major consulting rm October 25, 2011 © 2011 Clicktime.com, Inc. 4Wednesday, November 2, 11
  • About ClickTime…  SaaS  Web timesheet and expense reporting  Founded in 1999  Customers in 54 countries  Small Business and Fortune 500  Located in San Francisco October 25, 2011 © 2011 Clicktime.com, Inc. 5Wednesday, November 2, 11
  • About ClickTime…  Agile Development  C#, JavaScript, MSSQL  n-tier architecture October 25, 2011 © 2011 Clicktime.com, Inc. 6Wednesday, November 2, 11
  • About ClickTime… Client Browser JavaScript ASP.NET (C#) Web Services Middle Tier (C#) MS SQL October 25, 2011 © 2011 Clicktime.com, Inc. 7Wednesday, November 2, 11
  • 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 October 25, 2011 © 2011 Clicktime.com, Inc. 8Wednesday, November 2, 11
  • Tip: Scope Control in Custom Components October 25, 2011 © 2011 Clicktime.com, Inc. 9Wednesday, November 2, 11
  • 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 October 25, 2011 © 2011 Clicktime.com, Inc. 10Wednesday, November 2, 11
  • start of the function private static members private instance members instance public members function execution end of the functionWednesday, November 2, 11
  • Wednesday, November 2, 11
  • Trick: October 25, 2011 © 2011 Clicktime.com, Inc. 13Wednesday, November 2, 11
  • Trick: Performance Gains through Deception  Our dev team needed to create a time entry page. October 25, 2011 © 2011 Clicktime.com, Inc. 14Wednesday, November 2, 11
  • ComboBox ComboBox ComboBox Button Text fields Custom field Panel 1 Row Component Panel 2Wednesday, November 2, 11
  • However, we would soon realize… . e … s !!!! d b ent co ul h ere mp on T Co 00 0+ 1 !! !!!! DR UM REWednesday, November 2, 11
  • 9784 Not Good msWednesday, November 2, 11
  • A simple question…  How do you create hundreds or thousands of Ext JS UI Components? October 25, 2011 © 2011 Clicktime.com, Inc. 18Wednesday, November 2, 11
  • You Don’t.Wednesday, November 2, 11
  • Let me ask again…  What if you MUST create hundreds or thousands of Ext JS UI Components? You fake it. October 25, 2011 © 2011 Clicktime.com, Inc. 20Wednesday, November 2, 11
  • This is an illusion… Not Actual Comboboxes(hidden) Singleton Not Actual buttons Column Cell Click EventCombo box Grid Panel (using CSS to have each cells looking like controls) Set value to the underlying record of the gridgrid to the Get value from the underlying record of the from the (hidden) combo box box (not hidden) combo Not Actual Text FieldsWednesday, November 2, 11
  • 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 October 25, 2011 © 2011 Clicktime.com, Inc. 22Wednesday, November 2, 11
  • Good UI, Fast UI Let me show you how we lie. Live DemoWednesday, November 2, 11
  • 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. October 25, 2011 © 2011 Clicktime.com, Inc.Wednesday, November 2, 11
  • <shameless plug> Sign up for free demo at: www.clicktime.com Send resumes to: jobs@clicktime.com </shameless plug>Wednesday, November 2, 11
  • Demo Source Code and Slide: www.clicktime.com/SenchaCon/2011.zip Contact Info: allen@clicktime.com www.twitter.com/badallentweetsWednesday, November 2, 11
  • Thank you. Go AL West! on my fantasy team!Wednesday, November 2, 11
  • Q&AWednesday, November 2, 11