SlideShare ist ein Scribd-Unternehmen logo
1 von 10
ADVENTURES WITH YUI
                FE Suffolk
             Robin Meehan
               March 2013
I mean this…

                                                                      http://yuilibrary.com/

                                                                      “YUI is a free, open source
                                                                      JavaScript and CSS library for
                                                                      building richly interactive web
                                                                      applications. ”




             Not this… 
             (Japanese singer-songwriter)




Image taken from http://combpank.deviantart.com/art/YUI-2-198206705
SOME BACKGROUND
Used YUI to create a dodgy shoot-em-up tenuously related to cloud
computing as part of a Smart421 internal “Play with Azure” competition

BRIEF HISTORY OF YUI
• Yahoo! User Interface Library (YUI) - came out of Yahoo! web
  development team from 2005, first released to public in 2006
• YUI3 released in Sept 2009 – a rewrite
• I used YUI version v3.4.1
• It’s now at v3.9.0 (released on March 13th)

WHY DID I USE/CHOOSE IT?
• Documentation seemed good & accessible, good examples
• Did what I needed – animation mainly
• Interesting features – module based
ISSUES I HAD

• No browser-support related issues at all
       •   Ran on iPhone 4 fine except for the key handling (but YUI does have mobile
           gesture support, just didn’t try it out)


• All client-side, so struggled to secure the transfer of scores back to
  the server

• Animation control was good, but…had to code my own collision
  detection, which had performance consequences
       •   Maintain own array of object locations
       •   Update them on every “move” event
       •   Check for collisions on every “move” event


• Key handling – trickier than I expected
       •   Couldn’t avoid auto key repeat
What suspicious behaviour looks like!




This is what you get if you send out a weakly secured demo in a
technology company 
Creating the background image – a gradient sky with a sun…
Animation code example – easy for the bullet and the clouds…




…not so easy for the gun, due to need to control it with keys…had to use
a flag from “key up” to stop the gun animation…




…and had to roll my own collision detection…
SOUND
I used SoundManager2 for sound control – it did what it said on the tin…

www.schillmania.com/projects/soundmanager2/
OK – enough talk. Always dangerous…now a demo!
THANKS!

Weitere ähnliche Inhalte

Andere mochten auch (6)

Panayiotis Vitakis @ Open Coffee Athens LIII, 22-Feb-2013
Panayiotis Vitakis @ Open Coffee Athens LIII, 22-Feb-2013Panayiotis Vitakis @ Open Coffee Athens LIII, 22-Feb-2013
Panayiotis Vitakis @ Open Coffee Athens LIII, 22-Feb-2013
 
Donation project
Donation projectDonation project
Donation project
 
여성환경활동가 전국연수(2001년) _주민자치와 여성세력화
여성환경활동가 전국연수(2001년) _주민자치와 여성세력화여성환경활동가 전국연수(2001년) _주민자치와 여성세력화
여성환경활동가 전국연수(2001년) _주민자치와 여성세력화
 
LEARN FAMILY MASSAGE
LEARN FAMILY MASSAGE LEARN FAMILY MASSAGE
LEARN FAMILY MASSAGE
 
Learn family massage program
Learn family massage programLearn family massage program
Learn family massage program
 
Ecuaciones Sencillas. Regla del producto
Ecuaciones Sencillas. Regla del productoEcuaciones Sencillas. Regla del producto
Ecuaciones Sencillas. Regla del producto
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Kürzlich hochgeladen (20)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 

Fe suffolk adventures-withyui-march2013

  • 1. ADVENTURES WITH YUI FE Suffolk Robin Meehan March 2013
  • 2. I mean this… http://yuilibrary.com/ “YUI is a free, open source JavaScript and CSS library for building richly interactive web applications. ” Not this…  (Japanese singer-songwriter) Image taken from http://combpank.deviantart.com/art/YUI-2-198206705
  • 3. SOME BACKGROUND Used YUI to create a dodgy shoot-em-up tenuously related to cloud computing as part of a Smart421 internal “Play with Azure” competition BRIEF HISTORY OF YUI • Yahoo! User Interface Library (YUI) - came out of Yahoo! web development team from 2005, first released to public in 2006 • YUI3 released in Sept 2009 – a rewrite • I used YUI version v3.4.1 • It’s now at v3.9.0 (released on March 13th) WHY DID I USE/CHOOSE IT? • Documentation seemed good & accessible, good examples • Did what I needed – animation mainly • Interesting features – module based
  • 4. ISSUES I HAD • No browser-support related issues at all • Ran on iPhone 4 fine except for the key handling (but YUI does have mobile gesture support, just didn’t try it out) • All client-side, so struggled to secure the transfer of scores back to the server • Animation control was good, but…had to code my own collision detection, which had performance consequences • Maintain own array of object locations • Update them on every “move” event • Check for collisions on every “move” event • Key handling – trickier than I expected • Couldn’t avoid auto key repeat
  • 5. What suspicious behaviour looks like! This is what you get if you send out a weakly secured demo in a technology company 
  • 6. Creating the background image – a gradient sky with a sun…
  • 7. Animation code example – easy for the bullet and the clouds… …not so easy for the gun, due to need to control it with keys…had to use a flag from “key up” to stop the gun animation… …and had to roll my own collision detection…
  • 8. SOUND I used SoundManager2 for sound control – it did what it said on the tin… www.schillmania.com/projects/soundmanager2/
  • 9. OK – enough talk. Always dangerous…now a demo!