 We're going to talk about React and Meteor and Ionic. I only started looking at this because I see there's a lot of articles coming up about React at the moment. It seems to be the new core thing to play with. So I thought seeing as I'm a core person, I should check it out. So I'm not going to pretend to be a React expert because I think it's quite involved. So there's some really good tutorials out there and I thought I'd go through one. fel y gyfalu gyda'r tutorial, dy li fydd roedd hi wedi fynd fwyaf eich gweithio â'r un arwineb a sydd wedi gwneud o'ch iddo i ddim ddim ychydig Bringy Go ahead i ddim ddim ddim ddim ddim ddim a i ddim gofynnodd sydd wedi rhoi ddim dim oes y cyfalu Ac mae'r uchydig o'r sl こlydd ar y enghraffau sydd gennym ddim y cyfalu rydym weddyn ni'n gwneud â'r eich eich gofynnodd iddyn ni'n gwneud, mae'r eich gofynnodd erioedd o'r rhan i'r reich Ionic if you've not heard of it is this beautiful open source front-end SDK for building hybrid level apps. So it's kind of like a right once deployed anywhere type of solution built on top of the phone cap? Iaffs, this is a home market. It is a home market. They are in line with an app. It is an app for these kinds of apps. It is not native. It is on top of the phone app. If anyone thinks I am saying the wrong thing, they are afraid to tell me. It is a mobile app running in a browser. It's protecting that it's... That it's a native, but it's not a shit native language. So it's not react-mated, which is another thing. Which is kind of is kind of like a native language. Let's go! Okay, so why do you want to learn React? Because, like I said, Google Trends is telling us that this thing is going up. And so if you're looking for a job, you're quite sure about it. Out of interest, Meteor is kind of doing pretty well too. So it goes back a bit further this one. But since February 2012, it's kind of been on the ascendancy and the whole. So I think the last month it touched a hundred on the Google Trend chart. Which means it's the most popular ascendancy in the last month. In terms of service. Okay, so Practical Water, I said that this thing before. I'm not a react-mater, but some of you, I'm sure, know more than me. So feel free to tell me if I'm saying something which is incorrect. And so I'm copying this... You're not sure of the video? Sorry? Oh, you want to get to her? Okay, so I've got a bitly link. You want to follow along the presentation. You've got a bit.ly slash Meteor SG dash MRI dash 1. That will give you the first... Can I just change 1 to 2? Yeah, exactly. That will be the gist of the article. And then if you want to follow the actual original page where we're copying this, if you go over from this at the top here. Okay. So this is an article that spots this off. It's a guy called Sam Corkos. And he's building this mobile app with Meteor React 90. This is what stage 1 looks like. So we'll go over this. Yes, so I'm coding. Okay, so I think the first thing we need to do is create a new Meteor app. So if you just do your regular Meteor create app name. Can you see that? Not really. Who's actually following along? Just so I know. It's not just me. I'm talking to myself. Again. There was a Meteor spike at the end of the year, which is just one of a graph copy. I guess that wasn't the same Meteor that we talked about. Meteor, right? Meteor. Meteor.js. Ah, okay. That's better. They may have been a Meteor in Thailand. Yeah, exactly. Because it's just a... Okay, so we've got a new app. It's just a basic template app. Meteors, if you go to that, you can run our Meteor app. A regular stuff. If you're following along, that's step one. So step two, you just need to create some template directories here. Create the directories, client components, client styles, lib and server. Given up? Oh, done. Oh, you're done ready? Okay. Then we can just create some empty files here. Step three, just create some empty files on Meteor in even now. And then we can start out our text page. I guess thresholds probably be on. Sorry? Can I ask a question? Yes. Do you know what the difference has been? The browser file options can just even add them next? Yes, so... This part is... I'm not an expert on browser files. If someone asked that, I think it can help with this. So I know you have packages and browser files using the options. Yeah. But I haven't seen the browser files used before. Is it like a way to work stuff in global management? I think it's a way... I think it's to do with the fact of how to incorporate other packages into your functionality into your app. Does anyone know more about browser files? I'm sure some of you know more about browser files. Does anyone know more about how browser files work and what it does? I've got a high level understanding of it. So basically, when you write code in Node.js, you can import files on a basis by doing a bar or something equal to require something. So the require function is not available in the browser site. So a browser reply tries to deal with this yet by defining a require version in the browser, so that your code is written for Node.js and also run on the browser. So you write a code once and then use it on both environments. So you can decline site? Yeah, accessible. So step 5, we add browser reply and a few other packages. Let's see if my broker is... I just think I was in the wrong place. Okay, so then we have to add some section in for browser reply. Step 6, follow. Can we follow? Lost? Yeah. Okay. Step 7, we set up the browser reply file. Okay, I think I've missed out here. Look at that and our browser reply.js file. So I think this allows us to then use reacorat on the client side. We edit the packages.json file. Oh, sorry. Okay. Yeah, I think it doesn't have set all the parameters. I need to separate them in the comments to do one list. I copy each one of that. You don't actually need to detach me. What? In order to detach you. Did you get it too? How? This file doesn't work on Windows. Oh really? This whole tutorial doesn't work on Windows because you ask a lot too much. And my computer doesn't actually work the same way on Windows. Okay. Sorry about that. Okay, so this is a browser reply options file. We add some styling in the SCSS file. I haven't actually written any code yet. This is just setting everything up. Did you just put the script on this? Yeah, I messed them up. Okay, so basically that's just setting everything up. I can probably remove the three template files that media is created for us. In my case, that's the MRI file. Okay, then we start getting to more interesting things down here, so we start writing some code. So we've got our client components main HTML file which will be our head section for our pages. That's step two part one for the body. So for the body we've got an ID tag of app that we can use later on to add our render out page. Should be nothing there at the moment because I've ripped out all the default media or stuff. If you're at the same point on it. So then we can define our first component react component in the app body file. Media has now these JSX files so the strange thing about the media react stuff is that you'll see this HTML and the JavaScript together which I was taught was a bad thing because I'm quite old and that was generally what you were told many years ago is that pretty good JavaScript and HTML together was actually not a good thing, separation of concerns. Exactly. But then interesting I read an article I think it was yesterday about if you remember when we split JavaScript and HTML before it was actually a real nightmare because you could have jQuery in another file somewhere or JavaScript in another file you had no idea about changing something in your HTML that actually is going to affect some JavaScript somewhere else and vice versa. So what this guy was arguing is that it's better to actually separate your concerns by functionality rather than language which makes a lot more sense than it is about it. So knowing that your JavaScript to do with one part of your template or part of your view is all together with the actual view itself means you're less likely to fall into some horrible mess later on. So I'll try to put a link to that I thought it was quite good to read. I think that's not one of the things that what he's made. He got credit track. I mean he didn't credit track he was a team credit track so one of the things they said is that we coupling behavior anyway because we're adding all these fake classes through our HTML elements and then we're searching for the fake classes in jQuery which is even it's very hard to follow you can like you have a class you don't know if this is a class or some magical JavaScript class which you can't remove because you do behave or become with this the couple magic. Is that a video? Yeah his presentation will be told later on. Okay but I think it was a p-hump p-hump yeah I think. That's all right. Okay so that's our app loading component that would then add an app not found component which again is pretty much what it says. So step four is we add a home component for the home page so all these are doing are basically these are setting up the views for each of the main pages in our app. Okay. It's all react files. Yes this is all react. This is what is returning all those like earlier you had shown that image where you saw the screen and then on each one you click like if you click on one the thing then it will show you home right? Yes exactly. So you'll see that now in a minute when that catches up. So this home section here what react is going to do is when you go to the home page it will then use this to render the home page and then when you go to the not found page this is what react is going to put on the screen so whereas in normal meteor applications you'd have a template or something so you don't have that kind of concept anymore with react or the place in that whole place then the place. How does it know that it has to render so in a minute we're going to go to the routing and then we'll set up the routing so it will know which view to render on which you're up. This is the home page we've got the settings page and then other page so these are all basically the same thing slightly different text. So this is the part where we've got our routing in the outbody.js here so here we're actually saying putting in some roots here so we're saying the settings page here oh sorry it's going to be links again so these are the links in the toolbar it says go to this page here's the other page and then we have our react to root handler down here sorry these are the routes here so again we have a router.js file rather than a router.js file which we normally have so these actually define the routes roots this is a question that's like so if you go to home this is the URL and this is the hand that you need to render that page this is for the other page this is for the settings page and this is for our loading page and this is for our application and then we say when the meteor starts up let's set up all these routes for the application so one thing you might find is that you have to run meteor a couple of times to deal with can you read the bottom on this one hang a little bit of screen if you're not forced you can actually change the path for the hair if you're not forced to use the same name you can say instead of our you can say whatever whatever pages you've got you didn't save the file so so here we have our so we've got our home page we've got a settings page we've got another page so that's basically set up the few different routes there and if you run that we want to iOS do you think that we'll start from iOS do you think that we'll start from iOS do you think that people managed to follow that on? do you think that we'll start from iOS no, that's meteor I think that came out in that's version 1 it had it done so you can add Android as well so now we can do meteor run we can add the standard meteor tutorial that's that I think it does now I think after if you want to add it we should start the preview so we can see but then again I wouldn't be interested in it it's a part of the meteor tutorial it's one of the things how we run this I mean that it's a bit slow we're going to start from iOS again okay I'm going to give up on that it's all 453 part so we'll do part 2 we'll see we should have installed a plugin multi-meatup series okay I thought there was more to follow sorry camera sorry I killed them all killed them all they're all trying to learn functional programming see all the people that said yes they'll never show up they just come for the breeders see that last confession okay so stage 2 we're going to add some data into our app so let's see how we do that on the app okay so when client compares home so our home page here we need to add a mixing and it get meteor data function so my understanding is this mixing it's a little for my phone our mixing is a way we get data from and to react from my understanding and getting meteor data basically establishes what data is accessible to our render functions later what we do the memory so we'll just leave a placeholder for now without actually much yeah and another package for some fake data which is quite cool called Digilord fake articles you have any fake information fake users fake dummy stuff it's a bit like the anti-fake anti-fake yeah okay app is there just rename it iphone 6 plus and you'll really have it 6 plus s so we've got our app we've got our other we don't have to do anything special for to make that happen okay so we've got a fake fake data package is this still not the nature you are right so these apps are not native they will show up as an icon on your iPhone so what's the bonus of first upon one since this is not a very experience what's the bonus of this so you see it does create this oh yeah but it's all the question of time and money right so if you have time to hire 10 native developers time and money talk to yourself about because it depends upon the context you usually have to say like the simple form yeah I understand I use Fungab that provides that it may not be Fungab there are also other I think this is Fungab underneath Fungab is a construction where your job is your API while IoniX will give you this nice interface with the heat transitions so if you want to go to get some very rich lecturing you can go to transition line up so it wouldn't be the same if you just blank out a lot there is one more alternative to Fungab I can't remember the name of the trip there is more in one hi Tion hi Tion hi Conex hi Ioni we can use IoniX IoniX is not really alternative I think it's on top of it and then there was another one that presented a talk Jess about one and a half years ago it was called over but I think that got rolled into thrown out I think one was Apache and one was someone else's they're both same thing now right but I think one used to be Apache it's an open source project it will be split off as an open source project and now it's called Apache Catova ok so we'll add some data in so if we can just create an empty collection file and then we'll add our regular new monger collection so and then we'll just use this new digital faker package to create 25 new users and now we can actually access this fake data in our view for our home page you want to display these 25 fake users so we've got it client components home now get me to your data we just add users and then the view this render function so just copy out the render do what I was doing so this render function using ES6 I think it's simply to display go through the list of new users and display the avatar the name and the email of our users the one strange thing I've found is I don't know about that I couldn't get the avatar to display ah it's a you need to add permissions for each image they have also it's handy you need to add permissions for the folder which is your folder where you're storing it for the URL it doesn't load anything so what do you have the permissions there's a kind of setting file file it's all that point it's never in the documentation you spend hours on finding a solution wasn't in the tutorial I guess he's done it lots of times till you find a good soul has done it before what's the image part from the IMG where the source is fake right fake is probably coming from somewhere some external service is calling from probably some s3 container or something it's putting from anywhere so it's a probably just exposed or allow external fetch in fetching of external files probably some parts security security name ok that's the end of section 2 so is anyone else going along still? in our section 3 ok that's good ok so section 3 we're going to add a few modals add some tabs normally when I've done that we only have a couple of tabs at the bottom on the side so we can add a few here so again let's go back to our app body and let's add a new function getP4Props but I'll just copy the source section over here press out probably with this now we have some tabs being defined here and also display the tabs up here so with the tabs we're going to just see if that's ok ok so we've added our tabs here so we've got a couple of tabs down here down here down here so that's just the config in the meter yeah it is the mobile config file when you say allow this urocket that's changing meter 1.02 so every URL you're accessing outside if you're up you need to put the rule for it if you're live if you're welcome yeah you can be welcome that's what it is ok so for the modals to be triggered off those tabs we're going to put a new file which is quite component IonModal.jsx that's our new modal component again all this is doing is rendering some css and then we use this properties to get some data ring so we set the initial state of the modal to not be displayed so we have that to app body so it starts off as not being shown and we add a new function to change the state of the modal or IonModal at the modals state to the end of our render function do you have this? do you have this? yeah no because I think we're doing some s6.com I think we're doing some like that stuff like my script stuff it's going to go away with 1.2 right? the babel stuff things will come to you so it's integrated yeah so there's not need to use something yeah magic I can understand that this is where the magic comes in this is where the magic comes in so yeah you need to put inside the gif he didn't make the render so that's the opposite but not the end of the gif inside the output so just move it to one line up before the product you can't have in req you need to have a root it's the just on the one part so see I knew there's more people in there and finally we need to have a long click a pen handler for our tabs I think the only one that changes is the AHA now I've got some modals not looking very nice not quite apple but I doubt you get it from the app store yeah me too I'm sure Steve Jobs will he's wearing any ok so make it a bit nicer we can have some transitions to that we'll put a link to their design guide and that's it add this react css transition the line at the top of the app body this transition tab around our modal a bit of css the scss file when the modal comes in background a bit darker so we can see it so in the iron modal component add this backdrop finally we'll just let conditional say whether to show the backdrop the modal is there so in the app body.jsx it's a bit nicer we can get a slightly nicer modal again maybe you know the autism accent on the iPhone device I think come up with a transition screen yeah I will take this transition code it's ridiculous it's like in that little click handle on the side mine doesn't have a transition it just shows this crowd and it stops here the web one is fine oh yeah the web one is fine yeah the web one is fine click on the tab it should bring up the modal in the bottom and darken the background that's kind of half the tutorial of the react stuff maybe you learned something today maybe you didn't as an exercise for the reader follow up ok so a couple more things I think global hackathon happening meet your hackathon on the 10th to the 11th of October so all a lot of cities around the world are going to have a hackathon that weekend and it's starting to be announced and promoted the rest of the prizes top overall submission top 5 most innovative best meet your on the internet of things application best game this one is quite interesting best app under 100 lines of JavaScript maybe you can come up with some random jazz magic just get a show of how you can do this yeah I'm kind of interested I'll say it from what it is oh you can't be outside can you sky from there ok but maybe I'll put a message on the facebook page and they will find out the numbers of people who might want to join up we can have up to 4 people in one group and if there are a lot of people who speak with Sydney guys if there are a lot of people who can speak with Sydney guys or in Hong Kong guys as well at the same time they are in Hong Kong as well Sydney's got quite a few meet your guys so they've got a whole company studio down there they're all made of Sydney oh yeah the halls are quite straightforward it's obviously got to be built with meteor less than 24 hours 1 to 4 people you can start coding before the hack is on but you just have to make sure everything that you're doing is public you own your area of code which is quite nice of course and then if you want to be a legend before the prize you need to show your repo you need a video demo so it might need to ask Michael for himself ah you're a legend you're a legend you need a list of packages as well anyway I'll put it out on the on the Facebook page I think one thing they said about the hack is you can't write your own apps so they need to be useful because you're publishing and as a package they said you can't just publish a package which is your own app but it needs to be useful for other people it does say something about not being too sneaky and they specifically said that you can't just publish something which is not useful for your company as a package and then just like oh can they get the prize I think it'll be fun I think the meteor IOT thing is quite interesting I don't know if anyone's done an IOT stuff a mess drama of some IOT stuff does anyone have something what do you think I've got some devices but like a spark for like we know maybe need to maybe need to step up again um what else so anybody got any questions about meteor that they would like to ask the community try to help we have our meteor clinic session doctors doctors doctors I posted one we're just going to answer so do you want to ask a question do you want to ask a question on top of it do you want to ask a question where is it's basically about because I'm using two different apps right I split up one job queue which is on one server and then the client facing another one when I was sending an API call sending data between them that the data always reaches 100% the other side so obviously 99% of the time it's going to happen but I have to prepare for whatever the server has been down or has been updated right now or has been too busy or whatever and actually a don't get a status code 200 back in order to ensure that automatically it's been rescheduled so Rick and I played around a bit with the collection which is called the job collection BSI BSI job collection that's been pretty good but I'm thinking about maybe that's been too massive to install and maybe there's a shortcut to do it easier in it next we came up with the ABS Lambda service which is interesting as well especially as I saw it's been free for when it ends and 3.2 million seconds per month so that definitely especially when you're going to get the application that you like I think that gets you started quite well but you put me into the functional you can't have any state in those lambda functions so if anyone has any kind of easier year to do both of them will do both of them will do so the client facing app will basically only react on the fact that there is a new user and then in regular instances it will actually because it's a as you know it's aggregating data for various kind of services micro services and it will just push it over to the worker and the worker will do all the hard work and just push the results back to the network yes why using HTTP confusion to the network sorry I mentioned it's two separate databases it's not one database two separate servers it doesn't match it can still to the network over to different servers and DDP will automatically repeat I'm in trouble with methods it will repeat and there's actually a hard way where you can just disconnect then you do a bunch of stuff you reconnect and it just spawns a server ok so I can do it in DDP yeah so this was his name Bullet Proc Meteor from Arun Oda and he has an example for micro services communication there and he actually demonstrated a specific example there where you got the connection and you do something and you bring up the connection back and it puts all the data without you doing anything that sounds like the best solution so far because that's exactly what I'm interested in also because of security privacy I don't think that's fully documented in the DDP section of the full iterated data it doesn't say it's very good to make it it's specifically designed for DDP connections between and non-meter and a meter ok that's cool right now how do you do it get the iPhone then checking you sent the job well I sent some data then on the other side it's been inserted I sent it to the back end it's actually allowed to write your problem is that you send the data and you don't get the response right? yes because it's just like our mail system you just put a letter or a stamp on it put it in the box and you always say it's going to be delivered right? a couple weeks later we said that why haven't you paid your bill or put a check on the post what about you do the other way around you pull data instead of pushing that means I regularly have to ask if there is some new data right using DDP you don't so you can activate DDP to run a meter up and you don't need to pull because it will automatically notify you that's why I have the idea to post as soon as there is magic happening then I like it that's actually special then because the problem is if you call a meter call and the service goes down for a long period of time then you just spam it as soon as it goes up you spam it and it goes up again if it came down under mode you're going to kill it again as soon as it so there might be some that can happen when it's starting yeah so the other question that I posted is about stale sessions and I'm not sure if that is still existing so I found somebody putting up a package that is handling a stale session so everybody puts up a log out there and you can see the user never uses it and the question is if you have a lot of concurrent users and look on them and unfortunately never look up and that is going to add up actually is that still a problem in the meter that we have right now 1.0.3 or is that because the package was written when it was still 0.8 so I'm not sure about that if anybody knows because again that's floating the server with stuff that is not necessary so do you create like a session because a lot of sessions are not served in database sorry? sessions are not served in database right the user is served in the session and the idea is a couple of them so what does that mean what does it mean that the user can like walk in when the session is expired well the point that he brings up is that another user can impersonate a user oh wow really? yes so that's more again a security problem security attacking why didn't what why didn't what well I don't know how but he just pointed out he's not doing your work it's definitely some generic security thing that I think came out on the last meter that's why I'm asking it might be fixed and no longer it basically said like any meter app should be using SSL oh yeah it's very easy to just work with passwords so I think just leave some professional for the session of your moment you should read the article that your friend wrote I'm sure it is so you wrote off SSL it gives a link to how you sniff the dvp connection very easily if you can post that it will be quite interesting it seems quite easy to set up SSL because I don't know about you guys you start very very small and you never think about all this stuff unless you come to that and you say like oh I never thought what happens if the power server is actually down I never thought about hackers trying to steal my data so how can I just build that and make it as difficult as possible because in the end they can always hack and if you delete your database you want to limit whatever they can do anyone else who's got questions this is the question anyone who's used Meteor Kitchen um this is the pay oh no sorry three applications there's one it's a meteor which allows you to build meteor applications so there's a kind of form which you can fill in and it generates a JSON file and then you run the program of Meteor Kitchen and you build the app I haven't tried it but I haven't tried it sounds like the logo of my dream sounds a bit like too much magic on top of magic double down double down you can speak about it in the next video I haven't tried it so talk on it okay good okay we're always looking for people to speak so if you've got something to talk about in the next meetup especially if you're new it's nothing better than standing out in front of people you don't know and making a fool of yourself I highly recommend it brilliant tip so and the other thing we have Facebook we have Slack, we have meetup.com Slack we've got like 30-40 people on Slack now so usually it's like if you want to speak to someone in your time zone maybe ask a question you might get an answer from somebody which says I found the meetup forums are still pretty quiet yes that's my experience as well even though there's only 10 or 34 or something available I always get an answer here I'm sure they have seen a great list where I acted there where else in the what is it called learn Meteor.js properly and the code code buddies which is 600 people there's also only 4 people at the same time and I highly get an answer but lots of questions but lots of answers here so this is really more people will get on the better and you know like I said we're all at the same time so if you want to join a Slack group just send me an email or send somebody your email address actually of course you can and on they're done on here I'll let you kind of moderate to stop the meetup but send an email to me or you can give me your email address you can do it like the code buddies that somebody can go to the URL and just enter his email address and then everything is automated I don't know how they did it but I like it a lot more than just like okay actually you do it okay it's a hero who added it's a hero who added you write that alright we'll do that to make it even easier Facebook that's kind of general chat it's pretty active I guess but we'll just stop okay I think that's it leave the door he fell asleep there he fell asleep there he fell asleep there he fell asleep there