SlideShare una empresa de Scribd logo
1 de 15
F# Mobile Web
Applications
James Freiwirth
Perfect Shuffle Ltd
james@perfectshuffle.co.uk
Web vs. Native
Why not go native?
• Walled gardens (app stores)
• Apple/Google/Microsoft take 20-30% of revenue
• Have to write app for each platform…
• … and customise it for each screen resolution
• Less work, faster development, get your product
released quicker!
These are the resolutions just for Apple phones and tablets…
Responsive web design to
the rescue!
Use a framework!
Bootstrap http://twitter.github.io/bootstrap/
Suzy http://susy.oddbird.net/
Skeleton http://www.getskeleton.com/
Zurb Foundation http://foundation.zurb.com/
There are loads more...
Javascript sucks, but it’s everywhere.
alert("Why am I a " + typeof + "");
Funscript and Websharper let you
compile F# to Javascript!
Which should I use?
Funscript Websharper
• Open source
• Completely free
• Can use typescript
definitions
• Client-side only at the
moment
• Minimalist F# to
Javascript compiler
• Open source for open
source apps
• Otherwise commercial
licence
• Server and client side
• Seamless client-server
RPC calls
• Complete framework
Developing/Hosting on
Linux
Use vagrant to create a reproducible development
environment.
http://www.vagrantup.com/
Ready-made base box:
https://bitbucket.org/perfectshuffle/vagrant_raring_
mono/
Getting started guide:
http://thecodedecanter.wordpress.com/2013/06/22/
hosting-websharperasp-net-apps-on-linux-with-mono-
nginx/
Other great tools
Sass makes CSS fun again. Sass is an extension of
CSS3, adding nested rules, variables,mixins, selector
inheritance, and more. It’s translated to well-
formatted, standard CSS. (http://sass-lang.com/)
LiveScript is a language which compiles to
JavaScript. Syntax similar to F# but dynamically
typed. Useful for accessing javascript libraries without
bindings/typescript definitions. (http://livescript.net/)
PhoneGap lets you turn your HTML 5 app into a native
app and publish it in the app stores
Thank you!
Any questions?
Web Apps vs. Native
Native Web applications
Pros:
• Performance
• Native look and feel
• Access whole of device’s API
• May prefer languages +
tooling
Cons:
• Walled garden (app stores)
• 30% of revenue goes to
Google/Apple/Microsoft
• Have to write application for
each platform separately
• Hard to support multitude of
screen sizes
Pros:
• HTML 5 now very capable
• Choose your own
language/framework
• Write your application only
once
• Can still deploy to app store
using products like PhoneGap
Cons:
• Lack of visibility
• Performance often not as
good as native apps
• Javascript sucks
Why Websharper?
• Turns out MVC isn’t a great pattern for modern web
applications
• Compositional
• Humans aren’t good at context-switching
• Seamless client server communication

Más contenido relacionado

Destacado

Clase4 ciclovitalfamiliar
Clase4 ciclovitalfamiliarClase4 ciclovitalfamiliar
Clase4 ciclovitalfamiliarmariaignaciapm
 
Guia de-marketing-en-internet-para-tiempos-dificiles
Guia de-marketing-en-internet-para-tiempos-dificilesGuia de-marketing-en-internet-para-tiempos-dificiles
Guia de-marketing-en-internet-para-tiempos-dificilesGrowth Hacking Talent
 
PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...
PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...
PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...PERUMIN - Convención Minera
 
Noviembre 2014
Noviembre 2014Noviembre 2014
Noviembre 2014moonmentum
 
Vni Neumomadrid (27 Nov 07) MañAna
Vni Neumomadrid (27 Nov 07) MañAnaVni Neumomadrid (27 Nov 07) MañAna
Vni Neumomadrid (27 Nov 07) MañAnajescarra
 
Trespa ® division locales comerciales
Trespa ® division locales comercialesTrespa ® division locales comerciales
Trespa ® division locales comercialesJOSE LUIS HERRAIZ, S.L
 
COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...
COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...
COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...Vall d'Hebron Institute of Research (VHIR)
 
Pronunciamiento confedapa
Pronunciamiento confedapaPronunciamiento confedapa
Pronunciamiento confedapaampaarcoiris
 
Preguntas novias y novios Cristianos
Preguntas novias y novios CristianosPreguntas novias y novios Cristianos
Preguntas novias y novios Cristianosjhon escobar segovia
 
Establecimiento de la conexion
Establecimiento de la conexionEstablecimiento de la conexion
Establecimiento de la conexionadjaes
 
Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013
Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013
Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013jedacha
 

Destacado (14)

Calor en la noche
Calor en la nocheCalor en la noche
Calor en la noche
 
Clase4 ciclovitalfamiliar
Clase4 ciclovitalfamiliarClase4 ciclovitalfamiliar
Clase4 ciclovitalfamiliar
 
Tipos de empresas
Tipos de empresasTipos de empresas
Tipos de empresas
 
Guia de-marketing-en-internet-para-tiempos-dificiles
Guia de-marketing-en-internet-para-tiempos-dificilesGuia de-marketing-en-internet-para-tiempos-dificiles
Guia de-marketing-en-internet-para-tiempos-dificiles
 
PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...
PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...
PERUMIN 31: Integrated assessment of deep sedimentary structures: exploring g...
 
Noviembre 2014
Noviembre 2014Noviembre 2014
Noviembre 2014
 
Vni Neumomadrid (27 Nov 07) MañAna
Vni Neumomadrid (27 Nov 07) MañAnaVni Neumomadrid (27 Nov 07) MañAna
Vni Neumomadrid (27 Nov 07) MañAna
 
Trespa ® division locales comerciales
Trespa ® division locales comercialesTrespa ® division locales comerciales
Trespa ® division locales comerciales
 
COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...
COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...
COST: Programa de Cooperación Europea en Ciencia y Tecnología (Dra. Almudena ...
 
Pronunciamiento confedapa
Pronunciamiento confedapaPronunciamiento confedapa
Pronunciamiento confedapa
 
Dictionnaire duweb
Dictionnaire duwebDictionnaire duweb
Dictionnaire duweb
 
Preguntas novias y novios Cristianos
Preguntas novias y novios CristianosPreguntas novias y novios Cristianos
Preguntas novias y novios Cristianos
 
Establecimiento de la conexion
Establecimiento de la conexionEstablecimiento de la conexion
Establecimiento de la conexion
 
Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013
Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013
Seguridad alimentaria-inocuidad-jennifer-daniel food tecnology summit 2013
 

Último

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
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 connectorsNanddeep Nachan
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
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 WorkerThousandEyes
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
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, ...Angeliki Cooney
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
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 AmsterdamUiPathCommunity
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 

Último (20)

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
+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...
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
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, ...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
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
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 

Mobile web apps with websharper

  • 1. F# Mobile Web Applications James Freiwirth Perfect Shuffle Ltd james@perfectshuffle.co.uk
  • 3. Why not go native? • Walled gardens (app stores) • Apple/Google/Microsoft take 20-30% of revenue • Have to write app for each platform… • … and customise it for each screen resolution • Less work, faster development, get your product released quicker!
  • 4.
  • 5. These are the resolutions just for Apple phones and tablets…
  • 6. Responsive web design to the rescue!
  • 7. Use a framework! Bootstrap http://twitter.github.io/bootstrap/ Suzy http://susy.oddbird.net/ Skeleton http://www.getskeleton.com/ Zurb Foundation http://foundation.zurb.com/ There are loads more...
  • 8. Javascript sucks, but it’s everywhere. alert("Why am I a " + typeof + "");
  • 9. Funscript and Websharper let you compile F# to Javascript!
  • 10. Which should I use? Funscript Websharper • Open source • Completely free • Can use typescript definitions • Client-side only at the moment • Minimalist F# to Javascript compiler • Open source for open source apps • Otherwise commercial licence • Server and client side • Seamless client-server RPC calls • Complete framework
  • 11. Developing/Hosting on Linux Use vagrant to create a reproducible development environment. http://www.vagrantup.com/ Ready-made base box: https://bitbucket.org/perfectshuffle/vagrant_raring_ mono/ Getting started guide: http://thecodedecanter.wordpress.com/2013/06/22/ hosting-websharperasp-net-apps-on-linux-with-mono- nginx/
  • 12. Other great tools Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables,mixins, selector inheritance, and more. It’s translated to well- formatted, standard CSS. (http://sass-lang.com/) LiveScript is a language which compiles to JavaScript. Syntax similar to F# but dynamically typed. Useful for accessing javascript libraries without bindings/typescript definitions. (http://livescript.net/) PhoneGap lets you turn your HTML 5 app into a native app and publish it in the app stores
  • 14. Web Apps vs. Native Native Web applications Pros: • Performance • Native look and feel • Access whole of device’s API • May prefer languages + tooling Cons: • Walled garden (app stores) • 30% of revenue goes to Google/Apple/Microsoft • Have to write application for each platform separately • Hard to support multitude of screen sizes Pros: • HTML 5 now very capable • Choose your own language/framework • Write your application only once • Can still deploy to app store using products like PhoneGap Cons: • Lack of visibility • Performance often not as good as native apps • Javascript sucks
  • 15. Why Websharper? • Turns out MVC isn’t a great pattern for modern web applications • Compositional • Humans aren’t good at context-switching • Seamless client server communication

Notas del editor

  1. Really depends on your goalsDownsides of native apps:Have to give Apple/Google/Microsoft big chunk of your revenue (app store)Reliant on others (app store approval delays)Have to write app for each platform (android, iOS, Blackberry, Windows Phone)…and customise it for each screen resolution
  2. Have to wait for approvalGive away a big chunk of your revenueLoads of extra workHave to write in a shitty language.
  3. 6 resolutions to support just for apple devices. And you probably want to support vertical and horizontal orientations. That’s a dozen.There are around 30 manufacturers of Android devices, each has many different screen sizes.
  4. Samples to show:http://www.gostowe.com/http://saltfireandtime.com/shop/
  5. Anyone who has dealt with web development knows that fighting with different browsers isn’t fun. Use a CSS framework to make your life easier.Show zurb formshttp://foundation.zurb.com/docs/components/forms.html
  6. Dynamic typing leads to bugs – accidental plus in exampleCrazy behaviourWeird scoping
  7. This is a funscript example
  8. Both excellent products with different focus.
  9. Anyone who has dealt with web development knows that fighting with different browsers isn’t fun. Use a CSS framework to make your life easier.Show zurb formshttp://foundation.zurb.com/docs/components/forms.html
  10. Anyone who has dealt with web development knows that fighting with different browsers isn’t fun. Use a CSS framework to make your life easier.PhoneGap also proves access to accelerometer, camera, compass, contacts, file, geolocation, media, notifications and device storage.
  11. Write three times: Somewhat mitigated with Xamarin/Mono but UI often the hardest bit to get rightPerformance: HTML5 probably not a good choice for graphics-heavy games