This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Introduction
Web Storage
WebSQL
IndexedDB
File System Access
Final Considerations
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Angular jS Introduction by Google
A to Z angular introduction about Angular Framework which is single page application.
Angular JS and angular is very important for single page applications.
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Introduction
Web Storage
WebSQL
IndexedDB
File System Access
Final Considerations
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Angular jS Introduction by Google
A to Z angular introduction about Angular Framework which is single page application.
Angular JS and angular is very important for single page applications.
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
Angular: Go Mobile!
How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
Presentation at TODCon 08 that takes about AJAX usage. As with any slides this doesn't tell the whole story... This is essentially a case for progressive enhancement without actually saying it.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
Angular: Go Mobile!
How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
Presentation at TODCon 08 that takes about AJAX usage. As with any slides this doesn't tell the whole story... This is essentially a case for progressive enhancement without actually saying it.
The future of web development write once, run everywhere with angular.js and ...Mark Roden
This slide deck was used in support of BTE 102 - The future of web development write once, run everywhere with angular.js and domino at IBMConnectED 2015
Presentation was given with Mark Leusink
According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand.
In this webinar:
- Explore some innovative library mobile website designs and see how they were built.
- Understand how HTML, CSS, and JavaScript work together to build mobile websites.
- Learn what a mobile framework is and why they are used.
- Provide some existing mobile services/apps that can be included in library-created mobile websites.
- Acquire best practices in mobile Web development from start to finish.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
Cordova APIs
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices.
I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms.
I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.
Web development is evolving at a breakneck speed every passing year. New website technologies are being discovered regularly as developers explore new ways of innovation.
To make it easier for you, I have analyzed the shifts across industries and created an ultimate list of some of the latest web development trends in 2022.
My Slides for my Talk about being Always On is a lie and how developers could add improvements to their web site to deliver a great experience even when the network is flaky!
Join Pantheon co-founder Josh Koenig to learn about decoupled WordPress: what it is, the benefits and pitfalls, and how to approach a decoupled project. Koenig will walk through a decoupled build using the WP-API, and registrants can ask questions after the session.
“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”
Mobile applications Development - Lecture 8
Anatomy of an HTML 5 mobile web app
PhoneGap
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Ivano Malavolta
Slides of my invited talk at the 2nd workshop on Quality and Reliability Assessment of Robotic Software Architectures and Components (QRARSAC), co-located with the International Conference on Robotics and Automation (ICRA 2023).
Abstract of the talk. Today robotic systems are central to many industrial sectors, such as logistics, autonomous warehousing, and healthcare. If on one side ROS is helping roboticists by providing a standardized communication platform for robotic systems, on the other side ROSsystems are getting more and more large and complex, thus making it extremely difficult to ensure their level of quality, e.g., in terms of performance, security, energy efficiency, testability, maintainability. Improving the quality of robotic systems is not a new activity, but in this talk, we tackle it from a different perspective: we look at them from a software architecture perspective. In this talk, I will walk you through a series of experiments we conducted at the Vrije Universiteit Amsterdam targeting the architecture of ROS systems, we will discuss some architectural tactics for ROS systems, and will close with an overview of our open-source tool for automatically executing experiments on robotics software.
The slides of a short presentation I gave about my experience about working in the context of EU grants. It contains tips and tricks for the before/during/after phases of a EU project.
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)Ivano Malavolta
The slides of my presentation about the Green Lab at the event called Research Cocktail (October 2020). The event is organized by the Computer Science Department of the Vrije Universiteit Amsterdam.
The source code of our tools and the replication package of our experiments performed in the Green Lab can be found here: https://github.com/S2-group
For further details about the Green Lab and all our activities around it, you can contact me at i.malavolta@vu.nl
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Ivano Malavolta
Slides of my presentation at the NIER track of the 41th International Conference on Software Engineering (ICSE 2019).
The paper is available here: http://www.ivanomalavolta.com/files/papers/ICSE_2019_NAPPA.pdf
How Maintainability Issues of Android Apps Evolve [ICSME 2018]Ivano Malavolta
Slides of my presentation at the Research track of the 34th International Conference on Software Maintenance and Evolution (ICSME 2018).
The full paper is available here: http://www.ivanomalavolta.com/files/papers/ICSME_2018.pdf
Collaborative Model-Driven Software Engineering: a Classification Framework a...Ivano Malavolta
Slides of my presentation at the Journal first track of the 40th International Conference on Software Engineering (ICSE 2018).
The accompanying extended abstract is available here: http://www.ivanomalavolta.com/files/papers/ICSE_2018_JournalFirst.pdf
The original TSE paper is available here: http://www.ivanomalavolta.com/files/papers/TSE_2017.pdf
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
Modeling behaviour via UML state machines [Software Design] [Computer Science...Ivano Malavolta
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Ivano Malavolta
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
Modeling and abstraction, software development process [Software Design] [Com...Ivano Malavolta
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
[2017/2018] AADL - Architecture Analysis and Design LanguageIvano Malavolta
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
[2017/2018] Introduction to Software ArchitectureIvano Malavolta
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.it/.
http://www.ivanomalavolta.com
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
5. What is a Web App?
A software built with web technologies that is accessible via a mobile browser
The browser may be either
the standard device browser
or an embedded browser
(Hybrid app)
7. Setting up the Server
As usual, it all starts with an HTTP request
Then you need:
• Data
• A device detection mechanism [optional]
• The app itself
8. Data
Usually mobile apps do not talk directly with the database
à do not even think about JDBC, drivers, etc!
à They pass through an application server and communicate via:
• standard HTTP requests for HTML content (eg PHP)
• REST-full services (XML, JSON, etc.)
• SOAP
9. Data
• Data can be stored in any classical way:
• Relational
• Graph
• Key-value
• Document-based
Latest trend à backend-as-a-service
10. BaaS
1. Developers build a visual model of their DB
2. The service generates APIs and client-side
libraries(compatible with Android, Windows
Phone, etc.)
3. The data produced/consumed in the app can be
pushed/pulled to their DB
• Communication is handled via REST-based
APIs
11. Example of Baas software: BaasBox
Main features:
• User management
• ACL
• Friendships
• Authentication via Facebook and Google+
• Document-based data manegement (via OrientDB)
• Assets management (fotos, documents, or files)
• Push notifications
The “Box” in BaasBox means that all the features are
in a standalone server, just like a box.
No Application Server, no Database Server, just a
JVM and nothing more
Rest API
Web
dashboard
http://www.baasbox.com/
12. Ok, but what about mobile apps?
BROWSER
<html>
<head>
<script src=” ...” />
</head>
<body>
...
NATIVE
WRAPPER
<html>
<head>
<script src=” ...” />
</head>
<body>
...
PLATFORM APIs
NATIVE
APP
01010101010101101010
1010101011011010
010101010101011101
010101010101011010
PLATFORM APIs
Native
Web
Hybrid
13. Native
http://bit.ly/GWOaP1
PRO
• Lets you create apps with rich user interfaces and/or heavy graphics
CONS
• Development Time
• Development Cost
• Ongoing Maintenance
• No portability (apps cannot be used on other platforms)
PRO
CONS
14. Examples of native apps
http://www.ea.com/it/ipad/nfs
http://www.whatsapp.com/
15. Web
http://bit.ly/GWOaP1
PRO
• Offers fast development, simple maintenance, and full application portability
• One mobile web app works on any platform
CONS
• Can’t handle heavy graphics
• Can’t access camera or push notifications
PRO
CONS
17. Hybrid
http://bit.ly/GWOaP1
PRO
• Development speed of mobile web apps
• Device access and app store distribution of native apps
CONS
• Can’t handle heavy graphics
• Requires familiarity with a mobile framework
PRO
CONS
21. My vision
Mobile web seems to be the only long-term commercially viable platform for mobile
FRAGMENTATION
THE WEB
USER EXPECTATIONS
22. When you go native there are too many platforms to be supported
FRAGMENTATION
23. The web is the only platform that:
• works across devices
• apps share the same set of standards
• the same app can work also on a desktop
THE WEB
The web is an advanced technology:
• webGL
• Local storage management
• Positioning & mapping
• Real-time data
• ...
24. Users expect things to just work
à they don’t care about what platform they have
àthey simply expect that your app will be available for their device
à YOU HAVE TO BE CROSS-PLATFORM
USER EXPECTATIONS
25. PhoneGap
You develop your app using the usual three guys
You use the same web view of the native OS
• iOS = UIWebView
• Android = android.webkit.WebView
http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30
26. What is PhoneGap?
The UI layer is a web browser view
• 100% width
• 100% height
Headless web browser
• No URL bar
• No decorations
• No zooming
• No text selection
27. It looks very similar to Apache Cordova…
Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation
à
wider audience and contributors
à
transparent governance
Better documentation
à
easier contributions for companies
Apache Licensing
There was only one problem....
trademark ambiguity
à CORDOVA
PhoneGap is a distribution of
Apache Cordova
29. HTML 5
HTML5 will be the new standard for HTML
HTML5 is still a work in progress
W3C final recomendation: 2020
Top browsers support many (not all) of the new HTML5 elements
http://mobilehtml5.org
http://caniuse.com
32. New Structural Tags
Main Goal: separate presentation from content
• Poor accessibility
• Unnecessary complexity
• Larger document size
Most of the presentational features from earlier versions of HTML are no longer supported
New structural tags
33. New Structural Tags
<header> header region of a page or section
<footer> footer region of a page or section
<nav> navigation region of a page or section
<section> logical region of a page
<article> a complete piece of content
<aside> secondary or related content
http://bit.ly/JCnuQJ
34. Forms
Main Goal: reduce the Javascript for validation and format management
Example:
Form input types
35. Form Input Types
Form input types degrade gracefully
à
Unknown input types are treated as text-type
http://bit.ly/I65jai
36. Audio
<audio> : a standard way to embed an audio file on a web page
<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Not Supported
</audio>
Multiple sources à the browser will use the first recognized format
Audio
37. Audio Javascript API
HTML5 provides a set of Javascript APIs for interacting with an audio element
For example:
play() pause() load() currentTime ended volume…
à http://www.w3.org/wiki/HTML/Elements/audio
38. Video
<video> : a standard way to embed a video file on a web page
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Not Supported
</video>
Multiple sources à the browser will use the first recognized format
Video
39. Accelerometer
There are 4 ways to store data locally in a web app:
• Web storage
• Local Storage
• Session Storage
• WebSQL
• Indexed DB
• File System Access
Local storage and file system access
Web storage, WebSQL, and IndexedDB
conform to W3C specifications and are
provided by the browser itself
File system access API conforms to its
corresponding W3C specification
40. Web Storage
LocalStorage
stores data in key/value pairs
persists across browser sessions
SessionStorage
stores data in key/value pairs
data is erased when a browser session ends
41. WebSQL
relational DB
support for tables creation, insert, update, …
transactional
persists across browser sessions
You can perform classical SQL queries
tx.executeSql("SELECT
*
FROM
User“,
[],
function(tx,
result)
{
//
callback
code
});
42. IndexedDB
• It tries to combine Web Storage and WebSQL
• You can save data as key/value pairs
• You can define multiple DBs
• Good Performance
data is indexed
asynchronous à it does not block the UI
You can see a store as a big SQL table with only key/value pairs
à you don’t need to define a schema upfront
43. Considerations
You will likely use more than one API in combination
à Use the right API for the right job
Local Storage
• it is not transactional à race conditions
• very simple API, no schema
• only String data à performance issues for complex data due to JSON serialization
• session storage will be cleared after the app is closed
• limited quota
44. Considerations
WebSQL
• SQL-based à fast and efficient
• transactional à more robust
• asynchronous à does not block the UI
• rigid data structure à data integrity vs agility
• limited quota
45. Considerations
IndexedDB
• simple data model à easy to use
• transactional à more robust
• asynchronous à does not block the UI
• good search performance à indexed data
• data is unstructured à integrity problems
• limited quota
• not supported by every platform (e.g., iOS)
46. Geolocalization
Gets Latitude and Longitude from the user’s browser
There is also a watchPosition method wich calls a JS function every time the user moves
Geolocalization
47. Example
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log(‘no geolocalization’);
}
}
function showPosition(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
}
48. WebSockets
Bidirectional, full-duplex communication between devices and server
Specifically suited for
chat, videogames, drawings sharing, real-time info
Requires a Web Socket Server to handle the protocol
Web sockets
49. WebSockets - Overview
1. Client notifies websocket server (EventMachine) of an event, giving ids of recipients
2. The server notifies all the active clients (subscribed to that type of event)
3. Clients process event
when given recipient Id
matches the client’s one
http://bit.ly/Ixcupi
50. Alternative - Polling via AJAX
+ Near real-time updates (not purely real-time)
+ easy to implement
+ no new technologies needed
- they are requested from the client and cause increased network traffic
- AJAX requests generally have a small payload and relatively high amount of http headers
(wasted bandwith)
51. Canvas
Canvas allows you to draw anything inside the browser
http://bit.ly/Ie4HKu
http://bit.ly/LUKXkr
http://bit.ly/LULa79
http://bit.ly/LC8AgY
Canvas
52. Canvas
It uses nothing more than JavaScript and HTML
à no external plugins, no libraries, etc.
You can create lines, use images, use text, apply transformations, etc.
http://bit.ly/KsKLv1
54. Web Workers
Javascript is a single-threaded language
à If a tasks take a lot of time, users have to wait
Web Workers provide background processing capabilities to web applications
They typically run on separate threads
à apps can take advantage of multicore CPUs
Web workers
55. Web Workers
Web Workers can be used to:
• prefetch data from the Web
• perform other ahead-of-time operations to provide a much more lively UI.
Precious on mobile Web applications because of the slow network speed
56. Web Workers
Any JS file can be launched as a worker
Example of Web Worker declaration:
var worker = new Worker(“worker.js”);
In order to be independent from other workers, each worker script cannot access the DOM
57. Web Workers
The main JS script can communicate with workers via postMessage() calls:
$(‘#button’).click(function(event) {
$(‘#output’).html(“starting”);
worker.postMessage(“start”);
});
worker.onmessage = function(event) {
$(‘#output’).html(event.data);
}
58. Web Workers
The web worker script can post back messages to the main script:
onmessage = function(event) {
if(event.data === “start”) {
var result;
// do something with result
postMessage(result);
}
}
60. The killer app!
• Check console
• Breakpoints
• Update the DOM at run-time
• Access to all local DBs
• Network profiling
• CPU and memory profiling
• Monitor event listeners
• Monitor elements’ rendering time
62. Desktop Browser
• very quick
• very handy functions
• see Chrome’s Web Development Tools
• Breakpoints
PRO
• browsers’ small differences and bugs
• cannot test all mobile-specific functionalities
• you need PhoneGap shims
CONS
64. Ripple
• very quick
• can use Chrome’s Web Development Tools
• You can test PhoneGap’s API from the Desktop
• browsers’ small differences and bugs
• cannot test the interaction with external apps
PRO
CONS
It is based on Ripple, a Chrome
plugin for mobile dev
from PhoneGap 3.0.0, you need to
use the Ripple available at Apache
npm
install
-‐g
ripple-‐emulator
ripple
emulate
65. Simulator
• Officially supported by platform vendors
• You use the “real” device’s browser
PRO
• device’s performance is not considered
• this is iOS-specific
• Android’s emulator is a joke
• device’s capabilities are only simulated
CONS
66. On device
• accurate
• still handy
• real performance tests
• real browser tests
PRO
• Deployment takes some time (~6 seconds for iOS)
CONS
67. Remote Debugging
From iOS 6, Apple provided Mobile Safari with a remote web inspector
à You can debug your app by using the classical web inspector of Desktop Safari
It can connect both to
• The iOS emulator
• The real device
Since Android 4.4, this feature is
available via Chrome’s web dev kit
68. Mobile debugging reference table
Make a favor to yourself,
don’t debug craftsman way:
console.log()
+
alert()
iOS
Android
Desktop Browser
Ripple
Device/emulator
Safari Web
Inspector
X
Chrome Web
Inspector
X
69. Roadmap
Anatomy of a web app
Debugging (mobile) web apps
HTML5
Maintainable web apps
71. Introduction
We are building apps, not web sites
If your code is not structured:
• it is extremely easy that your web app becomes a
big mess of HTML + CSS + JavaScript
• maintaining each part of your app asks for a
deep analysis of ALL its aspects (logic, presentation, etc.)
• you may waste a whole day due to a missing
<
72. What we want to avoid
Imagine yourself trying to change either:
• how a movie should be rendered in your app
• the REST API providing info about movies
78. Models
Models represent your data
Each model represents a data type in your app, together with the logic surrounding it, like:
• persistence
• conversions
• validation
• computed properties
• access control
MVC: Notify their observers about their
state using the Observer pattern
81. Collections
Collections are ordered sets of models
You can:
• bind change events to be notified when any model in the collection has been modified
• listen for add and remove events
• fetch the collection from the server (or other persistence layers)
• find models or filter collections themeselves
The model attribute of a collection represents the kind of model that can be stored in it
Any event that is triggered on a model in a collection
will also be triggered on the collection directly
MVC: Notify their observers
about state using the Observer
pattern (same as models)
84. Views
Views represent and manage the visible parts of your application
They are also used to
• listen to interaction events
• and react accordingly
views can be rendered at any time, and inserted into the DOM
you get high-performance UI rendering
with as few reflows and repaints as possible
MVC: observe models, and
update itself according to the
state of the models + manage
user inputs (it’s a controller, to
this sense)
85. Example of view
Events map
“event_name selector”: callback
Events callbacks
create the
DOM subtree
87. The router
Backbone.Router
provides methods for routing client-side pages,
and connecting them to actions and events
At a minimum, a router is composed of two main parts:
routes
an hash that pairs routes to actions
actions
JS functions triggered when certain routes are navigated
89. Backbone-based workflow
• You organize your interface into logical views backed by models
• Each view can be updated independently when the model changes,
without having to redraw the page
You can bind your view‘s
render() function to the
model‘s "change” event
à
now everywhere that
model data is displayed in the
UI, it is always up to date
91. Why Require JS
We are building apps, not website
We need well-specified and isolated JS files/modules
Code complexity grows as the app gets bigger
à we need some sort of #include/import/require
à ability to load nested dependencies
92. What we want to avoid
uncontrolled scripts
poor control flow understanding
93. Require JS
RequireJS is a JavaScript file and module loader
Using a modular script loader like Require JS will improve the modularity of your code:
à speed in implementing changes
à better undestanding of the code
Require JS allows modules to be loaded as fast as possible, even out of order, but evaluated in the
correct dependency order
It is built on the Module Pattern
JavaScript file and module loader
95. Module VS script files
A module is different from a traditional script file in that it defines a well-scoped object that avoids
polluting the global namespace à its retained objects can be deleted by the GC
It can explicitly list its dependencies and get a handle on those dependencies without needing to refer to
global objects, but instead receive the dependencies as arguments to the function that defines the
module
VS
96. Module definition
Required
modules (array)
References to required modules
Dependent module usage
This function is called when
zepto.js is loaded.
If zepto.js calls define(), then
this function is not fired until
also zepto’s dependencies
have loaded
97. Require JS under the hoods...
1. loads each dependency as a script tag, using head.appendChild() and waits for all dependencies to
load
2. computes the right order in which to call the functions that define the modules
3. calls the module definition functions of each dependency in the right order
main.js
jQuery
Backbone
SpinJS
MoviesCollection
MovieModel
MoviesView
1
2
3
4
5
6
7
99. Why Handlebars
We want to separate presentation from logic
TRANSLATE TO: we don’t want to put any HTML element into JavaScript code
separate logic from presentation
Imagine yourself trying to change how a movie should be rendered in
your app...
103. Handlebars summary
Each Template can contain Expressions and Helpers operating on them
The main helpers are:
• with
• each
• if
/
else
/unless
You can define your own Helpers that operate on expressions, they return HTML code
A template can be (pre)-compiled and must be executed with a context in order to return the
final HTML fragment
104. Example of built-in helper
It renders the block if its argument is not equal to false,
undefined,
null,
[]
If / Else
<div
class="entry“>
<h1>{{title}}</h1>
{{#if
author}}
<h2>By
{{firstName}}
{{lastName}}</h2>
{{#else}}
<h2>Unknown
author</h1>
{{/if}}
</div>
{
title:
"My
first
post!",
author:
undefined
}
}
<div
class="entry“>
<h1>My
first
post!</h1>
<h2>Unknown
author</h2>
</div>
106. Combining Backbone, Require, and Handlebars
Handlebars templates can be seen as special Require modules
So we can have the following:
• a separate HTML5 file for each template
• a Backbone view can have a dependency to each template
• the template can be executed by using a JSON object of the Backbone model as context
109. I implemented all best practices and advices in this
presentation in a generic app template available here:
https://github.com/iivanoo/cordovaboilerplate
110. Towards automation…
Towards a Collaborative Framework for the Design and Development of Data-
Intensive Mobile Applications. Mirco Franzago, Ivano Malavolta, Henry Muccini.
Proceedings of the 1st ACM International Conference on Mobile Software
Engineering and Systems, June 2-3, 2014 Hyderabad, India