SlideShare a Scribd company logo
1 of 16
Download to read offline
goes mobile

 Bártházi András
   Arkon Zrt.
Bártházi András



• IT research and PR guy at Arkon Zrt.
  (the creators of ingatlan.com & koponyeg.hu)

• @ba78 on Twitter
• blogs at Weblabor.hu, Webakademia.hu
July 2011




            Source: http://www.flickr.com/photos/icyaero-photography/5800568820/
let’s do a mobile view



 • we’ve done it in last July
 • today’s landscape of choices is different,
   I’ll talk about that as well
the idea


 • a basic mobile view for ingatlan.com
 • our “main site” is using jQuery
 • jQuery is “too big” for mobile
   development
 • we don’t want to maintain a new code
Zepto.js?

 • a jQuery compatible, mobile JS library
 • Zepto v0.5-v0.6:
   31k, 14k minified, 5k minified+gzipped vs.
   jQuery 1.4.3:
   180k, 78k minified, 27kb minified+gzipped
 • sounds good, but not worked as a drop-in
   replacement
documentation?


• unfortunately Zepto.js had no
  documentation
• fortunately the code is small and
  easy to read
.querySelector()


 • jQuery is using the Sizzle selector engine
 • Zepto.js is working with querySelector()
 • jQuery’s :visible selector is not part of the
   CSS specification, so not working with
   querySelector()
.click()



 • jQuery has a .click() eventhandler
 • Zepto had only the general .bind()
$.inArray(), $.each()...



 • jQuery has some great utility functions
 • Zepto have not implemented them
Touch



• Zepto focuses on mobile,
  handles touch events <3
Summary, the good news



• had to work on it, but Zepto.js seems to
  be a working, recommandable solution
And these days...




                    Source: http://www.flickr.com/photos/bensonkua/5738557548/
... and today, even better news

 • Zepto.js improved a lot, v1.0rc1 have
   been released yesterday
  • a new site with a good documentation
  • much-much compatible with jQuery
  • also with experimental support
    for :visible and so
... and not the only one



 • new players arrived as well:
  • jQ.Mobi - even smaller than Zepto
  • jquip - a modularized jQuery
Source: http://www.flickr.com/photos/theilluminated/5386099858/

More Related Content

Similar to ingatlan.com goes mobile

Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium IntroNicholas Jansma
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski
 
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013偉格 高
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery MobileTroy Miles
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesreebalazs
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022 Michael Yagudaev
 
夜宴24期《这段时间》
夜宴24期《这段时间》夜宴24期《这段时间》
夜宴24期《这段时间》Koubei Banquet
 
Nitobi/PhoneGap at Bootup 2011
Nitobi/PhoneGap at Bootup 2011Nitobi/PhoneGap at Bootup 2011
Nitobi/PhoneGap at Bootup 2011Brian LeRoux
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portlanddmethvin
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ PublishIgor Vrdoljak
 
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCChristian Heilmann
 
Open Source Junction: Apache Wookie and W3C Widgets
Open Source Junction: Apache Wookie and W3C WidgetsOpen Source Junction: Apache Wookie and W3C Widgets
Open Source Junction: Apache Wookie and W3C Widgetsscottw
 
How to start developing apps for Firefox OS
How to start developing apps for Firefox OSHow to start developing apps for Firefox OS
How to start developing apps for Firefox OSbenko
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa
 
Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Thinkful
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadRuss Fustino
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)Jia Mi
 
Open-source Mic Talks at AOL
Open-source Mic Talks at AOLOpen-source Mic Talks at AOL
Open-source Mic Talks at AOLAddy Osmani
 

Similar to ingatlan.com goes mobile (20)

Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
 
Beginning jQuery Mobile
Beginning jQuery MobileBeginning jQuery Mobile
Beginning jQuery Mobile
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
 
夜宴24期《这段时间》
夜宴24期《这段时间》夜宴24期《这段时间》
夜宴24期《这段时间》
 
Nitobi/PhoneGap at Bootup 2011
Nitobi/PhoneGap at Bootup 2011Nitobi/PhoneGap at Bootup 2011
Nitobi/PhoneGap at Bootup 2011
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ Publish
 
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
 
Open Source Junction: Apache Wookie and W3C Widgets
Open Source Junction: Apache Wookie and W3C WidgetsOpen Source Junction: Apache Wookie and W3C Widgets
Open Source Junction: Apache Wookie and W3C Widgets
 
How to start developing apps for Firefox OS
How to start developing apps for Firefox OSHow to start developing apps for Firefox OS
How to start developing apps for Firefox OS
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
 
Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Javascript libraries
Javascript librariesJavascript libraries
Javascript libraries
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
Open-source Mic Talks at AOL
Open-source Mic Talks at AOLOpen-source Mic Talks at AOL
Open-source Mic Talks at AOL
 

More from András Bártházi (9)

Announcing Escher
Announcing EscherAnnouncing Escher
Announcing Escher
 
Cynefin
CynefinCynefin
Cynefin
 
Susmus.hu - technológiák
Susmus.hu - technológiákSusmus.hu - technológiák
Susmus.hu - technológiák
 
NodeJS
NodeJSNodeJS
NodeJS
 
jQuery 1.4 újdonságok
jQuery 1.4 újdonságokjQuery 1.4 újdonságok
jQuery 1.4 újdonságok
 
Redis: a memcached gyilkos
Redis: a memcached gyilkosRedis: a memcached gyilkos
Redis: a memcached gyilkos
 
Miner Business
Miner BusinessMiner Business
Miner Business
 
Google Analytics API and OS analytics tools
Google Analytics API and OS analytics toolsGoogle Analytics API and OS analytics tools
Google Analytics API and OS analytics tools
 
Turbó fokozat
Turbó fokozatTurbó fokozat
Turbó fokozat
 

Recently uploaded

Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 

Recently uploaded (20)

Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 

ingatlan.com goes mobile

  • 1. goes mobile Bártházi András Arkon Zrt.
  • 2. Bártházi András • IT research and PR guy at Arkon Zrt. (the creators of ingatlan.com & koponyeg.hu) • @ba78 on Twitter • blogs at Weblabor.hu, Webakademia.hu
  • 3. July 2011 Source: http://www.flickr.com/photos/icyaero-photography/5800568820/
  • 4. let’s do a mobile view • we’ve done it in last July • today’s landscape of choices is different, I’ll talk about that as well
  • 5. the idea • a basic mobile view for ingatlan.com • our “main site” is using jQuery • jQuery is “too big” for mobile development • we don’t want to maintain a new code
  • 6. Zepto.js? • a jQuery compatible, mobile JS library • Zepto v0.5-v0.6: 31k, 14k minified, 5k minified+gzipped vs. jQuery 1.4.3: 180k, 78k minified, 27kb minified+gzipped • sounds good, but not worked as a drop-in replacement
  • 7. documentation? • unfortunately Zepto.js had no documentation • fortunately the code is small and easy to read
  • 8. .querySelector() • jQuery is using the Sizzle selector engine • Zepto.js is working with querySelector() • jQuery’s :visible selector is not part of the CSS specification, so not working with querySelector()
  • 9. .click() • jQuery has a .click() eventhandler • Zepto had only the general .bind()
  • 10. $.inArray(), $.each()... • jQuery has some great utility functions • Zepto have not implemented them
  • 11. Touch • Zepto focuses on mobile, handles touch events <3
  • 12. Summary, the good news • had to work on it, but Zepto.js seems to be a working, recommandable solution
  • 13. And these days... Source: http://www.flickr.com/photos/bensonkua/5738557548/
  • 14. ... and today, even better news • Zepto.js improved a lot, v1.0rc1 have been released yesterday • a new site with a good documentation • much-much compatible with jQuery • also with experimental support for :visible and so
  • 15. ... and not the only one • new players arrived as well: • jQ.Mobi - even smaller than Zepto • jquip - a modularized jQuery