SenchaCon_2013

8/17/2019 SenchaCon_2013

1/32

© 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribut ion in whole or part without epress written per!ission is prohibited.

SenchaCon 2013 Presentations Recap

8/17/2019 SenchaCon_2013

2/32

2 © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

What is Sencha?

& 'eveloper o( the )t*+ (ra!ewor )t*+ uses -T/" and *avascript to deliver dna!ic web pages

2 !illion +encha developers worldwide ra!ewor includes Touch architecture (or !obile technologies

& 3usto!ers include4 I5, +on )ricsson, icroso(t, -6,'irecT7, -itachi, 3anon& Applications include +encha Architect, +encha Touch, +encha

3'

& A TriNet 3lient since 8ctober 20109

8/17/2019 SenchaCon_2013

3/32

$ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

What is SenchaCon?

Technology conference held annually& This ear, over %0 technical sessions highlighting4

6roduct bootca!ps

New product previews

Top speaers (ro! industr leaders currentl using +enchaplat(or!s

5est practices Access to +encha develop!ent tea! (or deeper and better

understanding o( product !ethodolog and (uture direction

8/17/2019 SenchaCon_2013

4/32

: © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

+encha3on ;enote ;ico((

8/17/2019 SenchaCon_2013

5/32

" © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

Keynote Kickoff

& 8nline courses will soon be available through +tan(ord online,3oursera, ed

8/17/2019 SenchaCon_2013

6/32

% © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

A!ericans with 'isabilities Act and Accessible Rich Internet Applications

+upport>A'A # ARIA?

8/17/2019 SenchaCon_2013

7/32

@ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

! " R# Support$ericans %ith !isa&ilities ct " ccessi&le Rich #nternet pplications

'(t)S *+2 offer functionality, up to de-eloper to i$ple$ent& ARIA (eatures !ust be enabled to leverage& ull eboard navigation support

3ontains eboard !ap >up, down, le(t, right, enter, etc?

& -igh contrast !ode the!e4 etariathe!e& ocus anage!ent 3ontrols which co!ponents can receive (ocus

& +o!e browsers do not support A'A co!pliance >e.g. I)%?

8/17/2019 SenchaCon_2013

8/32

8/17/2019 SenchaCon_2013

9/32

F © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

! " R# Support . !e- Continued$ericans %ith !isa&ilities ct " ccessi&le Rich #nternet pplications

& )t*+ restrictions without ARIA +upport turned on& +creen (ocus at ti!es hard to deter!ine

& 6age content !a not read properl, screen readers do haverestrictions that developers need to wor around

& nable to use the eboard to get into grids

& Need )t*+ :.2.1 in order to use the accessibilit (eatures& http4##docs.sencha.co!#et=s#:.2.1#H9#guide#accessibilit

& -igh contrast !ode is the A'A#ARIA area that still needs the!ost help

& There are no tags that can be used to give the screen readerspecial instructions

& Eould be etre!el help(ul (or developers to read *AE+docu!entation when developing (or A'A#ARIA co!pliance

http://docs.sencha.com/extjs/4.2.1/#!/guide/accessibilityhttp://docs.sencha.com/extjs/4.2.1/#!/guide/accessibilityhttp://docs.sencha.com/extjs/4.2.1/#!/guide/accessibility

8/17/2019 SenchaCon_2013

10/32


8pti!iing )t*+ Application 6er(or!ance

8/17/2019 SenchaCon_2013

11/32


/pti$iing '(t)S

pplication Perfor$ance

What slo%s do%n the app?& Networ /atenc& *avascript )ecution& /aout Activit

8/17/2019 SenchaCon_2013

12/32


pplication Perfor$ance .

et%ork atency

Suggestion to use Sencha Co$$and& 3oncatenates all reDuired *avascript into allclasses.=s& ini(ies code& se +encha App 5uild

& sing this !ethod de!onstrated to tae a page load (ro! :."seconds to under hal( a second

8/17/2019 SenchaCon_2013

13/32

1$ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%


)a-ascript '(ecution

& Avoid older and badl written *+ engines& 8pti!ie code which is repeated& ove invariant epressions out o( loops& I( a (unction onl per(or!s its (unctionalit under so!e

condition, test that condition outside the call& +etup and teardown o( a call (ra!e is slow on bad *+ engines& +uggestions

/ail instantiate ite!sJ Add ite!s o( unrendered co!ponents >e.g. tabs? =ust be(ore the

are rendered se 6ageAnaler4 )t=s#ea!ples#pageanaler#pageanaler.ht!l

J Anales !ethod calls o( selected classes

J +tart 3hro!e with K enablebench!aring (or !icrosecond ti!e!easure!ent accurac

8/17/2019 SenchaCon_2013

14/32

1: © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%


ayout cti-ity

pdate views e((icientl& 7iews >grids and trees? are updated in response to store events. Lou

can suspend this update until all processing is co!plete4

M

)t.suspend/aouts>?

##batch o( updates

)t.resu!e/aouts>true?

O

At +tartup

& )!bed initialiation data as an ob=ect literal in the inde page& 3on(igure the entire initial laout in one shot using the data& 'o not !ae !ultiple A=a reDuests and build the laout in response

8/17/2019 SenchaCon_2013

15/32

8/17/2019 SenchaCon_2013

16/32

1% © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%


ayout cti-ity . Pure4acts '(a$ple

& 3o!pan4 6ureacts inancial +olutions& 3ode utilies (ile weaving and bundling& *avascript opti!ier

Reads the !ani(ests

5uilds a result *+ (ile

& ethod wors (or language (iles and I custo!iations +a!e strateg used (or a roles based I

a=or issue to overco!e K the 12 e where a savv end user can change data,(lip (lags, etc

& Applications setup to render data on tabs when the (ocus is on the tab ultiple tabs can be presented on page, but not all data needs to be loaded

initiall 8nce tab has been loaded, the data stas in cache K !aes tabbing bac and

(orth (ast and e((icient

8/17/2019 SenchaCon_2013

17/32

1@ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

Turbo 3harge Grids

8/17/2019 SenchaCon_2013

18/32

1B © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

Tur&o Charge 5rids

What slo%s grids do%n?& A*A< latenc

& Arras are !ore co!pact than *+8N representation >ea!plegiven was a 25 vs %00 (ile sie di((erence?

& 'ata changes 'ata changes cause grid laout changes

8/17/2019 SenchaCon_2013

19/32

1F © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

Tur&o Charge 5rids /ptions

& 5u((ered Rendering& ses a regular, (ull loaded store, not a bu((ered store& 6lugin !onitors scroll position and ensures the correct rows are in view

& Lou can set the nu!ber o( rows to be in Dueue (or rendering >when ou scrolldown?

& Lou can set the nu!ber or rows to eep in histor >when ou scroll bac up?

& Nothing special to set with the store, itCs editable and wors with all plugins& reDuenc o( updates is reduced

& 5u((ered +tores A bu((ered store is a sparse cache o( pages o( an etre!el large dataset

sing a bu((ered store auto!aticall uses the bu((ered renderer plugin

8nl the pages the view visits are read into the client

+toreCs search A6ICs are not that use(ul when +tore is bu((ered

8/17/2019 SenchaCon_2013

20/32


Tur&o Charge 5rids . /ptions Cont+

& 3ache anage!ent purge6age3ount deter!ines how !an old pages can be le(t in the cache outside

o( the trailingviewingleading one.

+etting the leading5u((erSone to an etre!el large value then will load the entiredataset

& +election anage!ent

3on(igure the selodel with pruneRe!oved4(alse so that the selection surviviescache purge

8/17/2019 SenchaCon_2013

21/32


Tur&o Charge 5rids . Co$ing Soon

Gadgets K (lweight co!ponents& 8ne instance can produce rendering !arup !an ti!es& -olds no re(erences& Attaches to the resulting '8 onl upon certain events >!ouseover, clic,

etc?

& Rapid pdates& )ver call to record.set>? updates the grid& )t.grid.plugin.3ellpdating

& ses new optional inter(ace o( colu!n updater which is passed an eisting cell tochange

& 'oes not do an )t*+ laout which !eans that the data update should not change

the sie o( the table

& throttlepdate4 true& pdates to throttled views are Dueued in a single Dueue

& lushed at a con(igurable (ra!es per second

8/17/2019 SenchaCon_2013

22/32


The!ing#+tling

8/17/2019 SenchaCon_2013

23/32

2$ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

The$ing"Styling

)t*s the!ing taes advantage o( the +A++ (ra!ewor that is

an etension o( 3++$ (unctionalitIncluded options (or use4& 7ariables

se(ul when sa!e 3++ code is to be used in !ultiple places

& Nesting Allows the nesting o( selectors within one another. This also wors with properties

& iins Allow ou to reuse whold chuns o( 3++, properties, or selectors

Lou can pass !iins argu!ents

& +elector Inheritance

Allows one selector to inherit all the stles o( another without rewriting the 3++properties

& unctions >used !ostl internall at +encha?

8/17/2019 SenchaCon_2013

24/32

8/17/2019 SenchaCon_2013

25/32

2" © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

The$ing"Styling . '(a$ples Continued

7i(ins Selector #nheritance

.scss 3++ .scss 3++W!iin tablebase M th M tetalign4 center (ontweight4 bold O td, th Mpadding4 2pOO

W!iin le(t>dist? M (loat4 le(t !arginle(t4 distO

Hdata M Winclude le(t>10p? Winclude tablebaseO

#V 3++ V#

Hdata M (loat4 le(t !arginle(t4 10pOHdata th M

tetalign4 center (ontweight4 boldOHdata td, Hdata th M padding4 2pO

.error M border4 1p H(00 bacground4 H(ddO.error.intrusion M (ontsie4 1.$e! (ontweight4 bold

O

.bad)rror M Wetend .error borderwidth4 $pO

#V 3++ V#

.error, .bad)rror M border4 1p H(00 bacground4 H(ddO

.error.intrusion,.bad)rror.intrusion M (ontsie4 1.$e! (ontweight4 boldO

.bad)rror M borderwidth4 $pO

8/17/2019 SenchaCon_2013

26/32

2% © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

The$ing"Styling . dditional otes

& +encha 3' will have a new (eature K +encha app watch Ehen ou run this (ro! our pro=ect director, it will watch our code (or changesthat reDuire a reco!pile and will reco!pile the! auto!aticall

& Ehen displaing ele!ents net to each other, !ae sure the are the sa!eheight

& ost changes to stoc the!e are !ade in the sass#var director o( our

pro=ect 3reate 3o!ponent.scss >can create global variables in this director, as soon as

ou save, ou will see the! update on the page upon re(resh

& +ections listed below will be pulled in auto!aticall i( ou have a (ile na!edthe sa!e in our pro=ect director

or! J ield J5ase.scss is where all the di!ensions (or (or! (ields would beset

or! J i!ages is where all i!ages are used b our app (or a (or!. Ehen itco!piles, it copies the! into the pro=ect

8/17/2019 SenchaCon_2013

27/32

2@ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

uture 6roduct 'iscussions

P d t # t d ti

8/17/2019 SenchaCon_2013

28/32

2B © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

e% Product #ntroduction .

Sencha Space

& A secure and !anaged environ!ent (or business applications& 'eplo!ent plat(or! (or -T/" Apps& Allows (or deplo!ent and !anage!ent o( aps& 'ata securit K easil !anage which users have access to

which apps and what data within apps

& 6rovision sers& 3reate Groups& Allows (or app to app integration

8/17/2019 SenchaCon_2013

29/32

2F © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

Additional 3on(erence Notes

8/17/2019 SenchaCon_2013

30/32

$$ © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

Additional Resources

8/17/2019 SenchaCon_2013

31/32

$: © 2012 TriNet Group, Inc. All rights reserved. Reproduction or distribution in whole or part without epress written per!ission is prohibited. "#$#1%

dditional Resources

&+encha3on on github

https4##github.co!#senchalabs#+encha3on201$

& Getting +tarted in )t*+ :.2.1 http4##docs.sencha.co!#et=s#:.2.1#H9#guide#gettingXstarted

& +ection "0B >A'A? and ARIA +upport http4##docs.sencha.co!#et=s#:.2.1#H9#guide#accessibilit

&)a!ples

http4##docs.sencha.co!#et=s#:.2.1#H9#ea!ple

& +encha +pace http4##www.sencha.co!#products#space#(eatures#

& Additional +ench3on 201$ Resources http4##sc1$live.sencha.co!#

& *AE+ >I thin weCre going to need a bigger boat? http4##www.(reedo!scienti(ic.co!#products#(s#=awsproductpage.asp

& +ass http4##sasslang.co!#

8/17/2019 SenchaCon_2013

32/32

$" © 2012 TriNet Group Inc All rights reserved Reproduction or distribution in whole or part without epress written per!ission is prohibited "#$#1%

dditional Resources Continued

&Global 3++ in(or!ation

http4##docs.sencha.co!#et=s#:.2.1#H9#api#GlobalX3++

& 6ureacts inancial +olutions http4##www.lndev.co!#

& +encha ;itchen +in )a!ples http4##

sc1$live.sencha.co!#et=s.net#itchensinetthe!eneptune#inde.ht!lHbasicpanels

& 5rowser co!parison http4##www.dnet.co!#thebigbrowserbench!ar=anuar201$edition@00000F@@%#

SenchaCon_2013

Documents