SlideShare ist ein Scribd-Unternehmen logo
1 von 59
Downloaden Sie, um offline zu lesen
Ext JS classes and Scoping
Agenda
• Get   back to the basics!
 • Master    references (variables and object keys)
• Learn   about the new class system
 • Ext.class.Base

 • Explore   Mixins
 • Ext.Loader
What have I been up to?
• Bootstrapping   a new company, Modus Create

 • Focusing on architecting and building kick-ass Ext JS and
   Sencha Touch apps!

 • Regionaland open training on Advanced JavaScript, Ext JS 4
   and Sencha Touch

 • Rapidly  expanding and looking for experienced
   developers (Sencha Touch and Ext JS)

• http://moduscreate.com
On the book front...
• Earlyaccess to Sencha Touch
 in Action available.
• Chapters 1-3 being
 distributed
• Chapter 7 is next to be
 published
• Chapter4 will be published in
 about 2 weeks
• Chapters
         5 and 6 are being
 worked on
On the book front...
• Codefor Chapter 1 is being
 worked on.

• Expect TOC   revisions to cover
 the latest changes to Ext JS



• Anyoneinterested in working
 with me on this project?
References



A “variable” reference is a pointer
to a chunk of memory where some
value or object is stored.
References


• Stop    saying “variable”!
• Use   the word “reference”
 • It   will remind you of what it really is - a pointer!
 • We     will use this word from now on
Global references
•   If not scoped with the var keyword, they are treated as globals




•   This is dangerous!

    •   The only globally scoped reference that is sanctioned is a
        namespace.

•   Always lexically scope your references with the var keyword.
Naming convention
• Reference names should start with a lower case unless it
 points to a Class (constructor or singleton).
References

• Because JavaScript is
 loosely typed,
 references can be
 repointed from one
 type of value to
 another.

• Thisis where
 “variable” comes
 from.
References

• When   one reference
 is assigned from
 another, they both
 point to the same
 value.

• Thisassignment
 does not result in
 assignment chaining!
Know thy references!
References to the same object
References to the same object
Pointing to other object
       members
No value chaining!
Passing objects as references
Defining Functions

• Functions   are first class objects

 • They     have properties and methods

 • They     extend from Object

 • They     inherit from Function.prototype

   • call   and apply methods are inherited
Know “this"

• In   JavaScript, “this” is a magic reference

  • It   is set upon execution of a function and is accessible inside
       that function

  • “this” defines    the execution scope

• Understanding “this” is    very important.
Execution scope defined

• When  a function is executed via a var
reference, the default execution context
(“this”) is “window”.
• When a function is executed via an object
key, the execution context (“this”) is the
object for which the key belongs.
Default execution for “var”
         functions
Default execution for object-
      based functions
What is the execution scope for
          getName()?
Execution scope defined

• When  a function is executed via a var
reference, the default execution context
(“this”) is “window”.
• When a function is executed via an object
key, the execution context (“this”) is the
object for which the key belongs.
What is the execution scope for
          getName()?
It’s easy to mix and match...
What is the default execution
scope for person2.getName()?
Forcing scope execution



• call   and apply can be used to force scope execution.

• Inother words, you have full control over the execution scope
 of any function in JavaScript.
Take this code...
using getName.call();
Take this code...
Execute person2.getName();
Function.call

  A good means to forcing execution scope
      but has one major limitation.

  You absolutely have to define all of the
arguments, which can become a management
          nightmare for refactors!
Function.apply to the rescue


  Function.apply allows you to force
execution scope, but you pass on a list
     of arguments or an array.
Take this code...
Execute person2.getName();
How constructors work
Objects == root?
• Object is the base “class” for just about everything inside of
 JavaScript.

• Just
     about all of the values that you code and interact with
 extend from Object.

• Strings, Arrays, Functions,etc

• Usingthe DOM API method document.getElementByID
 returns an element reference that ultimately extends Object.
Constructors


• All   objects are initialized with constructors

• Constructorsare nothing more than a function that is
 executed within the scope of a new Object

  • It’s   that simple!
Take this code, for example:
Constructors


• Atthis point, this is a
 normal function.

• Notice   the argument.

• What will happen if we
 execute Person(‘Jay’);?
Constructors



• What   if...?
Know when to use new?
• When    the new
  operator is placed
  in front of an
  method, that
  method is treated
  as a “constructor”.

• Else, it’s
          treated as a
  generic function.
Prototype == reusability


• A “prototype” isan object that is more or less a blue print for
 future instances of an object

  • Itallows JavaScript to “stamp out” instances of an object that
    inherit the same properties
A prototype in action
Ext JS 4.0 Class System

• Completely   revised from 3.0
• No    use for the “new” keyword
• Use   Ext.create
Ext.Base features
• Automatic     Namespace management
• Statics    support
• Mixin   Support
• Built-in   override/extension methods
• Plays   nicely with the dynamic class Loader system
• Alternate    class name (good for deprecation management)
Creating a class:
The Ext.define pattern
                     Overrides       Callback
 Namespaced
                  object (methods    method
class reference
                    properties)     (optional)
Ext.define example
Auto-generated setters/getters
                      Setters and getters
                       auto-generated!




                Use auto-generated
                     setters!
Ext JS 4 Class statics

• Providesscope-independent
 access to static members.

• Applied    before constructor is
 called
Statics example
           Configure statics



                Access statics
Ext JS 4 Class Mixin support
• Provides   a means for extremely easy multiple inheritance

                             Ext.Base


                  Mixin                  Mixin


                             MyClass
Example Mixin class #1
Example Mixin class #2
Implementing the Mixins

Mixin instances
Identifying the cross inheritance



Members from
 DrivingMixin
Identifying the cross inheritance



Members from
PilotingMixin
Exercising the mixins
 Output from
PilostingMixin




Output from
DrivingMixin

Más contenido relacionado

Was ist angesagt?

Actors and Threads
Actors and ThreadsActors and Threads
Actors and Threadsmperham
 
Introduction to Actor Model and Akka
Introduction to Actor Model and AkkaIntroduction to Actor Model and Akka
Introduction to Actor Model and AkkaYung-Lin Ho
 
What To Leave Implicit
What To Leave ImplicitWhat To Leave Implicit
What To Leave ImplicitMartin Odersky
 
Ruby Interview Questions
Ruby Interview QuestionsRuby Interview Questions
Ruby Interview QuestionsSumanth krishna
 
Actor model : A Different Concurrency Approach
Actor model : A Different Concurrency ApproachActor model : A Different Concurrency Approach
Actor model : A Different Concurrency ApproachEmre Akış
 
Java Building Blocks
Java Building BlocksJava Building Blocks
Java Building BlocksCate Huston
 
2 BytesC++ course_2014_c6_ constructors and other tools
2 BytesC++ course_2014_c6_ constructors and other tools2 BytesC++ course_2014_c6_ constructors and other tools
2 BytesC++ course_2014_c6_ constructors and other toolskinan keshkeh
 
2 the essentials of effective java
2 the essentials of effective java2 the essentials of effective java
2 the essentials of effective javaHonnix Liang
 
The Actor Model - Towards Better Concurrency
The Actor Model - Towards Better ConcurrencyThe Actor Model - Towards Better Concurrency
The Actor Model - Towards Better ConcurrencyDror Bereznitsky
 
What To Leave Implicit
What To Leave ImplicitWhat To Leave Implicit
What To Leave ImplicitMartin Odersky
 
Lock-free algorithms for Kotlin Coroutines
Lock-free algorithms for Kotlin CoroutinesLock-free algorithms for Kotlin Coroutines
Lock-free algorithms for Kotlin CoroutinesRoman Elizarov
 
Scala, Play 2.0 & Cloud Foundry
Scala, Play 2.0 & Cloud FoundryScala, Play 2.0 & Cloud Foundry
Scala, Play 2.0 & Cloud FoundryPray Desai
 
Executable specifications for xtext
Executable specifications for xtextExecutable specifications for xtext
Executable specifications for xtextmeysholdt
 
Javascript omg!
Javascript omg!Javascript omg!
Javascript omg!bwullems
 
A gentle introduction into AKKA and the actor model
A gentle introduction into AKKA and the actor modelA gentle introduction into AKKA and the actor model
A gentle introduction into AKKA and the actor modelMykhailo Kotsur
 

Was ist angesagt? (20)

Actors and Threads
Actors and ThreadsActors and Threads
Actors and Threads
 
Introduction to Actor Model and Akka
Introduction to Actor Model and AkkaIntroduction to Actor Model and Akka
Introduction to Actor Model and Akka
 
Simplicitly
SimplicitlySimplicitly
Simplicitly
 
What To Leave Implicit
What To Leave ImplicitWhat To Leave Implicit
What To Leave Implicit
 
Akka Actors
Akka ActorsAkka Actors
Akka Actors
 
Ruby Interview Questions
Ruby Interview QuestionsRuby Interview Questions
Ruby Interview Questions
 
Javasession8
Javasession8Javasession8
Javasession8
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
Actor model : A Different Concurrency Approach
Actor model : A Different Concurrency ApproachActor model : A Different Concurrency Approach
Actor model : A Different Concurrency Approach
 
Java Building Blocks
Java Building BlocksJava Building Blocks
Java Building Blocks
 
2 BytesC++ course_2014_c6_ constructors and other tools
2 BytesC++ course_2014_c6_ constructors and other tools2 BytesC++ course_2014_c6_ constructors and other tools
2 BytesC++ course_2014_c6_ constructors and other tools
 
2 the essentials of effective java
2 the essentials of effective java2 the essentials of effective java
2 the essentials of effective java
 
The Actor Model - Towards Better Concurrency
The Actor Model - Towards Better ConcurrencyThe Actor Model - Towards Better Concurrency
The Actor Model - Towards Better Concurrency
 
What To Leave Implicit
What To Leave ImplicitWhat To Leave Implicit
What To Leave Implicit
 
Lock-free algorithms for Kotlin Coroutines
Lock-free algorithms for Kotlin CoroutinesLock-free algorithms for Kotlin Coroutines
Lock-free algorithms for Kotlin Coroutines
 
Scala, Play 2.0 & Cloud Foundry
Scala, Play 2.0 & Cloud FoundryScala, Play 2.0 & Cloud Foundry
Scala, Play 2.0 & Cloud Foundry
 
Executable specifications for xtext
Executable specifications for xtextExecutable specifications for xtext
Executable specifications for xtext
 
Javascript omg!
Javascript omg!Javascript omg!
Javascript omg!
 
A gentle introduction into AKKA and the actor model
A gentle introduction into AKKA and the actor modelA gentle introduction into AKKA and the actor model
A gentle introduction into AKKA and the actor model
 
Akka framework
Akka frameworkAkka framework
Akka framework
 

Andere mochten auch

Oakwood Premier Pune
Oakwood Premier PuneOakwood Premier Pune
Oakwood Premier Puneanil-chavan
 
Curs Adobe Photoshop CS5 incepatori - 00 - Curs introductiv
Curs Adobe Photoshop CS5  incepatori - 00 - Curs introductivCurs Adobe Photoshop CS5  incepatori - 00 - Curs introductiv
Curs Adobe Photoshop CS5 incepatori - 00 - Curs introductivCursurile Varilogic
 
Vibe headline benefits 0411
Vibe headline benefits 0411Vibe headline benefits 0411
Vibe headline benefits 0411Robbie Graham
 
Hệ thống ngân hàng thương mại việt nam và những vấn đề đặt ra
Hệ thống ngân hàng thương mại việt nam và những vấn đề đặt raHệ thống ngân hàng thương mại việt nam và những vấn đề đặt ra
Hệ thống ngân hàng thương mại việt nam và những vấn đề đặt raAskSock Ngô Quang Đạo
 
Local Undocumented Migration Policy in the Municipality of Utrecht
Local Undocumented Migration Policy in the Municipality of UtrechtLocal Undocumented Migration Policy in the Municipality of Utrecht
Local Undocumented Migration Policy in the Municipality of UtrechtThomas Jézéquel
 
SenchaCon: Sencha Touch Custom Components
SenchaCon: Sencha Touch Custom Components SenchaCon: Sencha Touch Custom Components
SenchaCon: Sencha Touch Custom Components Patrick Sheridan
 
LA ATENCION
LA ATENCIONLA ATENCION
LA ATENCIONCSG
 
2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland
2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland
2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, MarylandJerry's Mitsubishi
 
Key features of budget 2011 2012
Key features of budget 2011 2012Key features of budget 2011 2012
Key features of budget 2011 2012Prakash Somani
 
Xac dinh phong cach dam phan
Xac dinh phong cach dam phanXac dinh phong cach dam phan
Xac dinh phong cach dam phanAllen Walker
 
SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch Patrick Sheridan
 
2014 Mitsubishi Outlander Sport in Baltimore, Maryland
2014 Mitsubishi Outlander Sport in Baltimore, Maryland2014 Mitsubishi Outlander Sport in Baltimore, Maryland
2014 Mitsubishi Outlander Sport in Baltimore, MarylandJerry's Mitsubishi
 
The China Analyst March 2011
The China Analyst   March 2011The China Analyst   March 2011
The China Analyst March 2011Barryvanwyk
 
Concept note jmdi eurocities - milano-tampere worksop
Concept note jmdi   eurocities - milano-tampere worksopConcept note jmdi   eurocities - milano-tampere worksop
Concept note jmdi eurocities - milano-tampere worksopThomas Jézéquel
 
2013 09.9 urbact network workshop compressed
2013 09.9 urbact network workshop compressed2013 09.9 urbact network workshop compressed
2013 09.9 urbact network workshop compressedThomas Jézéquel
 

Andere mochten auch (20)

Risiko
RisikoRisiko
Risiko
 
Oakwood Premier Pune
Oakwood Premier PuneOakwood Premier Pune
Oakwood Premier Pune
 
Curs Adobe Photoshop CS5 incepatori - 00 - Curs introductiv
Curs Adobe Photoshop CS5  incepatori - 00 - Curs introductivCurs Adobe Photoshop CS5  incepatori - 00 - Curs introductiv
Curs Adobe Photoshop CS5 incepatori - 00 - Curs introductiv
 
Vibe headline benefits 0411
Vibe headline benefits 0411Vibe headline benefits 0411
Vibe headline benefits 0411
 
Hệ thống ngân hàng thương mại việt nam và những vấn đề đặt ra
Hệ thống ngân hàng thương mại việt nam và những vấn đề đặt raHệ thống ngân hàng thương mại việt nam và những vấn đề đặt ra
Hệ thống ngân hàng thương mại việt nam và những vấn đề đặt ra
 
Presentatie QS graphics
Presentatie QS graphicsPresentatie QS graphics
Presentatie QS graphics
 
Intro to sencha touch 2
Intro to sencha touch 2Intro to sencha touch 2
Intro to sencha touch 2
 
Inforln.com ERP LN 10.3 & 10.4 Configurable Contract Deliverables Enhancements
Inforln.com ERP LN 10.3 & 10.4 Configurable Contract Deliverables EnhancementsInforln.com ERP LN 10.3 & 10.4 Configurable Contract Deliverables Enhancements
Inforln.com ERP LN 10.3 & 10.4 Configurable Contract Deliverables Enhancements
 
Local Undocumented Migration Policy in the Municipality of Utrecht
Local Undocumented Migration Policy in the Municipality of UtrechtLocal Undocumented Migration Policy in the Municipality of Utrecht
Local Undocumented Migration Policy in the Municipality of Utrecht
 
SenchaCon: Sencha Touch Custom Components
SenchaCon: Sencha Touch Custom Components SenchaCon: Sencha Touch Custom Components
SenchaCon: Sencha Touch Custom Components
 
LA ATENCION
LA ATENCIONLA ATENCION
LA ATENCION
 
2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland
2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland
2013 Mitsubishi Outlander at Jerry's Mitsubishi in Baltimore, Maryland
 
Key features of budget 2011 2012
Key features of budget 2011 2012Key features of budget 2011 2012
Key features of budget 2011 2012
 
Xac dinh phong cach dam phan
Xac dinh phong cach dam phanXac dinh phong cach dam phan
Xac dinh phong cach dam phan
 
SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch
 
Schurz
SchurzSchurz
Schurz
 
2014 Mitsubishi Outlander Sport in Baltimore, Maryland
2014 Mitsubishi Outlander Sport in Baltimore, Maryland2014 Mitsubishi Outlander Sport in Baltimore, Maryland
2014 Mitsubishi Outlander Sport in Baltimore, Maryland
 
The China Analyst March 2011
The China Analyst   March 2011The China Analyst   March 2011
The China Analyst March 2011
 
Concept note jmdi eurocities - milano-tampere worksop
Concept note jmdi   eurocities - milano-tampere worksopConcept note jmdi   eurocities - milano-tampere worksop
Concept note jmdi eurocities - milano-tampere worksop
 
2013 09.9 urbact network workshop compressed
2013 09.9 urbact network workshop compressed2013 09.9 urbact network workshop compressed
2013 09.9 urbact network workshop compressed
 

Ähnlich wie Javascript classes and scoping

33rd degree talk: open and automatic coding conventions with walkmod
33rd degree talk: open and automatic coding conventions with walkmod33rd degree talk: open and automatic coding conventions with walkmod
33rd degree talk: open and automatic coding conventions with walkmodwalkmod
 
Kevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScriptKevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScriptAxway Appcelerator
 
OCP Java (OCPJP) 8 Exam Quick Reference Card
OCP Java (OCPJP) 8 Exam Quick Reference CardOCP Java (OCPJP) 8 Exam Quick Reference Card
OCP Java (OCPJP) 8 Exam Quick Reference CardHari kiran G
 
Design patterns
Design patternsDesign patterns
Design patternsAlok Guha
 
Write code that writes code!
Write code that writes code!Write code that writes code!
Write code that writes code!Jason Feinstein
 
Write code that writes code! A beginner's guide to Annotation Processing - Ja...
Write code that writes code! A beginner's guide to Annotation Processing - Ja...Write code that writes code! A beginner's guide to Annotation Processing - Ja...
Write code that writes code! A beginner's guide to Annotation Processing - Ja...DroidConTLV
 
PHP - Introduction to Object Oriented Programming with PHP
PHP -  Introduction to  Object Oriented Programming with PHPPHP -  Introduction to  Object Oriented Programming with PHP
PHP - Introduction to Object Oriented Programming with PHPVibrant Technologies & Computers
 
5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt
5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt
5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.pptAshwathGupta
 
Working With Concurrency In Java 8
Working With Concurrency In Java 8Working With Concurrency In Java 8
Working With Concurrency In Java 8Heartin Jacob
 
Complete PPT about the Java lokesh kept it
Complete PPT about the Java lokesh kept itComplete PPT about the Java lokesh kept it
Complete PPT about the Java lokesh kept itlokeshpappaka10
 
Java-Intro.pptx
Java-Intro.pptxJava-Intro.pptx
Java-Intro.pptxVijalJain3
 

Ähnlich wie Javascript classes and scoping (20)

Javasession6
Javasession6Javasession6
Javasession6
 
33rd degree talk: open and automatic coding conventions with walkmod
33rd degree talk: open and automatic coding conventions with walkmod33rd degree talk: open and automatic coding conventions with walkmod
33rd degree talk: open and automatic coding conventions with walkmod
 
ppt_on_java.pptx
ppt_on_java.pptxppt_on_java.pptx
ppt_on_java.pptx
 
Variables in Pharo
Variables in PharoVariables in Pharo
Variables in Pharo
 
Kevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScriptKevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScript
 
OCP Java (OCPJP) 8 Exam Quick Reference Card
OCP Java (OCPJP) 8 Exam Quick Reference CardOCP Java (OCPJP) 8 Exam Quick Reference Card
OCP Java (OCPJP) 8 Exam Quick Reference Card
 
Design patterns
Design patternsDesign patterns
Design patterns
 
Javascript Workshop
Javascript WorkshopJavascript Workshop
Javascript Workshop
 
Java unit 7
Java unit 7Java unit 7
Java unit 7
 
Java
JavaJava
Java
 
Java
JavaJava
Java
 
Write code that writes code!
Write code that writes code!Write code that writes code!
Write code that writes code!
 
Write code that writes code! A beginner's guide to Annotation Processing - Ja...
Write code that writes code! A beginner's guide to Annotation Processing - Ja...Write code that writes code! A beginner's guide to Annotation Processing - Ja...
Write code that writes code! A beginner's guide to Annotation Processing - Ja...
 
PHP - Introduction to Object Oriented Programming with PHP
PHP -  Introduction to  Object Oriented Programming with PHPPHP -  Introduction to  Object Oriented Programming with PHP
PHP - Introduction to Object Oriented Programming with PHP
 
5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt
5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt
5. OBJECT ORIENTED PROGRAMMING USING JAVA - INHERITANCE.ppt
 
Working With Concurrency In Java 8
Working With Concurrency In Java 8Working With Concurrency In Java 8
Working With Concurrency In Java 8
 
Complete PPT about the Java lokesh kept it
Complete PPT about the Java lokesh kept itComplete PPT about the Java lokesh kept it
Complete PPT about the Java lokesh kept it
 
About Python
About PythonAbout Python
About Python
 
Lecture 5.pptx
Lecture 5.pptxLecture 5.pptx
Lecture 5.pptx
 
Java-Intro.pptx
Java-Intro.pptxJava-Intro.pptx
Java-Intro.pptx
 

Mehr von Patrick Sheridan

5 new rules for product development
5 new rules for product development5 new rules for product development
5 new rules for product developmentPatrick Sheridan
 
SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch Patrick Sheridan
 
Javascript Performance Tricks
Javascript Performance TricksJavascript Performance Tricks
Javascript Performance TricksPatrick Sheridan
 
Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...
Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...
Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...Patrick Sheridan
 
Ext JS 4.0 components and layouts
Ext JS 4.0 components and layoutsExt JS 4.0 components and layouts
Ext JS 4.0 components and layoutsPatrick Sheridan
 
Ext JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and componentsExt JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and componentsPatrick Sheridan
 
Modus Create Corporate Capabilities
Modus Create Corporate CapabilitiesModus Create Corporate Capabilities
Modus Create Corporate CapabilitiesPatrick Sheridan
 

Mehr von Patrick Sheridan (14)

5 new rules for product development
5 new rules for product development5 new rules for product development
5 new rules for product development
 
SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch SenchaCon: DJing with Sencha Touch
SenchaCon: DJing with Sencha Touch
 
Sencha Touch in Action
Sencha Touch in Action Sencha Touch in Action
Sencha Touch in Action
 
Web audio app preso
Web audio app presoWeb audio app preso
Web audio app preso
 
Rvrsit
RvrsitRvrsit
Rvrsit
 
Javascript Performance Tricks
Javascript Performance TricksJavascript Performance Tricks
Javascript Performance Tricks
 
Discover Music
Discover MusicDiscover Music
Discover Music
 
ExtJS Forms
ExtJS FormsExtJS Forms
ExtJS Forms
 
HTML5 and Sencha Touch
HTML5 and Sencha TouchHTML5 and Sencha Touch
HTML5 and Sencha Touch
 
Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...
Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...
Using Data Visualization to Create Rich Content Experiences - MarkLogic Webin...
 
Ext JS 4.0 components and layouts
Ext JS 4.0 components and layoutsExt JS 4.0 components and layouts
Ext JS 4.0 components and layouts
 
Ext JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and componentsExt JS 4.0 - Creating extensions, plugins and components
Ext JS 4.0 - Creating extensions, plugins and components
 
JavaScript Secrets
JavaScript SecretsJavaScript Secrets
JavaScript Secrets
 
Modus Create Corporate Capabilities
Modus Create Corporate CapabilitiesModus Create Corporate Capabilities
Modus Create Corporate Capabilities
 

Último

Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 

Último (20)

Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 

Javascript classes and scoping

  • 1. Ext JS classes and Scoping
  • 2. Agenda • Get back to the basics! • Master references (variables and object keys) • Learn about the new class system • Ext.class.Base • Explore Mixins • Ext.Loader
  • 3. What have I been up to? • Bootstrapping a new company, Modus Create • Focusing on architecting and building kick-ass Ext JS and Sencha Touch apps! • Regionaland open training on Advanced JavaScript, Ext JS 4 and Sencha Touch • Rapidly expanding and looking for experienced developers (Sencha Touch and Ext JS) • http://moduscreate.com
  • 4. On the book front... • Earlyaccess to Sencha Touch in Action available. • Chapters 1-3 being distributed • Chapter 7 is next to be published • Chapter4 will be published in about 2 weeks • Chapters 5 and 6 are being worked on
  • 5. On the book front... • Codefor Chapter 1 is being worked on. • Expect TOC revisions to cover the latest changes to Ext JS • Anyoneinterested in working with me on this project?
  • 6. References A “variable” reference is a pointer to a chunk of memory where some value or object is stored.
  • 7. References • Stop saying “variable”! • Use the word “reference” • It will remind you of what it really is - a pointer! • We will use this word from now on
  • 8. Global references • If not scoped with the var keyword, they are treated as globals • This is dangerous! • The only globally scoped reference that is sanctioned is a namespace. • Always lexically scope your references with the var keyword.
  • 9. Naming convention • Reference names should start with a lower case unless it points to a Class (constructor or singleton).
  • 10. References • Because JavaScript is loosely typed, references can be repointed from one type of value to another. • Thisis where “variable” comes from.
  • 11. References • When one reference is assigned from another, they both point to the same value. • Thisassignment does not result in assignment chaining!
  • 13. References to the same object
  • 14. References to the same object
  • 15. Pointing to other object members
  • 17. Passing objects as references
  • 18. Defining Functions • Functions are first class objects • They have properties and methods • They extend from Object • They inherit from Function.prototype • call and apply methods are inherited
  • 19. Know “this" • In JavaScript, “this” is a magic reference • It is set upon execution of a function and is accessible inside that function • “this” defines the execution scope • Understanding “this” is very important.
  • 20. Execution scope defined • When a function is executed via a var reference, the default execution context (“this”) is “window”. • When a function is executed via an object key, the execution context (“this”) is the object for which the key belongs.
  • 21. Default execution for “var” functions
  • 22. Default execution for object- based functions
  • 23. What is the execution scope for getName()?
  • 24. Execution scope defined • When a function is executed via a var reference, the default execution context (“this”) is “window”. • When a function is executed via an object key, the execution context (“this”) is the object for which the key belongs.
  • 25. What is the execution scope for getName()?
  • 26. It’s easy to mix and match...
  • 27. What is the default execution scope for person2.getName()?
  • 28. Forcing scope execution • call and apply can be used to force scope execution. • Inother words, you have full control over the execution scope of any function in JavaScript.
  • 33. Function.call A good means to forcing execution scope but has one major limitation. You absolutely have to define all of the arguments, which can become a management nightmare for refactors!
  • 34. Function.apply to the rescue Function.apply allows you to force execution scope, but you pass on a list of arguments or an array.
  • 38. Objects == root? • Object is the base “class” for just about everything inside of JavaScript. • Just about all of the values that you code and interact with extend from Object. • Strings, Arrays, Functions,etc • Usingthe DOM API method document.getElementByID returns an element reference that ultimately extends Object.
  • 39. Constructors • All objects are initialized with constructors • Constructorsare nothing more than a function that is executed within the scope of a new Object • It’s that simple!
  • 40. Take this code, for example:
  • 41. Constructors • Atthis point, this is a normal function. • Notice the argument. • What will happen if we execute Person(‘Jay’);?
  • 43. Know when to use new? • When the new operator is placed in front of an method, that method is treated as a “constructor”. • Else, it’s treated as a generic function.
  • 44. Prototype == reusability • A “prototype” isan object that is more or less a blue print for future instances of an object • Itallows JavaScript to “stamp out” instances of an object that inherit the same properties
  • 45. A prototype in action
  • 46. Ext JS 4.0 Class System • Completely revised from 3.0 • No use for the “new” keyword • Use Ext.create
  • 47. Ext.Base features • Automatic Namespace management • Statics support • Mixin Support • Built-in override/extension methods • Plays nicely with the dynamic class Loader system • Alternate class name (good for deprecation management)
  • 48. Creating a class: The Ext.define pattern Overrides Callback Namespaced object (methods method class reference properties) (optional)
  • 50. Auto-generated setters/getters Setters and getters auto-generated! Use auto-generated setters!
  • 51. Ext JS 4 Class statics • Providesscope-independent access to static members. • Applied before constructor is called
  • 52. Statics example Configure statics Access statics
  • 53. Ext JS 4 Class Mixin support • Provides a means for extremely easy multiple inheritance Ext.Base Mixin Mixin MyClass
  • 57. Identifying the cross inheritance Members from DrivingMixin
  • 58. Identifying the cross inheritance Members from PilotingMixin
  • 59. Exercising the mixins Output from PilostingMixin Output from DrivingMixin