Introduction to Ionic Framework fundamentals
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction to Ionic Framework fundamentals
Native apps Hybrid apps
Native apps
• Platform specific:
• iOS - Objective C, Swift
• Android - Java, Kotlin, C++
• Wide variety of uses cases
• Fluid User experiences
• Expensive to build, time consuming
Hybrid Apps
• Cross-platform:
• Written in JavaScript using Frameworks like Ionic, React Native
• Single code base running on different platforms
• Native capabilities using plugins
• Good enough performances
• Easier and faster to build
Native Apps Hybrid apps
Crossplatform No Yes
Pace of Development Slow Fast
Ease of development A bit difficult Easier
Native Capabilities Yes Yes
Performance Pretty fast Fast enough
Written in iOS: Swift, Objective-CAndroid: Java, Kotlin
JavaScript using frameworks like Ionic, React native etc.
https://cordova.apache.org
Single Page Applications
Client Server
Initial Request
HTML Page
Another Request
Another HTML Page
Traditional Webpages
Client Server
Initial Request
HTML Page
Another Request
JSON Data
Single Page Webpages
A popular Open-Source project
MVC architecture
Module
Component
Services
HTML PageBinding
JSON
Angular Architecture
Metadata
Angular Binding
• Interpolation
Component View
name = “foo”;
<span>{{name}}</span>
=<span>foo</span>
Angular Binding
• Two way Binding
Component
View
name;
<input type=“text” [(ngModel)]=“name”>
<span>{{name}}</span>
<html>
<head> <title>Title</title>
</head>
<body> <h1>This is heading</h1> <ul> <li>One</li> <li>Two</li>
</ul> </body>
<html>
<head> <title>Title</title>
</head>
<body> <h1>This is heading</h1> <ul> <li>One</li> <li>Two</li>
</ul> </body>
document
<html>Root Element
<head> <body>
<title>
Title
<h1> <ul>
This is …
<li><li>
One Two
DOM
<html>
<head> <title>Title</title>
</head>
<body> <h1>This is heading</h1> <ul> <li *ngFor = “let model of models”> {{model.title}}
</li> </ul>
</body>
document
<html>Root Element
<head> <body>
<title>
Title
<h1> <ul>
This is …
<li><li>
One Two
*ngFor Directivemodels = [ {title: “One”}, {title: “Two”}
]
<html>
<head> <title>Title</title>
</head>
<body> <h1>This is heading</h1> <ul *ngIf = “showList”> <li *ngFor = “let model of models”> {{model.title}}
</li> </ul>
</body>
document
<html>Root Element
<head> <body>
<title>
Title
<h1> <ul>
This is …
<li><li>
One Two
*ngIf Directive - True Conditionmodels = [ {title: “One”}, {title: “Two”}
];
showList = true;
<html>
<head> <title>Title</title>
</head>
<body> <h1>This is heading</h1> <ul *ngIf = “showList”> <li *ngFor = “let model of models”> {{model.title}}
</li> </ul>
</body>
document
<html>Root Element
<head> <body>
<title>
Title
<h1>
This is …
*ngIf Directive - False condition
models = [ {title: “One”}, {title: “Two”}
];
showList = false;
Related Documents
