Android | iOS | Windows Phone | |
---|---|---|---|
languages | Java, C | Objective-C, Swift | C#, Visual Basic, C++ |
tools | Eclipse/Android Studio | MacOS, XCode | Windows, Visual Studio |
website + "mini browser" = native app
What about...
It is better now.
Most of them are based on - a platform to run JavaScript with Googles V8 engine outside of the browser
depend | scaffold | develop | check | test | build | debug |
---|---|---|---|---|---|---|
bower | yeoman | WebStorm | jslint | jasmine | grunt | Chrome dev tools |
chrome://inspect/
there are a lot of frameworks to support you. CSS and JS
HTML5 has APIs for all of them.
phonegap has plugins to use even more. They wrap native APIs/libraries into JavaScript.
Where is it getting complicated?
You can implement this native and still include it
Again HTML5 to the rescue
some examples
textarea = {
textarea: null,
init: function() {
this.textarea = document.getElementsByTagName('textarea')[0];
this.textarea.focus();
this.load();
},
load: function() {
this.textarea.value = localStorage.getItem('text');
},
save: function() {
localStorage.setItem('text', this.textarea.value);
}
}
Angular is what HTML would have been had it been designed for applications
<script src="angular.min.js"></script>
<body ng-app>
<input type="text" ng-model="yourName" placeholder="Enter a name">
<h1>Hello {{yourName}}!</h1>
</body>
var module = angular.module('ListApp', []);
module.controller('ListCtrl', function ($scope) {
$scope.things = [
{ name: "AngularJS", color: "Red", hidden: false },
{ name: "Vaadin", color: "Blue", hidden: false },
{ name: "Wicket", color: "orange", hidden: false }
];
$scope.hideOldStuff = function() {
$scope.things[1].hidden = !$scope.things[1].hidden;
$scope.things[2].hidden = !$scope.things[2].hidden;
}
});
<div ng-controller="ListCtrl">
<h1>Only a list</h1>
<button ng-click="hideOldStuff()">Hide old stuff</button>
<ul>
<li ng-repeat="thing in things" style="color:{{thing.color}}"
ng-hide="thing.hidden">
{{thing.name}}
</li>
</ul>
</div>
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.
ng-app, ng-controller, ng-repeat, ng-show, ng-model, ...
make your life easier
write your own HTML-elements
cordova create hello com.prodyna.hello HelloWorld
cd hello
cordova platform add android
cordova build
cordova run --device
cordova plugin add org.apache.cordova.camera
navigator.camera.getPicture( cameraSuccess, cameraError, cameraOptions );
ionic start myApp sidemenu
cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios
Free* build service by Adobe
more sophisticated Apps built with ionic
SPO-Portal Quick Offer
sworkit
ESD Web Technologies Expert Group
SCMA - Solution Center Mobile Applications
more dialogues/trainings to come!