Lucio Grenzi - Use Ionic framework to develop mobile application

•Download as ODP, PDF•

4 likes•2,695 views

Lucio Grenzi gave a presentation on using the Ionic framework to develop hybrid mobile applications. He discussed the advantages of hybrid apps over native and web apps. Grenzi explained that Ionic uses Apache Cordova to allow HTML and JavaScript apps to access native device functionality. He demonstrated how to install Ionic and create a basic project, and described some of Ionic's built-in UI elements like lists, tabs and navigation. Grenzi also highlighted resources like Ionic Lab and Creator for designing apps visually without code.

Technology

MILAN 20/21.11.2015
Use Ionic framework to develop mobile
applications
Lucio Grenzi

MILAN 20/21.11.2015
Who is this guy
• Freelance
• Front end web developer
• Over 10 years of
programming experience
• Open source addicted
• Github.com/dogwolf

MILAN 20/21.11.2015 - Grenzi Lucio
Overview
• Native vs Web vs Hybrid app
• Ionic intro
• Ionic CLI
• UI Components
• Demos

MILAN 20/21.11.2015 - Grenzi Lucio
I want build a new app!

MILAN 20/21.11.2015 - Grenzi Lucio
https://www.flickr.com/photos/johnjoh/448665548/

MILAN 20/21.11.2015 - Grenzi Lucio
Native apps
• More platform, more problem
• Language is specific to platform => codebase
separation
• Dimisihing the return

MILAN 20/21.11.2015 - Grenzi Lucio
Web apps
Are website that looks like an app
Run by a browser
Native-like functionality in the browser

MILAN 20/21.11.2015 - Grenzi Lucio
Hybrid apps
• Embed HTML5 apps inside a thin native
container
• They can take advantage of the many device
features available.
• Single base code (HTML 5 + Css + Js)

MILAN 20/21.11.2015 - Grenzi Lucio
Apache Cordova
Open-source framework
Run HTML/JavaScript based applications
Native device functionality is exposed
via JavaScript APIs
Does not include UI Components

MILAN 20/21.11.2015 - Grenzi Lucio
Cordova architecture
https://blog.codecentric.de/en/2014/11/ionic-
angularjs-framework-on-the-rise/

MILAN 20/21.11.2015 - Grenzi Lucio
ngCordova
collection of 70+ AngularJS extensions
built on top of the Cordova API
Made build, easy deploy, test Cordova apps
http://ngcordova.com/

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic framework
Build mobile apps faster with the
web mobile you know and love

MILAN 20/21.11.2015 - Grenzi Lucio
Modern web skills

MILAN 20/21.11.2015 - Grenzi Lucio
Supported devices
PlannedAndroid 4+IOS 6+

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Architecture
https://blog.codecentric.de/en/2014/11/ionic-
angularjs-framework-on-the-rise/

MILAN 20/21.11.2015 - Grenzi Lucio
Powered by AngularJs
• develop rich and robust
applications
• create a powerful SDK
• extend HTML vocabulary
for your application
• fully extensible

MILAN 20/21.11.2015 - Grenzi Lucio
Sass
• Give your app the
appropriate look and
feel
• CSS can be quickly
manipulated
• Standalone CSS
(indipendent of JS
framework)

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic's adoption in numbers
• Over 20.000 stars on GitHub (Top 40
project)
• 600.000+ Ionic apps have been started from
the CLI
• Ionic CLI was downloaded 208.114 times in
the last month
• Released v1.0 on May 2015

MILAN 20/21.11.2015 - Grenzi Lucio
How to get started

MILAN 20/21.11.2015 - Grenzi Lucio
Install Ionic
First install node.js
Install Android ADT / iOS Xcode
Open console and type
$ npm install -g cordova ionic

MILAN 20/21.11.2015 - Grenzi Lucio
Start a project
$ ionic start iorun blank
Comprehensive app structure
Ready for deploy and building

MILAN 20/21.11.2015 - Grenzi Lucio
Run it
$ cd iorun
$ ionic platform add android
$ ionic build android
$ ionic emulate android

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic built-in elements

MILAN 20/21.11.2015 - Grenzi Lucio
Complex Lists

MILAN 20/21.11.2015 - Grenzi Lucio
Collection repeat

MILAN 20/21.11.2015 - Grenzi Lucio
Navigation

MILAN 20/21.11.2015 - Grenzi Lucio
Swipe menu'

MILAN 20/21.11.2015 - Grenzi Lucio
Action sheet

MILAN 20/21.11.2015 - Grenzi Lucio
Ionicons

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic box
• Ready-to-go hybrid development environment
for building mobile apps with Ionic,
Cordova, and Android
• https://github.com/driftyco/ionic-box

MILAN 20/21.11.2015 - Grenzi Lucio
Choose your Android version
Bootstrap.sh

MILAN 20/21.11.2015 - Grenzi Lucio
Android version adoption
https://developer.android.com/about/dashboards/index.html

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Lab

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Creator

MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Market

MILAN 20/21.11.2015 - Grenzi Lucio
Getting started guide
ionicframework.com/getting-started
Documentation
ionicframework.com/docs
Visit the Community Forum
forum.ionicframework.com
Contribute on GitHub
github.com/driftyco/ionic

MILAN 20/21.11.2015 - Grenzi Lucio
Questions?
https://www.flickr.com/photos/derek_b/3046770021/

MILAN 20/21.11.2015 - Grenzi Lucio
https://www.flickr.com/photos/wwworks/4759535950/

MILAN 20/21.11.2015 - SPEAKER’S NAME
Leave your feedback on Joind.in!
https://m.joind.in/event/codemotion-milan-2015

A presentation on Ionic Mobile Applications presented at Boca JS: http://www.meetup.com/Boca-JS/events/227150049/. Traditionally, building Hybrid Mobile Apps with JavaScript (or other languages) was a middle ground between Mobile websites and Mobile Applications. Generally providing a more native like experience than websites, but with a reduced user experience compared to applications due to issues like slow animations or limited mobile OS access. The Ionic framework was created to provide hybrid development that does not compromise; matching native user experience while still allowing tools and techniques used on websites.

Developing Hybrid Applications with IONIC

Fuat Buğra AYDIN

Hybrid Mobile Development with Apache Cordova,AngularJs and ionic

Ermias Bayu

IONIC - Hybrid Mobile App Development

Malan Amarasinghe

Hybrid Apps with Angular & Ionic Framework

Cihad Horuzoğlu

This document discusses hybrid mobile apps that can be built using Angular and the Ionic framework. Hybrid apps allow developers to build apps that can run on multiple platforms using web technologies like HTML, CSS, and JavaScript. The Ionic framework builds on Apache Cordova to provide access to native device capabilities and solve issues with supporting multiple screen resolutions. Developers can use Angular for features like data binding and services, and Ionic adds capabilities specific to building mobile apps like routing and UI components optimized for touch. The document provides instructions for setting up Ionic and Cordova and creating a basic sidemenu template project to get started developing hybrid mobile apps.

Ionic Framework

Thinh VoXuan

This document provides an introduction to hybrid mobile applications and the Ionic framework. It discusses the differences between native and hybrid apps, and introduces Ionic as a framework that allows building mobile apps using HTML, CSS, and JavaScript. The document outlines components of Ionic including AngularJS, Cordova, plugins, and the ecosystem. It also covers basic Ionic concepts such as installation, commands, directory structure, routing, views, and UI components. The agenda concludes with a demo of a TODO list application built with Ionic.

Ionic 2 intro

Wojciech Langiewicz

Ionic is an open-source SDK that allows developers to build hybrid mobile apps using HTML, CSS and JavaScript. Ionic is based on AngularJS and uses Cordova to access native device features from a web view. Ionic 2 improves on Ionic 1 by being based on Angular 2 and aiming for the latest mobile platforms and performance. For new projects, Ionic 1 is no longer recommended over Ionic 2 which is currently in beta. The presentation provides an overview of the Ionic ecosystem and demonstrates building a sample app.

This document summarizes a presentation about building mobile apps using the Ionic framework. The presentation introduces Ionic, a framework that allows developing cross-platform mobile apps using HTML, CSS, and JavaScript. It discusses the benefits of hybrid mobile development using Ionic over native development. The agenda includes explaining why to build mobile apps, comparing hybrid and native development, introducing AngularJS which powers Ionic, demonstrating how to install and use Ionic, and building a sample to-do list app to demonstrate Ionic in action.

Creating an hybrid app in minutes with Ionic Framework

Julien Renaux

Introduction to Ionic framework

Shyjal Raazi

This document provides an overview of the Ionic Framework for developing hybrid mobile applications. It discusses the advantages of hybrid apps over native apps, including using a single codebase across platforms. It introduces Ionic as an HTML5 framework built on Angular and Cordova, containing CSS and JavaScript components for building mobile-optimized apps. It covers getting started with Ionic, the CLI, components, platform access tools, and includes examples. The goal of Ionic is to provide native-like performance for building beautiful, easy-to-maintain hybrid mobile apps.

Mobile Applications with Angular 4 and Ionic 3

Oleksandr Tryshchenko

Creating mobile apps - an introduction to Ionic (Engage 2016)

Mark Leusink

This document provides an introduction to creating hybrid mobile apps using Ionic and connecting them to IBM Domino. It discusses what hybrid apps and Ionic are, how Ionic uses AngularJS and Cordova to build cross-platform apps, and how to connect an Ionic app to Domino for data via REST. It also covers setting up an initial Ionic app, common UI components, testing and deploying Ionic apps, and additional services like push notifications. The document demonstrates building a basic Ionic app and extending it to retrieve and update real data from a Domino backend over REST.

Hybrid app development with ionic

Wan Muzaffar Wan Hashim

Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course. In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore. It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.

Ionic framework one day training

Troy Miles

This one day training covers topics related to building mobile apps with the Ionic Framework including JavaScript, AngularJS, PhoneGap/Cordova, plugins, debugging, and more. The agenda includes introductions to JavaScript concepts like hoisting, closures, and object literals as well as frameworks like AngularJS and tools like PhoneGap/Cordova. The training aims to provide attendees with the skills needed to create good looking, well-performing mobile apps for clients.

Intro to Ionic for Building Hybrid Mobile Applications

Sasha dos Santos

Ionic is a free framework that allows users to easily build hybrid mobile applications for iOS and Android using Angular and Cordova. Ionic provides a command line interface, CSS classes, reusable components (directives) and various tools for testing and development. In this session, you'll get a birdseye view of what Ionic has to offer, as well as guidelines for building your first Ionic app, including the use of tools such as Yeoman, Bower and Grunt.

Ionic Crash Course! Hack-a-ton SF

Lukas Ruebbelke

Cross Platform Mobile Apps with the Ionic Framework

Troy Miles

What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions. In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device. Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.

Cordova, Angularjs & Ionic @ Codeaholics

Eddie Lau

This document discusses building native mobile apps with Cordova, Angular, and Ionic. It introduces these tools: Cordova handles the native layer and can build apps for different platforms; Angular is used for MVC and data binding; and Ionic provides UI components with mobile design patterns. It then demonstrates how to create a chat room app with these technologies, using Firebase for real-time data syncing across clients. The document estimates that a basic Ionic app can be made in 1 hour, with additional time spent adding Angular functionality, modifying layouts, and integrating Firebase. Source code for the example chat room app is provided on GitHub with tags indicating different implementation stages.

Building an Ionic hybrid mobile app with TypeScript

Serge van den Oever

Hybrid app in ionic framework overview

Sanket Devlekar

Ionic Framework

Cristián Cortéz

Hybrid mobile and Ionic

Liju Pillai

This document discusses options for building mobile apps, including native, web, and hybrid. It focuses on the hybrid approach using Apache Cordova and the Ionic framework. Cordova allows building apps with HTML, CSS, and JavaScript that can access native device features. Ionic provides UI components, gestures, and tools to develop mobile-optimized apps. The document outlines choices for mobile development, describes Cordova and its plugins, compares it to PhoneGap, and details features of the Ionic framework, performance optimization techniques, and alternatives.

Ionic Framework

Dylan Swartz

The document discusses Ionic, an open source HTML5 hybrid app development framework that uses AngularJS, Cordova, and Sass components to build mobile apps with a sexy CLI and hardware acceleration. It mentions the author works at Ivorypenguin and built a Minecraft nether portal calculator app using Ionic to demonstrate how to start a new Ionic project and provides links to the author's GitHub and email for further contact.

Build Consumer Apps Using Mobile SDK and Ionic Framework

Salesforce Developers

Workshop on Hybrid App Development with Ionic Framework

Aayush Shrestha

Ionic CLI Adventures

Juarez Filho

The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps. Learn how to use the power of Ionic CLI, you'll see the most important commands and resources to go deeper into all goodies provided by this amazing tool. Ionic CLI is so fun to use, after this presentation you'll feel more comfortable using the terminal while develop hybrid apps with Ionic Framework.

Getting started with the Ionic Framework

Anuradha Weeraman

Jab12 - Joomla! architecture revealed

Ofer Cohen

This document discusses the architecture of Joomla, an open source content management system (CMS). It begins by introducing the author and their experience with Joomla. It then provides overviews of key aspects of Joomla's architecture, including its use of object-oriented programming, the model-view-controller (MVC) design pattern, templates, plugins, factories, singletons, bridges, and adapters. Design patterns help make the code reusable and extensible. The document aims to explain how Joomla works under the hood to help developers build complex websites and troubleshoot issues.

Cross platform mobile application architecture for enterprise

Venkat Alagarsamy

The document discusses cross-platform mobile application architecture for enterprises. It covers the need for enterprise mobile apps due to workforce mobility trends. It compares native, web, and hybrid approaches and recommends hybrid for supporting multiple platforms. Key elements of hybrid apps include device and screen agnosticism, offline storage, security, and access to device capabilities. Frameworks like Phonegap and technologies like HTML5, CSS, and JavaScript enable hybrid development.

What's hot

Building mobile app with Ionic Framework

Huy Trần

Creating an hybrid app in minutes with Ionic Framework

Julien Renaux

Introduction to Ionic framework

Shyjal Raazi

Mobile Applications with Angular 4 and Ionic 3

Oleksandr Tryshchenko

Creating mobile apps - an introduction to Ionic (Engage 2016)

Mark Leusink

Hybrid app development with ionic

Wan Muzaffar Wan Hashim

Ionic framework one day training

Troy Miles

Intro to Ionic for Building Hybrid Mobile Applications

Sasha dos Santos

Ionic Crash Course! Hack-a-ton SF

Lukas Ruebbelke

Cross Platform Mobile Apps with the Ionic Framework

Troy Miles

Cordova, Angularjs & Ionic @ Codeaholics

Eddie Lau

Building an Ionic hybrid mobile app with TypeScript

Serge van den Oever

Hybrid app in ionic framework overview

Sanket Devlekar

Ionic Framework

Cristián Cortéz

Hybrid mobile and Ionic

Liju Pillai

Ionic Framework

Dylan Swartz

Build Consumer Apps Using Mobile SDK and Ionic Framework

Salesforce Developers

Workshop on Hybrid App Development with Ionic Framework

Aayush Shrestha

Ionic CLI Adventures

Juarez Filho

Getting started with the Ionic Framework

Anuradha Weeraman

What's hot (20)

Building mobile app with Ionic Framework

Creating an hybrid app in minutes with Ionic Framework

Introduction to Ionic framework

Mobile Applications with Angular 4 and Ionic 3

Creating mobile apps - an introduction to Ionic (Engage 2016)

Hybrid app development with ionic

Ionic framework one day training

Intro to Ionic for Building Hybrid Mobile Applications

Ionic Crash Course! Hack-a-ton SF

Cross Platform Mobile Apps with the Ionic Framework

Cordova, Angularjs & Ionic @ Codeaholics

Building an Ionic hybrid mobile app with TypeScript

Hybrid app in ionic framework overview

Ionic Framework

Hybrid mobile and Ionic

Ionic Framework

Build Consumer Apps Using Mobile SDK and Ionic Framework

Workshop on Hybrid App Development with Ionic Framework

Ionic CLI Adventures

Getting started with the Ionic Framework

Viewers also liked

Jab12 - Joomla! architecture revealed

Ofer Cohen

Cross platform mobile application architecture for enterprise

Venkat Alagarsamy

AWS and VMware: How to Architect and Manage Hybrid Environments

RightScale

AWS and VMware are not an either/or decision. Almost every enterprise is looking to leverage AWS in addition to their existing VMware virtualized environments. They want to choose the right venue for each application and move applications between VMware and AWS as their business needs dictate. In this webinar, you’ll hear how RightScale helps customers to successfully implement and manage hybrid environments that span AWS, VMware vSphere and other clouds. In this webinar we will: -5 common use cases for hybrid environments -Why VMware isn’t the same as a cloud, and what to do about it -Architecture considerations for hybrid environments -Is portability a possibility or a pipe dream? -Demo of a single-pane-of-glass to manage hybrid environments

ASAS 2013 - Architecture for dynamic mobile forms at MoreApps

Avisi B.V.

The document describes an architecture for developing dynamic mobile forms using a single code base across platforms and devices. It involves generating HTML, JavaScript and CSS in the cloud and either retrieving that code onto mobile devices or allowing offline usage. The cloud component includes an application builder, version control, storage of application metadata, HTML and mobile data. It also handles deployment of applications, API connectors, email and retrieving application code onto mobile devices.

Introduction to Hybrid Application Development

Dotitude

This document provides an overview of hybrid mobile apps. It begins by discussing global smartphone market shares and mobile app development approaches. Native apps are explained as binary files that can access all device APIs but require platform-specific SDKs. Hybrid apps combine native development with web technologies, allowing a web app to run within a native wrapper that provides a bridge to device APIs. The document outlines the skills, frameworks, architectures, advantages and disadvantages of hybrid apps, and discusses challenges around UI design and cross-platform compilation.

Hybrid mobile apps

Erik Paulsson

This document discusses hybrid mobile apps, which are native apps that use an embedded browser to run some or all of their user interface. Hybrid apps combine the advantages of native apps like being downloaded from app stores with the advantages of web apps like being able to write code once and deploy to multiple platforms. Frameworks exist that allow hybrid apps to access native device capabilities like the camera from JavaScript. The document argues that with frameworks, hybrid apps can provide rich experiences comparable to native apps.

Viewers also liked (6)

Jab12 - Joomla! architecture revealed

Cross platform mobile application architecture for enterprise

AWS and VMware: How to Architect and Manage Hybrid Environments

ASAS 2013 - Architecture for dynamic mobile forms at MoreApps

Introduction to Hybrid Application Development

Hybrid mobile apps

Similar to Lucio Grenzi - Use Ionic framework to develop mobile application

Wikipedia Mobile App with PhoneGap

Ted Chien

Basics of Android

sabi_123

IONIC - Hybrid Mobile App Development

Swapnil Tripathi ( Looking for new challenges )

Ionic is an open source SDK for building hybrid mobile apps using web technologies like HTML5, CSS, and AngularJS. It provides UI components and tools to develop apps that can be deployed for Android, iOS, and the web. Ionic has over 26,000 GitHub stars and its apps are installed over 200,000 times per month. It uses Angular for its framework and includes features like CLI tools, UI components, and integration with Cordova plugins for native device functionality. Developers can get started by installing Ionic using NPM, generating a new project, and using the CLI to add platforms, pages, and more to build their hybrid mobile apps.

Ionic adventures - Hybrid Mobile App Development rocks

Juarez Filho

«I knew there had to be a better way to build mobile app»

FDConf

I knew there had to be a better way to build mobile apps. The time has never been better to learn mobile application development. For many app ideas, you don’t even need any prior native development knowledge. You can get started today with knowledge of HTML, CSS and JavaScript. Unlike native mobile development, mobile applications using web technologies can support many mobile platforms. So during this session will gain experience how to start from very basics and build mobile apps with zero knowledge. Alius will share his own experience on building hybryd applications based on PhoneGap also he promised to explain why he suddenly changed his own opinion about native apps and switched back to Xamarin.

Web Developers are now Mobile Developers

boyney123

I knew there had to be a better way to build mobile apps

Alius Petraška

The time has never been better to learn mobile application development. For many app ideas, you don’t even need any prior native development knowledge. You can get started today with knowledge of HTML, CSS and JavaScript. Unlike native mobile development, mobile applications using web technologies can support many mobile platforms. I shared my own experience on building hybrid applications based on PhoneGap also explained why I suddenly changed my own opinion about native apps and switched back to Xamarin.

Common Ionic Development Mistakes Developers Tend To Make!

Techugo

Ionic is a popular framework for building hybrid mobile apps, but it's important to avoid common mistakes during development to ensure a successful project. Some common mistakes to watch out for include neglecting performance optimization, not properly handling errors and exceptions, failing to test on multiple devices and platforms, and not following best practices for security and data privacy. To avoid these mistakes and ensure a smooth development process, it's important to have a clear plan in place, stay up-to-date with the latest best practices, and work with experienced Ionic developers.

Ionic - Hybrid Mobile Application Framework

Sanjay Kumar

This document provides an overview of the Ionic Framework, including its history, features, benefits, supported platforms and performance. Ionic is an open source framework for building hybrid mobile apps with web technologies like HTML, CSS and JavaScript. It uses AngularJS and Apache Cordova to provide native app functionality and allows developers to build apps for iOS, Android and other platforms from a single codebase. Some advantages include one codebase for multiple platforms, use of web development skills and Angular framework, while disadvantages include lower performance compared to truly native apps.

Mirco Vanini - Windows 10 IOT Core

Lucio Grenzi - Use Ionic framework to develop mobile application

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Lucio Grenzi - Use Ionic framework to develop mobile application

Similar to Lucio Grenzi - Use Ionic framework to develop mobile application (20)

More from Codemotion

More from Codemotion (20)

Recently uploaded

Recently uploaded (20)

Lucio Grenzi - Use Ionic framework to develop mobile application