SlideShare une entreprise Scribd logo
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

Contenu connexe

Plus de wolframkriesing

TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
wolframkriesing
 
Baby steps
Baby stepsBaby steps
Baby steps
wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
wolframkriesing
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
wolframkriesing
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
wolframkriesing
 
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 meant
wolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
wolframkriesing
 
Better Code through TDD
Better Code through TDDBetter Code through TDD
Better Code through TDD
wolframkriesing
 
April JavaScript Tools
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
wolframkriesing
 
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 Bangalore
wolframkriesing
 

Plus de 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
 

Dernier

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 

Dernier (20)

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 

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