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 ciclovitalfamiliar
mariaignaciapm
 
Pronunciamiento confedapa
Pronunciamiento confedapaPronunciamiento confedapa
Pronunciamiento confedapa
ampaarcoiris
 
Establecimiento de la conexion
Establecimiento de la conexionEstablecimiento de la conexion
Establecimiento de la conexion
adjaes
 
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
jedacha
 

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

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Último (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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
 

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