cross-platform next level - nils-mehlhorn.de · 5 native app all device apis native app web view...

Next Level Cross-Platform

Upload: others

Post on 03-Jun-2020

10 views

Category:

Documents

0 download

Report

Download

Embed Size (px):

TRANSCRIPT

Page 1: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Next Level Cross-Platform

Page 2: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Hey!Nils Mehlhorn

Page 3: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

NativeScript

Page 4: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

“

Native App

All Device APIs

Native App

Web View

CodeJS, HTML, CSS

Limited Device APIs

NativeScriptRuntime

CodeJS, XML, CSS

Page 6: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Accessing Device APIs

Page 7: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Angular for NativeScript

Page 8: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Angular Everywhere

Page 9: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Hands-on?

https://play.nativescript.org/

Page 10: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Code Sharing

Page 11: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Page 12: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Page 13: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Hands-on!

Page 14: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Considerations

◂

ng add @nativescript/schematics

Page 15: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Going beyond

Page 16: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

NestJSNode.js Framework

◂

Page 17: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Thanks!Questions?

Page 18: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Credits

◂

https://www.nativescript.org/

https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7

http://www.slidescarnival.com/

Page 19: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

Appendix

Page 20: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

JavaScript Engine

Hooks App code

NativeScript Runtime

System Dispatcher

Button

ListView

FileSystem

Modules

AOT

Routing Components

TypeScript

Any native .... interface.. UI component.. library

Any JS library

Live Reload

Over-the-air updates

Zero Day Support

Page 21: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

NativeScript Thread Model

Page 22: Cross-Platform Next Level - nils-mehlhorn.de · 5 Native App All Device APIs Native App Web View Code JS, HTML, CSS Limited Device APIs NativeScript Runtime Code JS, XML, CSS

React Native Thread Model

App Manifest Web Application (HTML, CSS, JS, …) APP

About Best friends - HTML, CSS and JS

FoxInCloudfoxincloud.com/pdf/FoxInCloud-How-to-aztuto1-en.pdf · HTML/CSS/JS gen: clones your app’s forms into HTML/CSS/JS which becomes the designated website (i.e. ) Process:

Javascript - ATLAS Institutecreative.colorado.edu/atlas2200/pdf/week12-tech-js-madlib.pdf · console js playground (similar to css) experiment and try new things get feedback on what

Modern Developer - Road Map ... · Front-end Basics CSS Frameworks & Processors JS Client Frameworks + Tools CSS Mastery, Graphics & Visualisation

Modular HTML, CSS, & JS Workshop

Introducción a HTML - CSS - JS

Week 7 html css js

Build a better UI component library with Styled System · BEM (Block, Element, Modifier) SMACSS (Scalable and Modular Architecture for CSS) CSS Modules CSS in JS. OOCSS (Object-Oriented

The Next-gen Intelligent Technology Learning Platform · Web Servers/Front end Apache, HTML, CSS, JS Angular JS Frontend Framework built on Javascript MicroServices Spring, Hibernate,

CSS JS CSS JavaScript Components

Senior Frontend - infotechhub.in Developer.pdf · Senior Frontend UI Developer java html Angular JS css Node js. Headquartered at Kanpur, India, ITH Technologies

Bootstrap · Bootstrap 4 As you can see, there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts from Glyphicons are included,

CSS-in-JS: unexpected lessons for Drupal component design

Introduction to JavaScript · HTML CSS JS HTML = content CSS = presentation JS = interactivity ... need to learn syntax • Need to understand how web pages work to be able to use

Building a Portfolio in 90 minutes ( HTML, CSS, Js )

How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,

Office 365 Platform Flexible Tools App Manifest Web Page HTML/CSS/JS App

Developing Modern Web Platforms (HTML,CSS,JS)techclass.co/files/course-descriptions/TechClass-HtmlCssJs.pdf · Developing Modern Web Platforms (HTML,CSS,JS) ... Developing Modern

Will js kill css

From APIs to Electrons: A JS on Hardware Journey

HTML JS CSS Java Dojo Angular Ipojo Spring Json Thymleaf CQ5 1.0

Christmas Trees Made with HTML CSS and JS

CSS-in-JS and Drupal sitting in a tree… · 2019-04-11 · CSS-in-JS and Drupal sitting in a tree ... CMS ANY JS FRAMEWORK OR + + + + + CSS Modules = webpack loader plugin + PostCSS

ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS

Magnet rest2mobile: Turn REST APIs into mobile SDKs (iOS, Android & JS)

MOBILE DEVELOPMENT with HTML, CSS and JS

Presentation CSS JS HTML

React Native Learn once, write anywherePhoneGap Xamarin NativeScript WebView C# -> ObjC / Java JS/CSS XML/JS/ CSS? React-Native ES6+ JSX FlexBox -> Yoga Babel Polyfills ES 2015 Common

Building JS APIs for Browsers

Designing for Inclusion with - on.notist.cloud · Designing for Inclusion with Media Queries Boston CSS August 16, 2017? Level setting. What is the web? HTML JS CSS. HTML JS CSS

Angular JS. Contents About Angular JS Hassle free Angular JS MVC pattern of Angular JS Example of MVC pattern Data binding Applying CSS dynamically Templates

HTML5 JS APIs

React Best Practices · React Best Practices – Styling & CSS in JS – 16 Beliebte CSS in JS Libraries styled-components¹-konzentriert sich hauptsächlich auf das Konzept der "styled

Building Web Apps & APIs With Node JS