SlideShare a Scribd company logo
1 of 15
Download to read offline
embedJS
                              the JavaScript toolkit that fits all




                                             uxebu




Sonntag, 26. September 2010
The Supported Devices

                              ... and there will be more
                               to embed JavaScript on




Sonntag, 26. September 2010
http://www.flickr.com/photos/tacoekkel/25538919/




                       The Approach

   take your library apart
to reconstruct it as needed
Sonntag, 26. September 2010
http://www.flickr.com/photos/hugo90/3916794427/




                                          Packager

                              package just what you need!
                                 Ship no useless byte
Sonntag, 26. September 2010
How To Ship No Useless Byte


                    1. Shrink Your API
                    2. Build Only What You Use
                    3. Reduce Features
                    4. Device Specific Build




Sonntag, 26. September 2010
1
                               Shrink Your API




                              20kB         8kB


Sonntag, 26. September 2010
2
                                                                              Build
                                                             file.js                                    declare.js

                                                                          file.js                                    mixin.js
                                                    file.js                                      extend.js
                 file.js                                           query                                      OO                                                file.js
                                                                          file.js                                    inherit.js
                       array
                                                        file.js
                                                                                                      delegate.js                                         fx
                               file.js                                                                                                                          file.js
              file.js



                                                                                   kitchensink.js
                                          file.js                                                                                     file.js
                                                                                       file.js
                                                         file.js                                                                                  file.js
                                file.js                                                 string                               file.js
                                                 lang                                                                                     html
                                                        file.js                                                                                   file.js
                                        file.js                                                                                   file.js



                                                                                     20kb                   (unzipped)
                                                    http://github.com/uxebu/embedjs/tree/master/build/
Sonntag, 26. September 2010
2
                                Tiny/Custom Build
                                                             file.js                                    declare.js

                                                                          file.js                                    mixin.js
                                                    file.js                                      extend.js
                 file.js                                           query                                      OO                                                file.js
                                                                          file.js                                    inherit.js
                       array
                                                        file.js
                                                                                                      delegate.js                                         fx
                               file.js                                                                                                                          file.js
              file.js



                                                                                   kitchensink.js
                                          file.js                                                                                     file.js
                                                                                       file.js
                                                         file.js                                                                                  file.js
                                file.js                                                 string                               file.js
                                                 lang                                                                                     html
                                                        file.js                                                                                   file.js
                                        file.js                                                                                   file.js



                                                                                      8kb            (unzipped)

Sonntag, 26. September 2010
3


                    Simple queries > simple library function
                               Only ".class" and "#id" queries




                                          vs.




Sonntag, 26. September 2010
3


                    Simple queries > simple library function
                               Only ".class" and "#id" queries




                                          vs.

       Full fledged queries > Full blown library function



Sonntag, 26. September 2010
3

                                    13 LOC
                    Simple queries > simple library function
                               Only ".class" and "#id" queries




                                          vs.

       Full fledged queries > Full blown library function
                           ~200 LOC


Sonntag, 26. September 2010
4




                               At Runtime
                              At Build Time



Sonntag, 26. September 2010
4

                              dojo-blackberry.js

                              dojo-blackberry46.js

                              dojo-nokia-wrt.js

                              dojo-opera.js

                              dojo-webkit-mobile.js

                              dojo-windows-mobile.js


Sonntag, 26. September 2010
How To Ship No Useless Byte


                    1. Shrink Your API
                    2. Build Only What You Use
                    3. Reduce Features
                    4. Device Specific Build

                        > Smallest, Most Efficient JavaScript

Sonntag, 26. September 2010
thx
                              http://embedjs.org
                               http://uxebu.com

                                         uxebu

                               http://twitter.com/embedjs
                                http://twitter.com/uxebu




Sonntag, 26. September 2010

More Related Content

More from wolframkriesing

TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheetswolframkriesing
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the messwolframkriesing
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)wolframkriesing
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)wolframkriesing
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meantwolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburgwolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevconwolframkriesing
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)wolframkriesing
 
NEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachNEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachwolframkriesing
 
Java scriptgettingstarted
Java scriptgettingstartedJava scriptgettingstarted
Java scriptgettingstartedwolframkriesing
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalorewolframkriesing
 

More from wolframkriesing (20)

TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
 
Baby steps
Baby stepsBaby steps
Baby steps
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
 
Better Code through TDD
Better Code through TDDBetter Code through TDD
Better Code through TDD
 
April JavaScript Tools
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
 
EmbedJS
EmbedJSEmbedJS
EmbedJS
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
 
WAC
WACWAC
WAC
 
NEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachNEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approach
 
Java scriptgettingstarted
Java scriptgettingstartedJava scriptgettingstarted
Java scriptgettingstarted
 
Munichjs javascript
Munichjs javascriptMunichjs javascript
Munichjs javascript
 
HTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit BangaloreHTML5 Apps - Mobile Developer Summit Bangalore
HTML5 Apps - Mobile Developer Summit Bangalore
 

Recently uploaded

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 

Recently uploaded (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 

embedJS

  • 1. embedJS the JavaScript toolkit that fits all uxebu Sonntag, 26. September 2010
  • 2. The Supported Devices ... and there will be more to embed JavaScript on Sonntag, 26. September 2010
  • 3. http://www.flickr.com/photos/tacoekkel/25538919/ The Approach take your library apart to reconstruct it as needed Sonntag, 26. September 2010
  • 4. http://www.flickr.com/photos/hugo90/3916794427/ Packager package just what you need! Ship no useless byte Sonntag, 26. September 2010
  • 5. How To Ship No Useless Byte 1. Shrink Your API 2. Build Only What You Use 3. Reduce Features 4. Device Specific Build Sonntag, 26. September 2010
  • 6. 1 Shrink Your API 20kB 8kB Sonntag, 26. September 2010
  • 7. 2 Build file.js declare.js file.js mixin.js file.js extend.js file.js query OO file.js file.js inherit.js array file.js delegate.js fx file.js file.js file.js kitchensink.js file.js file.js file.js file.js file.js file.js string file.js lang html file.js file.js file.js file.js 20kb (unzipped) http://github.com/uxebu/embedjs/tree/master/build/ Sonntag, 26. September 2010
  • 8. 2 Tiny/Custom Build file.js declare.js file.js mixin.js file.js extend.js file.js query OO file.js file.js inherit.js array file.js delegate.js fx file.js file.js file.js kitchensink.js file.js file.js file.js file.js file.js file.js string file.js lang html file.js file.js file.js file.js 8kb (unzipped) Sonntag, 26. September 2010
  • 9. 3 Simple queries > simple library function Only ".class" and "#id" queries vs. Sonntag, 26. September 2010
  • 10. 3 Simple queries > simple library function Only ".class" and "#id" queries vs. Full fledged queries > Full blown library function Sonntag, 26. September 2010
  • 11. 3 13 LOC Simple queries > simple library function Only ".class" and "#id" queries vs. Full fledged queries > Full blown library function ~200 LOC Sonntag, 26. September 2010
  • 12. 4 At Runtime At Build Time Sonntag, 26. September 2010
  • 13. 4 dojo-blackberry.js dojo-blackberry46.js dojo-nokia-wrt.js dojo-opera.js dojo-webkit-mobile.js dojo-windows-mobile.js Sonntag, 26. September 2010
  • 14. How To Ship No Useless Byte 1. Shrink Your API 2. Build Only What You Use 3. Reduce Features 4. Device Specific Build > Smallest, Most Efficient JavaScript Sonntag, 26. September 2010
  • 15. thx http://embedjs.org http://uxebu.com uxebu http://twitter.com/embedjs http://twitter.com/uxebu Sonntag, 26. September 2010