NativeScript, Vue, and You!

Hello!

👋

twitter.com/@igor_randj
 github.com/rigor789

Let's talk NativeScript!

https://nativescript.org/

and showing it with Vue 3!

  • Direct access to native APIs right inside JavaScript!

  • Renders native UI elements

  • Multiple frameworks: Vue, Angular, React, Svelte...

Direct access to native APIs right inside JavaScript!

- (UIImage*) roundCorneredImage: (UIImage*) orig radius:(CGFloat) r {
    UIGraphicsBeginImageContextWithOptions(orig.size, NO, 0);
    [[UIBezierPath bezierPathWithRoundedRect:(CGRect){CGPointZero, orig.size} 
                                cornerRadius:r] addClip];
    [orig drawInRect:(CGRect){CGPointZero, orig.size}];
    UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}
function roundCorneredImage(orig, r) {
    UIGraphicsBeginImageContextWithOptions(orig.size, false , 0.0); 
    UIBezierPath.bezierPathWithRoundedRectCornerRadius(
        CGRectMake(0, 0, orig.size.width, orig.size.height),
        r
    ).addClip()
    orig.drawInRect(CGRectMake(0, 0, orig.size.width, orig.size.height))
    const result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}

Objective-C

JavaScript (With NativeScript)

Renders native UI elements

UIImageView
android.widget.ImageView
<Image src="~/assets/coolImage.png"/>

Multiple frameworks: Vue, Agular, React, Svelte

Use the Framework you like!

NativeScript-Vue

https://nativescript-vue.org/
  • Around since 2017
  • Uses Vue 2.x

Vue 3?

Yes!

Follow the progress on GitHub

 

https://github.com/rigor789/nativescript-vue-next

You can start playing around with it today!

Warning: not even in alpha yet!

npm i -g nativescript

...

ns create myVue3App --template @nativescript-vue/template-blank

Demo

Direct access to native APIs right inside JavaScript!

- (UIImage*) roundCorneredImage: (UIImage*) orig radius:(CGFloat) r {
    UIGraphicsBeginImageContextWithOptions(orig.size, NO, 0);
    [[UIBezierPath bezierPathWithRoundedRect:(CGRect){CGPointZero, orig.size} 
                                cornerRadius:r] addClip];
    [orig drawInRect:(CGRect){CGPointZero, orig.size}];
    UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}
function roundCorneredImage(orig, r) {
    UIGraphicsBeginImageContextWithOptions(orig.size, false , 0.0); 
    UIBezierPath.bezierPathWithRoundedRectCornerRadius(
        CGRectMake(0, 0, orig.size.width, orig.size.height),
        r
    ).addClip()
    orig.drawInRect(CGRectMake(0, 0, orig.size.width, orig.size.height))
    const result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}

Objective-C

JavaScript (With NativeScript)

We released NativeScript 7!

  • New consolidated nativescript.config.ts
  • New ios runtime using v8
  • Streamlined core repository that's easier to contribute to
  • A bunch of QOL improvements

nativescript.config.ts

There's much more to it!

 

Learn more at:

nativescript-vue.org

nativescript.org

Join our Community Slack

https://www.nativescript.org/slack-invitation-form

Thank you!

You are awesome!

Made with Slides.com