Javascript Optimization and Appcelerator Titanium
-
Upload
ramkumar-murugadoss -
Category
Education
-
view
153 -
download
0
description
Transcript of Javascript Optimization and Appcelerator Titanium
![Page 1: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/1.jpg)
JavascriptDEVELOPER’S LIFE
![Page 2: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/2.jpg)
Who am I?
• Ramkumar Murugadoss
• @rampicos
• facebook.com/raamkumar.m
• Code
![Page 3: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/3.jpg)
What is JavaScript
• Javascript is the Programming language, first emerged to make dynamic scripts for Web pages
• What do you think about Javascript?
![Page 4: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/4.jpg)
Why Javascript
• What we use for: Programming Language for Web Pages
• How it was in current: Programming Language for Server-side too
• In near future: It is most wanted huge Programming Language for all
![Page 5: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/5.jpg)
Best Practices
• All we know Javascript
• Everyone can code in Javascript
• All we want to know, how efficiently we will write JS
![Page 6: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/6.jpg)
About GC
• GC is automatic
• Objects are collected there is no references longer
• Javascript Uses Mark and Sweep GC method
![Page 7: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/7.jpg)
Avoid the global scope
• In the Global scope the Object never null, so never garbage collected
• It’s time taking and trivial process to get the reference of global scope
• If need to use global scope assign yourself null after the use
![Page 8: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/8.jpg)
Use var
• Don’t forget to use var for all your variables
• The Variables without var may considered to global
• You are making javascript to struggle for finding the scope of your variable
![Page 9: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/9.jpg)
Get Use of Self-Calling Functions
• Have any one noticied jQuery using self calling functions
![Page 10: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/10.jpg)
What will be the result?
![Page 11: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/11.jpg)
Make your loops more efficient
![Page 12: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/12.jpg)
Conditional Branching
![Page 13: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/13.jpg)
Creating Arrays and Objects
• Use [] instead of Array• Use arrayVariable[length] = value instead of
arrayVariable.push(value)
• Use {} instead of Object
![Page 14: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/14.jpg)
Closures
• A closure is a special kind of object that combines two things: a function, and the environment in which that function was created
• The environment consists of any local variables that were in-scope at the time that the closure was created
![Page 15: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/15.jpg)
Closures Cond…
![Page 16: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/16.jpg)
Closures Cond…
![Page 17: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/17.jpg)
Namespaces
• this prevent the global scope pollution
• this protect your code from colliding with other code or libraries
![Page 18: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/18.jpg)
Building String in Loops
![Page 19: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/19.jpg)
Small Intro to OOPs
• Everything in Javascript is Object based, (note there is no keyword called class in JS)
• Now the question is then how can I create the Objects and its functions?
![Page 20: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/20.jpg)
OOPs cond
• Creating functions in JS is considered to the Object, using prototypes you can define methods for that
![Page 21: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/21.jpg)
Any Guess
• What is the difference between this two codes
![Page 22: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/22.jpg)
Don’t D.R.Y
• Make the reusability
• Make use of Namespace
![Page 23: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/23.jpg)
![Page 24: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/24.jpg)
Cross Platform Mobile Applications
• What are Cross Platform Mobile Applications ?
• Why build Cross Platform ?
• What are the most popular development frameworks
available ?
• Which framework should I use?
![Page 25: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/25.jpg)
Why Titanium
• Code Once Build Everywhere
• Native look and feel
• Has more than 5,500+ device level APIs for iOS and Android
• Object based Javascript only
• In build Analytics
• In build Cloud integration support (ACS)
• Much more
![Page 26: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/26.jpg)
What to do to start with Titanium today?
Signup and download http://my.appcelerator.com
Follow the “Quick Start” https://wiki.appcelerator.org/display/guides/home
You’re ready to be a Titanium developer!
![Page 27: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/27.jpg)
CommonJS
• The Biggest feature introduced from Node.js for reusability is CommonJS
• Make your functions as unique namespaced modules and get to use of that
• We have exports.yourfunction and module.exports as 2 ways to create CommonJS modules
• Woow now browsers support CommonJS with some libraries
![Page 28: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/28.jpg)
exports.your function
![Page 29: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/29.jpg)
module.exports
![Page 30: Javascript Optimization and Appcelerator Titanium](https://reader033.fdocuments.in/reader033/viewer/2022061210/548e62e2b479592c3b8b464e/html5/thumbnails/30.jpg)
Thank You!!!
Any questions…?