OpenJS Foundation OpenJS World 2021 - Development, 26 May 2021

Previous Meeting

⏯

youtube image

►

From YouTube: One Source to Rule them All - John Niedzwiecki, Disney Streaming Services

Description

We live in a world of applications. There’s a constant tug-of-war between wanting to maintain only one source code versus our app having a home everywhere our users are found. With Angular, we can write web apps that run great on both desktops and on mobile. When combined with NativeScript, we can take the next step and run our JavaScript natively on mobile devices. We’ll look at how to create both a web app and a native iOS and Android application from one codebase, sharing our code between the web and native. Together we can forge our apps using the power of Angular and Nativescript and finally have one source to rule them all. One Source to rule them all, One Source to find them, One Source to bring them all and in the Nativescript bind them.

A

Welcome to one source to rule them all, we want it all. It's not uncommon that we and decision makers really want it all in a world of applications. We want both a web presence and a native mobile presence. What we don't want is to maintain competing parallel code bases.

A

What this leads to is a tug-of-war between wanting to maintain only one source code versus our app having a home everywhere that our users are found.

A

So, who am I well, I'm a kilt wearing coder. My name is john zwicky. I like to call myself your friendly neighborhood, kilted coder. If I was on stage today, you'd be seeing my kilt, but right now you show me this little tiny box, um I'm a husband, a father, currently a mini farmer. I love pathfinder, which is tabletop rpg cooking and the disney parks which I live in florida. So it works out convenient for me. I'm also tech lead at disney streaming.

A

I build software to help support the media processing for disney plus, but I'm also very passionate about native script, which is why I'm giving that talk. This talk today.

A

We're going to forge one source and it's going to be forged in javascript, you might notice some veiled references to a certain movie that involves some hobbits a dwarf, an elf. You might notice parallels there.

A

So what are we going to do today? Well we're going to talk about what do we want? um Then we're going to go on to what is native script. Maybe it's going to be the key here on how we're going to get to this end goal of one source we're going to talk about. How do we share code because we said that's what part of what we want is to share code and then we're going to look explicitly at xplat, which is one of the solutions you can have for sharing code.

A

So, let's touch again on what do we want? So we want both a web and a native application. That is the goal of what we want to get to here and we want code reuse. If we make a really cool, avatar selector, we want to be able to use it on web and on native and want to have that same experience for our users, especially if it's really cool. What we don't want is to have multiple separate projects and sometimes as front-end developers.

A

We just want to get to play with native without the overhead of learning another language. We want to use the tools that we already have and that's where native script comes into play. So what is nativescript.

A

Nativescript is an open source framework designed to empower javascript with native apis.

A

It allows you to choose the flavor that you already love. Do you want to code in javascript? Maybe you like types and typescript. I know I do. Do you like your framework of angular? Do you prefer to use ionic or view or react, or even spell guess what all of these can be used with nativescript? So all of these can be used to develop a native application and using the javascript tools that you are used to using.

A

Everything you need to find out about native script can be found on nativescript.org. That is your home. To start with, so native script gives you native performance. It is very extensible, it's very easy to pull in new things in a native script to do new native experiences. uh It allows you to develop with what you already know. As we talked about all those things, you can use um it's cross platform, so it works for both android and ios.

A

It is free and open source, and it has a strong backing. Nativescript is actually an incubating project under the openjs foundation, which means they are in the process of completing their onboarding to fully join the foundation. So it's got the backing here of openjs.

A

Native script layer, so the way this works is we're going to see here we're going to write our app logic in angular, so the ui will have an html like syntax to generate that native ui and we'll style it with css.

A

So how are we going to share our code?

A

So in angular a component has a typescript class, an html template and a style sheet in native script with angular. You have a component that has a typescript class, an html like syntax template and a style sheet. I think you see where we're going here. So if all these things were the same, you could easily just have two html files and two style sheets in the same javascript code. If everything was the same and they would be able to be able to reuse we're going to go steps beyond access, not quite what we want.

A

So let's look at some of the fundamental lessons of good code sharing, so these are from the native script, tsc technical steering committee.

A

So a lot of words here to keep it brief. This is their first lesson learns really what this is. It's about making devs lives easier, share now and easily and make it maintain and scale easily later number two is to use existing tooling. You know we don't want to integrate with something new tooling. Just to be able to do this code sharing we want to use the tooling. We already have number three.

A

What this really boils down to is we don't want to add new extensions or structures just for the sake of sharing, so we shouldn't have a new file extension. We need just be able to share we're using html, it should be html.

A

We also want to follow good standards for code organization. We don't want to add extra layers just because it's what makes sharing work. Those extra layers are okay, if they're going to be for the purposes of actually organizing our code in a way that makes sense number four. This really comes down to will boil down to it's easy to identify and distribute separately.

A

um So it's easy to know shared code from non-shared code and it's easy to know what you're going to do and how you're going to separate. What's going to be deployed if you're deploying your native app versus your web and finally, number five is to use fundamental javascript and typescript sharing approaches, so there are already inherently ways to do that in javascript typescript. So we should use those in our approach.

A

So from this there are some recommended solutions.

A

The first one is narwhal nx dev tools with native script nx. This is center around javascript and typescript, which means it meets lessons. One and five. It uses standard build tooling, which means meets lesson. Two there's no custom file. Extensions so meets lesson three and nx splits into apps and libs to identify targets that consume shared code. So you have your apps, for these are your individual applications for web and native, and then you have your libs for your shared code.

A

So that's lesson four, it's easy to tell what is shared and what's not um in general, nx practices can have a little bit of a learning curve if you're not used to using them, but once you do get over that everything else is just what you already need to know.

A

Second, is the one that we'll talk more about afterwards? Is normal nx dev tools, but with n studio x plat. So this is centered around javascript and typescript. It uses standard, build, tooling, there's, no custom file, extensions and because nx it's built on top of nx, it uses that same splitting between apps and libs to identify the target. So this meets all fiber lessons.

A

What it does is. This builds on top of native script nx to scale across more paradigms, and it provides an opinionated architecture provided by expat to help avoid common pitfalls that are learned from cross-platform development.

A

This is developed by n studio, has done a lot of development in native script and a lot of shared development, so these are opinionated as much as angular is um way to do it, but some of the common pitfalls they've learned in doing exactly what we want to do here today.

A

This is why this is my method of choice that I use.

A

Next. Another option is yarn workspaces, so this is center on javascript and typescript uses standard, build tooling and no custom file extensions. Unfortunately, this doesn't meet lesson four. um You can share and link dependencies, but you're kind of on your own for organizational structure, there's no out of the box deployment and distribution for app targets versus shared code. um So it's got a little bit of to go there, but if you're already using yarn workspaces, this can be a good solution for you and your team and the last recommended one is learn.

A

So this is center on javascript and typescript uses standard, build, tooling, no custom file extensions, but again we're missing lesson. Four. This is a tool for managing javascript projects with multiple packages. Again you have your own you're on your own for organizational structure and there's no out-of-the-box deployment distribution for app targets versus shared code. This is more geared towards open source library management, with no extra helpful tooling for workspace management. But again, if you're using learn already, this could be a very good option for you.

A

Let's talk through xplat, because it's what I use xbot is cross-platform tools for nx workspaces.

A

Xbot is an added value pack for nx to provide app generators and optional supporting architecture. It supports various platforms, including native script, web ionic and also electron.

A

So, first, to get set up you're going to need to set up your native script, so you can find anything you need to do here about docs.natoscript.org we're not going to walk through all this first you're going to have to have node, which means you might want nvm or your own manager of choice. You're gonna need the native script cli to build nativescript and then you're gonna need your app environment. If you want to develop for android, you're gonna need android studio and the jdk.

A

If you're gonna develop for mac um for ios you're going to need xcode, xcode, proj and cocoapods, the steps are all there laid out for you exactly what to install what commands to run. So, it's very, very good documentation on how to get set up and running. I can vouch it. It's pretty easy to do, because I had to recently reset up my new machine for this, and it was no problem at all.

A

Then you need to start with creating an nx workspace. You're going to use npx create annex workspace. This will set up your workspace with all the base structure that you need. um Annex creates a suite of powerful and extensive dev tools to build an architect at scale. So I encourage you to if you want to learn more about nx check out narwhal and rwl.

A

um This is their tools they're a great company, and you know you can learn more about this. There.

A

Next, you need to have your cli and explain so you're going to install your narwhal cli, which is used for annex you're, going to need to install the explain package you're going to need to add that to this app and then you're going to generate your app um nx generator app is going to set up individual apps you're going to build within this.

A

So when we want to generate an app you're going to give it an app name, you're going to select the type of app to add, and then it's going to generate the code you can see here. You have different options: electron express ionic native script, nest, node react web all types here that you're going to see when you want to generate an app so there's many benefits of using xplat. First, you get a robust structure for code sharing.

A

This also makes it easier to take advantage of deeper platform integration. So when you want to use your web camera, you can easily integrate how you do it on native versus how you're going to do it on the web.

A

It's also built to support large complex code bases with sharing. So this allows you to build those very large scales, application that can have a lot of independencies and different pieces with it and code share them very easily. So it's definitely built for working at scale.

A

Nx is designed to be using a mono repo. So if you look here, here's how it's going to break it down. um This is not to talk about whether to use or not using monorepo. This is built designed that you can easily have a monorepo if you don't want to have a non reboot. You can still use this, um but this is all about sharing code across the entire organization for reuse and a single set of dependencies. So we're going to add multiple apps.

A

You can see here I've added a native script, app called hobbit fitness pal and a web app called hobbit fitness pal, and it also adds this end to end for testing. For me, you end up with this powerful code sharing structure. You get the individual apps by types and you have the libs folder, where you can see his expat, and this is going to be all your shared code. So you're going to have your two places, you can see your libs.

A

This is all the shared code and then, within that we'll see that you can have native script and web shared in its folders. But then you also have your actual apps, so you could have something that's shared for web that can be used in multiple web apps. If you're going with the model repo here, it doesn't have to be one native app one web app and shared code. This can share across multiple applications so generating code with expat. We gotta make sure we have the export options.

A

um So we're gonna look here if we ran help with generating a service here. This is gonna tell us what our options are, so you give it a name. You can whether you're gonna target this into the feature section.

A

You can target what projects going to be on what platforms you want to skip some extra formatting files, the dry run, which is what we'll write I'll, show you some here to see how they come out: um skipping nx cache, which is a to avoid building uh rebuilding the same code again and again, which comes in very helpful if you're going to use annex cloud, so you can use xcloud to build your apps without needing to build them locally and then obviously we're in the help command here to show us what options are available.

A

So, let's create a shared service here, we're going to generate it. We have nxgenerate and then we specify at n studio angular service. This will generate a service using the n studio x, plot generators and if we call we're going to name of track, we're going to say we want to do a dry run, this will generate, as you can see, a service inside of libs x, black core.

A

So this is where your shared services will go in your shared code base under xbot, and this is a core because it's a service, it's going to be the singleton.

A

So we're going to do that and generate create our own service called track overview service for our fake application. Here, all it's going to do here is have a function that is going to get and return an observable of these track options with just some mock data in our code. That's going to return these this data back.

A

Let's look at something a little more complex and generate a component in explain. First, we're going to look at using the platforms flag, so here we're going to generate a component and we'll use platforms, web and native script with the flag of crate based drew. This is going to create a shared component for the platform web and for the platform data script, and it's going to also create a base component that they're going to use.

A

So we have libs explain features where this base component lives, then we're going to have in explain web and explain native script, we're going to have a meal list component, html and typescript, so this is going to generate them for the platforms. This is saying: hey, create me, a component that is for the web and for nativescript that will share a base component.

A

Next we're going to generate a component with the projects flag. Here we can specify that we want to generate a component for the web, hobbit fitness pal and the native script. Hobbit fitness pal projects for those actual apps. This will create in the app's web hobbit fitness pal on the apps, navigate puppet fitness pal. It will create components and create their html and their typescript files.

A

You notice here we can't use the generate base component, there's no shared implementation, but we can change that and we can have a shared implementation ourselves, just not out of the gen the generators off the base. So here we have a home base component.

A

This is our home component. It's always extending this base component.

A

um You see here we have a service that we're going to call we're going to get those tracking overviews that we call we're going to just put that into an observable that we're going to be able to use the async pipe on very, very simple component, very, very simple, typescript portion. You can see this is one called home base component and then I created a home web component which extends the home base component.

A

Nothing else to it doesn't need to do anything else. All I need to do is get that data, so we can display it displaying. It is where it comes into place, so the home web component has its html file that we're going to see here our normal html and style with our angular components here. So we see we have a component for the header that we're adding.

A

We have a paragraph with some text and then we have a part where we're going to loop through those tracking overviews with the async pipe and display something there and we're going to have a button at the bottom.

A

Next, we're going to create a native script home component. You notice it's the same as the web. We're expanding the base component and no other change is needed. The logic is the same. There's no different logic needed all that this home component needs to do is get the data and display it. The displaying is different so to display a native script, we need to use nave script template, so we said, there's an html like syntax, so you can see here. We have tags just like we do in html, but they have different needs.

A

So one of the things you have to worry about a lot in data script. Development is the layout. So here you see we're using a doc layout to be able to dock something to the bottom and the top. Then we're going to use a grid layout for our button and we're going to put that at the bottom and then we'll have a stack layout with the header and a label for the text. That was our paragraph tag and then we're going to have a wrap layout which we're going to create labels for the other parts.

A

So this is generating a ui. That's going to look almost exactly the same between the two of them is the goal here. They can be completely different. They don't have to be anywhere close to the same, but we're generating something similar to the other one, just in the different ways of doing it create the same experience.

A

So getting things running is also quite easy to run the web app you just run nx serve and give the name of the app you want to run.

A

To run the native app again use nxrun the name of the app and use colon which platform you run on ios or android, and then it will bring that app up. So that's enough talking! Let's actually go ahead and see this in action.

A

So you can see here we have two different apps up and running. We have our web app on the left and our mobile app on the right. You can see. We have the same basic thing here. We have the name of the app the text of ensuring you don't miss any important meals of the day, because hobbits eat a lot of times of the day. So we need to make sure we are always eating our meals and tracking them so that we never miss because, yes, we had breakfast, but did you have second breakfast?

A

Did you have 11z's, let's make sure of it?

A

So what we're going to do is we're going to go here. We have this. These are our two home components we created very similar and then we're going to go ahead and say: okay, we want to add so if we want to add, we got to give the camera a moment here to load, and then we can put a picture up of what we had to eat.

A

Give it a name.

A

And then capture the picture and then it'll tell us: our meal is tracked, remembered to stop before nightfall and we can go onward and it will track that meal, so that was using the code on the web to access the web camera on our native mobile app. The weight access camera is different, but if we go to track our app, we have the same thing here. We can add a name and then, when we go to capture meal that will go to access the camera.

A

Unfortunately, the ios emulator doesn't allow me to access the camera right away. So instead it access the camera roll, but you'd get that same, prompt that you normally do of. Do you want to go the camera you want to have so we can go ahead and say we just pick a picture and then, instead of putting that other message up there, we can just use the dialog native on the app and say hey pop me up a dialog.

A

You know notification is going to say this is the message: here's the ok message: they click ok and then they can go ahead and route. It back to the home, so it's great because you can use those native integrations here, but still have the shared code base of the same idea. Here we want to display these things. We want to allow you to add a meal and have that meal has an image and it has text. We can do a lot more with it. We can make selections.

A

We can do other cool things here, but this is just the basic idea of what we want to do here. So how did we go about doing that?

A

So we had a. We created a meal ad based component, which has this function to track a meal which knows how to call our track service with this meal object.

A

We're also going to give access to the router router for kind of that navigation that we saw.

A

So for the web, when we're looking at this meal ad, um we extend that meal ad base component and for the web. We do something a little different here, so you can see here on the navigator.

A

um We have navigator media devices, and this is what we're doing to see that the camera is accessible and we're going to create these things to put the video in there, so that preview that we saw here this is how we're going to get that there um and I had already allowed the camera to be used.

A

But if the first time you come to this app it'll actually prompt you do you want to allow the web camera, and then I have this capture image function, which basically is what's going to use that canvas native element to draw the image from the camera and then save it from there. This just this is the process of how you can use your camera to take a picture on the web. So this is my web way of let's take a picture from your web camera in order to save it for our meal.

A

Now what this allows is, then we can do the meal. Add component for the native script, and here extend that same base meal that has that function to say, track this meal, but instead I can do it here with the native skip camera way, and so we have this ability. We have this requesting permissions to be able to use the camera to access the pictures and, if we've already granted it it'll move along um and otherwise you can have an error if they reject that.

A

Okay, you can't check a picture, but you can just put the name in um so you can handle it.

A

However, you want to, but the important part here is: we have the same capture image function, but instead this is going to call camera.take picture which is going to give us back this and that's what's going to either you're selecting it from your files or you're going to take the picture from the camera and it's going to hand that back off to the service and then we're going to take that we're going to call that same track meal function.

A

So both of these have a text box that had the meal name, that we captured and then takes this image and puts it with it and then we'll send that off to the track meal function, that's from our base component and then here instead of the other one, we show some text on the screen here. We create some alert options and then we say dialogues.alert to get that native alert.

A

So it'll look the way it is native on android or native on ios to give you that what that alert should look like and pop up and then when they say: okay, there we'll just navigate back to home, which is where the router comes into play.

A

This gives you the basics to be able to create that one source, so you can forge it now. You have one source to rule them all one source to find them one source to bring them all and in the javascript bind them so go. Forge your precious, create your native app, create your mobile app and combine that with your web app and share that code base. You know this gives you that starting point what you need to do and then it's up from there.

A

It's just up to your creativity on how you do there's so many great things you can do. There's other great talks here at the openjs conference that are also on native script. There's so many cool things you can do beyond this just giving the basis. This is giving you that framework and then you can just go and create from there and create your very cool angular web app that you want and your native script or you can also work in the script.

A

Without any remember, all those other options are out there and allows you to work in what you are used to doing.

A

So, as I said, I am john is wiki. You can find me online at kiltedcode. That is my twitter. That's where you'll find me on github kill2code.github.oh, but this code will be available on the sides available on my twitter on the github. You can find this code that I created up here um and check it out and play with it yourself. So thank you for your time.