cr Conférence hybride Mobile Paris 15: Cordova, PhoneGap, Ionic2, Angular2, javascript...

Deux confs de prévues pour ce meetup :

-Florian de chez Bam qui présente comment faire du jeu vidéo avec du javascript

  - Alex Muramoto de la team ionic nous fera à l’occasion de ngEurope une présentation des nouveautés ionic 2

Javascript et cross-platform video game

Le blog de Florian http://florianrival.com/

Les slides de Florian http://slides.com/florianrival/javascript-games

Jeux desktops, tablettes, navigateur, consoles…

On peut faire des Jeux videos 2D

Florian travaille à BAM avec Ionic1, 2, react-native et sur son temps libre edveoppe Gdevelop ry DEvap. A fait un kickstarter fin juin. Avait déjà une base de jeu. Periode de 30 jours kickstarter. C’est surtout du marketing car tout le monde est fan de cette boule de poils.

A demandé 100000 euros, ils ont eu 148 000 Euros.

1 seul repo. Moteur de jeu, cocos2D ou pixi.

1 developpeur, 1 designeur, plus 1 zicos qui fait l’audio.

@florianlival

Lil bub le chat super connu sur internet tire tout le temps la langue, 3 millions de vues.

On va s’interesser à la creation du jeu lil bub’s hello earth, qu’il crée avec le proprio du chat sur kickstarter

1 moteur de jeu, games engines

HTML5, créer un jeu dans un navigateur : CANVAS, et WEBGL

Moteurs

pixiesJS

Impact, mais pas open sources, et

Html5gameengine.com

Lilbub est fait avec pixi.js

Est-ce que je vais le porter sur mobile ? Oui avec Cordiva et la webview, UIWebview sur IOS, ou chrome ou navigateur par defaut sur android

Webkit/webview sur IOS, ou Corsswalk chrome sur Android.

Des fois des soucis de perfs, car navigateur.

Idée : app native et tout rendu avec une API canvas reeimplementee

Cocoon.js

est la réimplementation des canvas et webview. Pas opensource et pas de compilateur en ligne. On abandone

Mais il existe Ejecta ! Helas ne fonctionne que sur IOS.

Electron

Sur desktop, appli mac, linux, windows : electron = node + chromium version libre de chrome(v8) . C’est github, slack… Utilisé pour lilbub.

Hybrid game engines :

COCOS2D = native rendering + JS engine.

Moteur javascript de firefox.

Rendu natif, on n’utilise pas l’api de canvas, ca tourne partout

Electron = prendre chrome et le packager.

Une question? Posez-la ici

AAA game engines, unity, unreal engine

Lourd : Unity avec C# ou Unreal engine avec C++

Emscripten recupère les soures C++ et les compile pour les rendre fonctionnelles sur navigateur.

Sur quelle console développer son jeu en javascript/HTML5 ?

Sur la Wiiuu ?

WiUU c’est chrome/safari avec des api en javascript. Un jeu en javascript HTML5 peut tourner de base sue la WII, il faut jsute s’inscrire auprès de nintendo. 2000 dollars, branchement sur un PC

.

Une question? Posez-la ici

Sur la XboxOne ?

Sur la XBOXone, les apps cordova sont supportées avec l’UWP, mais pas testée.

Sur la PS4 ?

C’est mort, pas HTML5 compatible et il faut utiliser le SDK Sony qui coute un bras.

Et pour l’audio dans tout ça?

Pour HTML5, Howler.js c’est top

Openual

Javascript performance for games

Rendu, affichage, logique, physique, et utilisation de la mémoire.

Une question? Posez-la ici

ET le rendu dans tout ça?

Desktop, webgl, ca booste

Pour ioS, webgl, depuis ios8, ca va vite

Pour Android, webgl est dispo dans les webviews

Pour les consoles, la wiuu, c’est que du canvas, pas de support webgl

Sur la Xbox, c’est bof.

Performance brute de javascript ?

Compilation juste à temps ? Les optimiseurs dans les moteurs javascript, quand une fonction est appelée plusieurs fois avec les memes parametres, cette fonction va etre optimisée en code natif pour etre accélérée. Sur desktop, Chrome V8 le fait bien, firefox… Edge vient de l’implementer.

Sur IOS oui, webkit webview. Mais les moteurs de jeux sur IOS ne peuvent pas faire du JIT.

Que safari et WKWebview le font

Sur Android, oui, sur Chrome parfait. Le seul souci, c’est qu’Android avec 8 cœurs lents, comparé à un iphone 7. Impact des performances.

Voir lien the state of javascript on androir on 2015

L’importance du garbage collector

Avoir le plus de FPS possible. S’il n’y a plus de références sur cet objet en mémoire non utlisé, on le détruit.

Le souci c’est que le garbage collector prend du temps machine quand il arrive. On a un sentiment de lag, il faut eviter ca.

Avoid garbage. Exemple de suivi de souris : on crée plein d’objet, 60 fois par secondes, on cree 4 objets. On crer rapidement des miliers d’objets.

L’idée c’est de ne pas créer d’objets et de stocker par exemple des tableaux dans des propriétés de fonctions. C’est le but d’utiliser un tableau statique par exemple. On utilise les mêmes cases mémoires en gros.

On n’a plus de garbage.

On réutilise les tableaux déjà existants.

http://www/scirra.com how to write low garbage real time javascript

Une question? Posez-la ici

La technique des « pools d’objets »

Exemple, des tirs en rafale sur l’ennemi : il y a plein d’objets, car plein de munition.

Pareil, on met les objets dans un tableau, et on le remplit et on contrôle que le tableau se vide et se remplit en fonction du besoin. On fait des echanges entre des liste d’objets actifs/inactifs.

Voir

Tiny.cc/bub-game

Alex de San rose qui nous présente IONIC 2

Combien de personnes ont osé créer une app avec ionic2 ? Pas mal ! Bravo !

Le 6 decembre, à l’occase de dotJS, il y aura l’équipe Phonegap et qui présentera les nouveautés des plates formes phonegap et cordova.

Si des gens veulent partager de l’experience, des frameworks, etc. Ca nous interesse pour les meetups.

PUB : application « Namatata » développée par une agence, cherche un dev associé. Techno : IONIC hybride.

Colin, CO localize appli qui fait gagner de l’argent, sur IONIC, recherchent de nouveaux devs pour enrichir l’équipe.

Application

Bouzidi aziz, app intelligence, startup secteur porteur, et cherche un ou 2 developpeurs pour l’accompagner sur ce projet avec investissement

Max, dirige une agence et fait de l’ergo. Cherche Compétences dev et design.

CTO Kepler, B2T, cherche devs angular 1, cherche des seniors.

Une question? Posez-la ici

IONIC2 « Such better, such framework »

Alex Muramoto

Dev advocate @ ionic

Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

@alexmuramoto

Github.com/amuramoto

IONIC what is ionic, mobile framework

Built with angularJS

Written n typescript

Open source, MIT, we can use it commercial or not

Built on Web/Brower standards

Ionikframework.com

Ionic2. Awesome

Angular2/Typescript

Ready for « progressive web apps »

Awesome comunity, 25k+ javascript & angular community

Top 50 projects

Official IDE : Visual Studio Code

200K+ installs NPM par mois

Github.com/driftyco/ionic

Companies popular :

Adobe, diesel, microsoft, cisco…

Ionic2 rc = release candidate

Installation :

Npm install –g ionic

Ionic start myApp –v2

UI components

Like ionic 1

Sliders, layouts menus, badges, ranges, grids, action sheets, datetime, menu…

Better framerate on animations than ionic1

All components suit guidelines of native devices : they look like native components !

Styling & theming : CSS + Sass, easy to override, variables based, 80+ mixins, 25+ utility attributes

« VSS3, Sass »

Cross platform styling, conoform with platforms starguides

STilll performance obsessed

Native scrolling

60 fps transitions et animations

Hardware accelerated animations

Optimized for touche vents

Lightining fast app and page loads

Angular2, really fantastic

Cmoponent baser

Simpler syntax

Dependency injection, makes life easier (scope…)

Une question? Posez-la ici

Designed from the ground for mobile

Typescript is a superset of javascript, ES6 support, type checking, improves tooling.

Write typescript, it compiles to javascript

It’ a microsoft project, but it’s really fantastic ! Life changer !

Improves tooling, better code, mass refactoring easier

Different of Angular2

Syntax is more familiar

Import classes from…

End of scopes

Easy components :

Ion-searchbar

Ion-range

Ion-datetime

Ion-tabs

Ion-grid

…

Grid layout

Une question? Posez-la ici

AOT compiling, ahead of time compiling

From run tome to build-time compilation

« Tree shaking » , transpilng at build time

Faster app launches, 8 times faster that Ionic1 !

Smaller bundles

Faster app launch

Faster Component loading

Wkwebview

Wkwebview Nitro = fork of webview but very performant !

Bit.ly/ionic/wkwebview

JIT machine code

Native scroling

Faster rendering

Faster compute

Latest device aPIS

Une question? Posez-la ici

Ionic Native

Access Native Device Apis

Wraps Cordova plugins

Written in Typescript

Adds Promises/Observables

Framewok Agnostic

Github.com/driftyco/ionic-native

Observables !

Plugins for Sms ; 3Dtouch, NFC, In-app purchase, Sim card, Geolocation, accelerometer, subscriptions, SQLite, push notifications, geofencing, device info Badge/toas..

Ionic cloud , ideal for notifications

Rappel : on ne pourra jamais construire une application IOS sur une machine Windows. Steve Jobs l’a interdit pour des siecles !

Free for developers !

10K Push noifications

5K app updates

100 Native builds

Unlimitd users…

Ionic.co/cloud

« Code once, run eveywhere »

One team. One codebase. Every platform.

The PWA, progressive web-apps

Ioic Apps are progressive web apps

Do you want a web app ? A hybrid app ? a native app ? ALL-IN-ONE

Pwa.ionic.io

Bit.ly/ionic-pwa-talk

Une question? Posez-la ici

Tutorial 15 minutes demo to build an app with Ionic2

Une application qui trouve les restaurants autour de nous. Geolocalisation. Avec recherche possible des restaurants avec criteres : les meilleurs vins…

Sublime text

1. Www folder

Repertoire app, bootraped at boot time

Repertoire theme, avec variables.scss

Repertoire pages, repertoire hom, avec des css et des templates classiques

Home.scss

Page de garde : genre index : « Home.ts »

Import….

Import…

Une question? Posez-la ici

@Component, the selector, le nom de la page dans laquelle on injecte les données

Une classe avec un constructeur :

Export class Homepage

Constructor(…

Fonction request : la fonction qui fait le request

Let url

Let query

Search term

http request

test sur navigateur : localhost :8101

pages/home sont l’équivalent des templates

home.html

ngFor au lieu de ngRepeat

on rajoute les lignes avec le binding ion-row avec les {{restaurant.name}} etc. qui vont permettre l’injection de dependance dans le DOM

hop on rajoute les colonnes avec ion-col au lieu de ion-row

Hop un plugin cordova geolocalisation.

Hop une searchbar avec <ion-searchbar>

On bind la valeur au modele avec ngModel, avec la syntaxe : [(ngModel)]

Utilisation des ion-icon , soit la librairie open source cross platform !

Deploying on a device, ok. USB debugging

In IOS more complicated, code sign .IPA on xcode… And apple developper account

In IOS9, without apple developer account ! REVOLUTION ! Merci apple J

Ionic run ios –device

Une question? Posez-la ici

Des questions?