 What is going on everyone? Welcome back to my channel. My name is Jocelyn Jay. For those of you all who are new here Welcome glad to have you here. So if you decided to click on this video It's either because you have an iPad Pro and you're interested in doing Programming with it or you're in the market for an iPad Pro and they're pretty expensive You need something to convince you that it's worth the price or you really like thumbnail Either way, I'm glad to have you here thoroughly enjoy using the iPad Pro and not just for watching YouTube videos or Netflix Consuming content, but using it as a replacement for my laptop for lightweight tasks like writing emails Responding to text messages writing notes and photo editing, but here's the thing We know that the iPad Pro can replace your laptop But one interesting capability that this device has to offer is its web development capabilities To be honest with you. I didn't buy this 2020 iPad Pro 11 inch to do programming I really just bought it as an extra device to not only consume media But to also do some content creation some workflow stuff and to use it for notes However, there are some great applications out there that allow you to do web development that range in pricing from free To around $30. I really wouldn't pay more if there are apps that cost more than that But these applications give you the ability to do web development and they have integration with github Okay, so now that we talked about the iPad Pro Let's take a quick dive into no GS before I show you how to build a simple application with play JS There's been a constant increase in enterprises adopting this model of Responsive web development to optimize the experience and the accessibility Along with the performance of a web application Nowadays, it's essential for a web developer to be proficient in CSS HTML and JavaScript Sometimes you have developers that feel really proficient in one or the other like CSS slash HTML But not really JavaScript or vice versa those back in no JS Developers main point of this video really is to show you how you can create a web application with no JS No JS is a server-side JavaScript language and traditionally JavaScript has been executed through a web browser such as Google Chrome Safari and Firefox so when comparing client JavaScript versus no JS line JavaScript Which is the more traditional way of executing JavaScript it executes JavaScript through the browser whereas no JS executes JavaScript through the computer I want to take a moment to talk about uJS Briefly since we're going to be building our project off of a no JS slash view JS template uJS is a Progressive JavaScript framework for building modern user interfaces the core component or library is primarily focused on The view so instead of having three files a CSS file HTML file in a JavaScript file You'll have a script tag a style tag and you'll have a template tag where you'll have all your HTML in One view component this may not make a ton of sense right now But I promise it'll make perfect sense in a few moments uJS is very small and lightweight It's pretty easy to pick up I like the fact that you have one file that hosts all of your web Development so you have your four lifecycle hooks inside your script tag You have your styling and your style tag and you have your HTML in the template tag So it's pretty easy to pick up especially if you have Understanding of JavaScript HTML and CSS other powerful capabilities that uJS offer is it's capable single page application usage along with being able to build Components register components and build reusable components So the first thing you want to do is go to the app store and install Play.js it does cost $5, but it's worth every penny in my opinion After you've installed the application you want to click the plus button and enter a project name and Then under the type section click the drop-down and select no.js plus view.js template then click create So you're going to see an index.js file But we can ignore that and what you need to do now is open your app.view file and hello world View file you can find these files by selecting the files icon at the top of the left navigation bar Then select component and you'll see the hello world view file So now that we have that open select the files icon again Then select the folder with the two dots This will move you up a level in the directory where the app.view file is you create a view.js project It always comes packaged with with starter code to get you started and to give you a basic understanding of how the source Code is organized and how the framework works now select the play button in the bottom left Which is where the debug window is that I'll tell you the status of your app So if you have any errors, it'll let you know in that window select resolve modules This will take a few moments Once the modules are resolved you can expand the debug window and see that your app compiled successfully Okay, now my favorite part viewing your view.js application Select the globe in the bottom right of the app within the same debug window This will serve your app to the browser. You should see a welcome to your view.js app Congratulations, you served your first view.js app on the iPad Pro. Okay, so now that we got that done We're gonna be doing a little bit of coding so you can get comfortable with view.js and the app play.js Along with some basic web development for the sake of not making this video Incredibly long. I'm gonna be fast forwarding through most of the code But I promise all the really important things I'll be sure to talk about the main purpose of this video is for you to get started with view.js and the play.js Application that way you can work on web development using modern JavaScript frameworks Okay, so the first thing you'll notice is the view.js logo and some hyper hyperlinks underneath the logo Everything but the logo is actually created in another component, which is the hello world component Remember when I talked about being able to pass a component to other components This is an example of that so in the hello world component You see there's some HTML a script tag and a style tag and the first thing we want to do is rename this component to header So the first thing we're going to do is go back to the app.view file and change them import name from hello world to header Along with the component name View.js is going to throw an error. Don't worry It's because we haven't changed the name of the hello world file to header now change the tag name in the template HTML in the app.view file from hello world to header That's all we have to do within the app.view file go back to the hello world file and change the name to header This is the component will be spending 90% of our time writing the code Also, make sure to change the name of the header component in the script section from hello world to header This is important because this will be the name of the tag We call in the app.view file once that is done delete everything within the template besides the highest level div class Hello, and the H1 with the message property inside the curly braces now Go back to the app.view file and delete the image. You should see the welcome to your view js app H1 okay, now the fun part like I mentioned I'm going to fast forward through most of this and If you're interested in learning more about JavaScript frameworks like view angular react along with more Web development stuff with CSS and HTML or technologies not stuff Be sure to give this video a thumbs up and comment down below Code with me that will help me greatly in terms of knowing what type of videos to make and it helps with the YouTube algorithm Oh and one more thing if your app performs poorly probably just need to like restart it I know mine was but maybe that's because I was like uploading a YouTube video along with recording the screen But if you notice that Your app is being slow and maybe the local host isn't working isn't showing your app Then I would recommend rebooting it now. We're gonna just be focusing on CSS and HTML All right, we got a sweet-looking plant app. We use some display flex with CSS We created a property and we passed that property to a component Hope you all enjoyed this video Give it a thumbs up if you enjoyed it at all or if you're still here comment down below some of your favorite Technologies that allow you to do development on the iPad Pro subscribe to the channel if you haven't already I love you all to become a part of this community and as always have a blessed rest of your week I'll see you all soon. Peace