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!
NativeScript, Vue and You
By Igor Randjelovic
