 So welcome to the last SingaporeJS for the year, good turnout, thanks for coming, it's awesome. So I'm just going to talk a little bit about stuff and this particular thing that I'm going to talk about is why we started this thing or why I started this thing, basically my entire career was sort of driven down by the interactions that I had with people at Meetups. So I really think that Meetups are some of the most important things that you can do in your professional career and not only that, JavaScript is also one of the most important things you can do in your professional career. So I thought come on and that's the SingaporeJS. That's me, I organized CampJS in Australia, that's going to be happening probably next year. Just keep an eye out, you guys should come along, it'll be lots of fun. We basically bring out all kinds of interesting people to just hang out basically. It's sort of something between a conference and just like a whole bunch of people hanging out. We have a few organized talks, it goes for a whole weekend and there's alcohol and there's space to hack. Last time we had a sub-stack out, we've had Max Alvedon, we've had TJ Holwaychart. I just want to point out the best thing about that is this guy never comes to any conferences at all, he's never been to a conference, I don't think anyone and he came to my conference which was awesome. I'm hoping to get other cool people, I've actually run out of all of my favorite people in the world to CampJS already. I've already done, I'm going to have to come up with some, I need some more stars. How do you get power? It's not actually camping. I told the designer, it's not camping. I guess the name was his vibe. It's actually dormitory accommodation. Think about a school camp, but instead of having idiots there, you've got a whole bunch of super smart. Tonight's agenda, this is the order of people. I've thrown my thing last because I have trouble cutting it down to short. So if need be, that will be a part of the talk. So there's some other meet-ups but I'm going to let Saini talk about the involvement here. I normally talk about these other things but basically this is much better than asking him. So she'll speak about that in a moment. Another thing that we do with SingaporeJS, we have a thing called Book Club. Basically we go through a book and talk about it every once a week on a Thursday. We just finished functional JavaScript. It was pretty good I guess because basically I ended up producing a tool that everybody can use to learn functional JavaScript. So you can generalize this thing. It's a function, it's like a note tool. You can install it with NPM and learn how to do functional JavaScript. So next year what we're hoping to do is pick something interesting. We have a few suggestions and produce some kind of interactive lessons for that as well. It's all open source, it's all free and it's on that thing. Go and start some of my requests. Thanks to Microsoft for sponsoring the menu, that's really cool of them. Thanks to Nia for sponsoring the other menu. Book Club, they're hiring, they do brails. And we could also do it with small sponsors. The reason we don't have pizzas is because we don't have a pizza sponsor. So if anybody's company wants to get in the book books, JavaScript developers have a pretty good idea. And basically because we don't have pizza, all we'll do is grab and have dinner afterwards. So who's keen on that? Okay, so a few people are keen. So if you want to hang out with us, we'll probably be going up to my proper center over there somewhere. That's it. So I'd like to invite Michael to talk about some other stuff. This is not timely, unfortunately, but just as a general in case you don't know about it. Hacker Space is a tech community group and co-op in space. It's actually closing its current location this week. We're going for a party on Saturday. We are expecting to open again in a new venue hopefully within a year. We think it's like the most tech events that affect the stuff. Supposedly not this one, but a variety of others. And a whole lot of people are starting out in there. So if you contact with other tech people, other fields, particularly the more hardware stuff is of interest, please have a look at TechExpects.sg. I hope we'll be able to list if you wish. Hi guys. So I'm recording the session for tonight. It's actually part of a new project I'm exploring. I call it NGDS.sg. I own the domain. NGDS.sg. We have a couple of articles and news about Singapore. Singapore doesn't have NGDS, but we have a room full of NGDS here. So it's kind of interesting. I want to showcase the work of NGDS and also the user groups. NGDS.sg. At the moment, if you go to NGDS.sg, you can redirect it to a video playlist which contains all the meetups of major user groups in Singapore. You'll see that if you meet up videos there, tonight's JavaScript meetup video will be up there soon. And also the iOS meetup and all those other issues which I will stony add in the collection. The goal of this project is to kind of like group of concepts. The group of concepts has a pilot to show that hey, how can you actually do this at a low cost and low budget set up. My current setup is less than $300, which is fairly affordable. I want to share the knowledge with other user groups in town which get a co-ownership from everyone to create and curate this China web that showcase the work of NGDS in town in Singapore. This will be like precursor to another project which I have to write, which I will discuss while my friends on Facebook will probably know about this. I have this idea about doing a little documentary about NGDS at work, which basically showcase how about NGDS do, how you call it changing the world, line by line. And every episode in the documentary will start with this very simple sentence, trust me, I'm NGDS. So this is so long that the punchline can work. So that's it, that's a little project I'm working on. So I hope you guys like it. Subscribe to the channel, subscribe to the playlist. More news to come when I'm ready. So yeah, that's it, thanks. My name is Sayani. So my demo is going to be really fast. And it's basically for all of us who are already JavaScript developers, is how you can impart the knowledge of HTML, CSS, and JavaScript in a fun way. Cool. So I'm going to use Raspberry Pi, which is known as a $35 little computer. And let me show you one of this right here. So as you can see here, it has the SD card slot, it has the HDMI slot for monitor, it has two USB. You can put a Wi-Fi module, you can put your keyboard, and voila, you have it a little computer. So I'm going to pop this around. I am expecting this to be back here. So just having to go. So my name is Sayani, you can just go to my website and find my various links. I'm still a very newbie programmer, having started two and a half years ago in web technology. And the way I like to do it, I share whatever I learn. So all these tools that you see here are basic introductions to everything, thanks to Mike and Tim and all everybody that I own. So I do this every other week or so. And like Tim was saying, webuild.sgi kind of lists out the free developer events in Singapore and live.webuild.sg. We have an internet show every two weeks. And guess who is up in two weeks' time? Wait right here. That's episode eight. Episode one was Mike Chang. And a lot of you in the audience will be in future episodes. But she'll be talking about agile development and being an effective tech conference speaker. So join us live from your bedroom. No cameras. Okay. So let me talk about the little setup that I have here. So what do you need for Raspberry Pi? So this is the little computer that you have. The USB is right here. You have two slots. So one of them I put in the Wi-Fi module. I bought this from the ADAP fruit. But you can just kind of Google a Wi-Fi module. And the second thing you need is the SD card, four gigabyte generally. Here you can basically have an image of an operating system. It can be Raspbian. It can be Arch Linux. The one that I'm running Google code on is based on Raspbian. And the Google team in New York basically added Node.js to it. Elbit is a .6 version. Yeah, I know. They haven't updated it. I know it's a security flaw, but since it will be in a local network, I think it's fine. Don't just expose it to the global internet. So that's what we need. Next, we need a micro-USB power supply. And then for the purpose of this demo, because I want you guys to connect to it, I'm having a router. Because if you connect to the Raspberry Pi itself, probably it's not that powerful. So I am also having a router. The setup is right here. I think after the talks, you guys can check it out. And students' laptops. So for the purpose of a scenario, all of your students, it might not be a laptop. It can be a mobile phone or your iPad. They are on. I will tell you the password and you can log into it. So basically, this is the setup. Pretty easy. So what we are going to do is we are going to download the coder. So the coder website is this. I've chosen the Wi-Fi version right here. And you can basically download it. Once you download, you will have this application right here. And you can just click this and using an SD card just like this. So firstly, I will ask you to take out any SD card so that it can detect. Then you just, if you are using a MacBook, I believe most of us should have an SD card slot there. And then you can basically remove, start, and then you can basically format it. It's pretty user-friendly as opposed to other operating systems meant for a piece. But I'll not run through this. I already have the image prepared in that one. And after this, what you are going to do is connect up the Raspberry Pi. So here I have the Raspberry Pi right here. It's running. So this is the SD card. This is the power. And this is the Wi-Fi model. It's running right here. And all you do is, so let me show you. So I can now go in, come to my laptop, accesscoder.local. And over here at the gear setup, you can go to Wi-Fi setup, which I've already done previously. And basically select the network which is talk.js router, which is my router right here. Okay, so I will not do this because I've already done this. And once you do that, ready for the demo? Okay, I will not give you... Oh no, I will not give you the possibilities. I don't want you to crash before I show you guys. So this is actually built with the coder itself. As you can see here, there's this little thing. If you click here, you'll have the HTML CSS JavaScript, but if you click this little I, you will see that it will be split. So it becomes very easy for a beginner to write here a Google coder and then you can just press save and it will immediately update right here. So I know you might be wondering, hey, you know, you can probably do this by a computer. Yes, of course you can. But what I was thinking, if you go to a village and there is no internet connection, you can just set up a local network and teach a bunch of kids like that. Secondly, I've done quite a bit of teaching. What I felt was when you come to this interface, when I go to coder interface right here, you can actually create boxes. So the teacher standing right here can see what the students are creating out there instead of going individually. So you can create like a Roland box, a white box and you can actually see the code here. So for example, let's go to the eyeball here, which comes by default. You can actually play with it or more importantly, you can look at the code and then you can look at the node, the JavaScript, CSS. You can also upload media which means in terms of pictures. So it's really easy and you can just write your name and stuff. All right. So why don't we all try it? I don't know whether it will crash or not. So let me go back here, talk JS. Okay, so all of you go to the Wi-Fi setting top JS router, which is right here and in your browser go to HTTPS. HTTPS cornered up a little bit. Maybe I should edit it right now. See this is a cool thing about it. Come here, HTTPS, talk JS 1111, which is today's date. Talk JS 1111, today's date. So let me show you what's the password. So you can of course use your mobile phone or your iPad as well. So go ahead and create a box or so, which is HTTPS and projects. Do you guys like connect to it? Yeah, and in your browser go to HTTPS cornered up local. It's not trusted. Yeah, proceed anyway. So see, come on guys. Yeah, just go on, just come on, trust me. Do it. For those who aren't getting 0.5, 1.2.168. 1.2.168. 10.2. 2.1. 2.1.2. You can try that IP address. I don't know how many of you can get in but I probably need a better router. You probably need a Raspberry Pi or a 6S Raspberry Pi to try it out. I got it very quickly. Okay, I guess a lot of you are trying to get in. Refresh? Yeah, let me refresh. Did anybody create something? So let me refresh and see. Maybe mine will also crash. Has there been any success stories like where Google used this or who has been using it? Oh no, I have not heard of such. It's early running, what's the point? What's the point? Yeah exactly, it's no point. But I felt like if you have a place without internet connection, you can create modules like, okay, let's say header run tags or DOM elements and then you can create boxes and teach cases. There's no such possibility that you can just get a cheap computer and just tinker with your computer. Yeah. Exactly, yeah. I'm worried about you kids playing too many games but it's not as fun to play as you. So it's primarily a teaching tool. It is absolutely a teaching tool not to build this stuff. It's very useful. It's very useful. It's very useful. It's very useful. It's very useful. It's very useful. Yeah, that's all I have. So check out Raspberry Pi. We're actually getting into this thing called Internet of Things and in the next year or so I'll be working a lot with Rode and setting up lightweight web servers and connecting sensors to stuff. So this was like one of my first projects to get into Internet of Things and I'm pretty excited about it and hope to share more how these little things can connect to the Java script and such. In future videos. That's it, thank you. The router has crashed. Yes, it is. Yeah, I think we should probably shoot a photo more. I'm excited. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Photo. Anybody else wants to see this? I haven't seen the Raspberry Pi. I see a lot of apps being created. Okay, hi, Aaron. I'm Steve. I'm working in a bank. Yeah, the last person you should have ever seen here. Okay, anyway, today I'm going to talk about ghosts. How many of you have heard of ghosts? Maybe not majority, half of you all. So how many of you all have tried ghosts? Me, two, and me, that's three. How many of you believe in ghosts? How many of you all believe in ghosts? Okay, I will try to sell it. I want to give it from my point of view. First, I'll just take the rest into what it goes all about. Basically, it's just a blogging platform. The reason why WordPress is here is because the guy who created it is John Nolan. He was actually a developer and a designer for the WordPress team. So there was his vision. He wanted what was not... When we started in WordPress, nine years ago, it was just a blogging engine. Before that, it was actually just a V2 blogging engine WordPress. But over the last nine years, it has evolved into something much bigger than a blog. It is actually more or less a CMS, it's a framework, it's everything. So his vision was actually to have something which is just a blogging platform, as simple as that. How many of you have seen Kickstarter? So quite a number also. If you look at the values, right? 25,000 pounds. Total pledge, 200,000 pounds. Those were eight times. I think popularity-wise is fixed for itself. But I didn't go into it. I was aiming for the Ubuntu H2 at the time. That's my point. Okay, so anyway, more or less it's open source, MIT license, and nonprofit. So basically, he and this Hannah Wolf, they actually set up the Girls Foundation. It's nonprofit. And basically, every cent that you put into their foundation, you will go back to the foundation. So to sustain themselves. How are they earning this money? They're going to have a Girls hosting service. So yeah. And they have made it quite clear that they don't want to be acquired. Okay, so just move on. So the whole idea of it is actually voice down to one simple idea. Publishing done right. So how do they want to achieve this? Firstly, you have a markdown like editing. So you get here on the left, you see the results are correct. Simple as that. Intuitive. I think the only one I've seen so far like this is the Destiny Step on Mac OS. It's called mode. But now they're bringing it all over to the platform. So it's actually quite intuitive. Okay, next, simple content management. The first thing you see when you go in, it's actually this screen. Your pulse on the left, your stuff, and the quick preview on the right. Things like that. So maybe can anyone answer what is the first thing they will see when they go into WordPress? Yeah, welcome then. A lot of numbers here, polls, stuff like that. That's what I remember. I haven't used for a long time. Okay, anyway, next thing, well-designed dashboard. Also they say, I would think that it gets to the point. There's a focus on the statistics over here which might or might not benefit the blogger itself. Maybe the top bloggers are more concentrated on their more focus on wanting to know what is their stats. But I think for the rest, it doesn't really matter. But at the end of the day, this dashboard, they want you to develop widgets for it. And it's just drag and drop configurable here and there. As simple as that. Fully responsive. Not that it's very hard to do. But when I say fully responsive, even their backman is fully responsive. I tried my mobile phone, it's not too bad. It's workable. And many more to come. You can see the roadmap and plan features. So currently, the version is at 0.23. It's ember of the 0.4. I'll take you all through. Let's see what they have so far. Okay, so this is the roadmap. They're going to support maybe SSEO, static pages, casheaters, stuff like that. We shall look at the plan features. So basically, if you look at, to summarize this thing, whatever that's here, it's actually whatever is the WordPress. So in terms of maturity level, it's still fairly, I would say, very minimal. You definitely can block or something. But in terms of the extra features, right, you will have to come in over the next one year or so. Anyway. So I'll give you the ghost version of Five Minutes at Stor. So that's the ghost package. You can actually download from the GitHub itself. It's somewhere, yeah, somewhere there. Okay, there might be. Okay, so anyway, right. The first thing you would do is actually to change the conflict form. Basically, they don't really have the, you know, you answer WordPress, you straight away get a setup. No, you don't get that. But what you have to do is actually copy the conflict example. Yes, and yep, that's it. You have to configure your URL. So lucky for me, I actually copied it already. Next thing you do is to production. Okay, and the host right by default is binded to 127, you know, the local host, which should be the case, because in the end of the day, right, you want to close it and then let engine apps do its own job. Yep, by this case, we'll just point it like that. So we can get it out to the world. And if you look at something interesting over here, right, by default, right, your client is actually an SQL engine. So you get a fully, you know, no database setup, whatever. You have database support so far from what I know, right, my SQL and SQLite. Yeah, I think someone got out of the world of WordPress, no Mongo, no, no, whatever, whatever. Yep, so it's fairly basic. Okay, that's it. And then we go, yep, I think we are running about two minutes. I think it's cell phone, MPM 2. No, it's not MPM. It's not MPM, I just checked MPM. It's version 0.01, 2.02, yes and go. Yeah, I think they left it there. I mean, they don't want to do it. Okay, so anyway. Okay, so by default, right, let's try it again. So basically, right, this is the first thing you see. The default team is Casper, it's their own team. It's like that, okay. Yeah, mid console, right. Yes, there goes. Okay, so you put in your name. Okay, so this is, like I said, this was actually the first page. Post on the left, things on the right. Okay, so if you notice, right, one of the things is that when you edit the post, right, you actually get your live editing. So keyboard shortcuts are my favourite. Yeah, that was controlling. Very basic, there's a text on the bottom here. And yeah, just publish or draft. Nothing, no future publish, not yet. It's really, really minimal. If you look at, oh yeah, I want to show you something. Okay, so anyway, let's rename the block. I'm going to focus today on showing my cats. Meow, meow. Okay, so we just go back, oh, okay. So that's like the first thing you probably want to do. Okay, the next thing is, yeah. So if you have like images which you wanted to look at inside here, right, what you can do is actually to give you a box and then you just start on the right. You automatically publish, automatically upload, sorry. So stuff like that, fairly intuitive, fairly simple. Yeah, cat is not showing. I think a cat doesn't want to come up. Okay, never mind. Okay, so let's look at the internals itself. Basically, right, if you look over here, right, you can really see like API calls. So it's actually, it's all fully API stuff, running on the son. It's actually running on the, yeah, so, no stuff. The teams, right, the teams is interesting. Maybe not so interesting, but let's see. Okay, so this is the teams folder. And that's for us. So it's actually all handlebars. Yeah, so if you know handlebars, you know how to. And the structure of it, right, it's actually the same as WordPress you have. Okay, so in this case, you have a few files. D4 is like the skeleton. Okay, index is like your main page. Post is like your, yeah, your post, your single post itself. So basically that's probably the, yeah, maybe just to show you how it looks like. One thing to note, right, comments don't come out of the box. Right, they are not going to support comments. They just ask you to, you know, just to have a discussion or something. Yeah, so maybe just to show you how simple is it. I can quote Stephen. Okay, so it's as simple as that. So to get a fully functional site, it's probably about no more than 30 minutes, more or less. Okay, so anyway, just to move on. So it's more than five minutes. Anyway, the initial launch partners, right, what's interesting about them is that they actually have quite a few types of, like for me, I would recognize and Varsha and Google Teams, they are big, like Google Teams is mixed, they make teams, and Varsha is a big marketplace for teams and stuff like that. So if you look at it, right, they actually start out very strong in terms of how we might go from here really up to the community itself to actually build teams or plug-in for them and stuff like that. And this is actually their marketplace. It's a really, really rare preview. Free stuff, paid stuff, some don't. It just needs to. And from what you have seen so far, right, I mean, it's running on those. So basically you need the access to the command line. So in terms of platform support right now, right, these are a few roles of Varsha, right, supporting it. Okay, so if you really want to try, you just go for these two names. Okay, so my talk's about it, right. Okay, so what I feel about those, right, it's like, Anakin Skywalker, he's like, he's young now, but he will grow and he will become very powerful. That's what I feel about it. But he can also be a very badass. He could go both ways. He could go for the good or he could go for the bad. Like the bad, you know. So what I feel about this way is that if we look at how WordPress has become, right, I feel that when people are attracted to the power of those and they start flocking over to it, right, they will want to build a lot of stuff. They want to expect a lot of stuff out of this platform itself. So eventually, right, my gut feeling tells me that it might grow towards the same direction of it also. But I mean that's just pure speculation, but I mean that's a gut feeling I have. And secondly, right, in terms of like the traction of support for growth, right, I think the majority of support has to come from those who are doing chat hosting now. Because basically, right, it runs on Node and most of the chat host out there now don't run Node here, okay? Only those VPS and stuff. So maybe this would push them towards an enabling Node on their web hosting which is good for everyone, I mean for the JavaScript community in nature. But if they don't really want to follow that action, right, it will also end quite badly for them. And it will just become a project which, you know, after one year no one expects a lot, or very limited. So that's like my two cents on that. Let me see what I can do. Okay. Okay, so other than that, I think it's going to be quite interesting. Next month, they're going to release Yo-Fi 4 that's going to be coming support, stuff like that. And who knows, we might actually have to come from there. Yeah. Okay, any questions? So it runs on database? Oh yeah, now it's on SQLite. You can put it on SQLite. I think database support wise is still fairly easy. They're trying to get everything out. There's just too much together. And does it generate studies? Not for now. Next version, I think, everything. Yeah, polls and everything. The polls are... Yeah, these are uploads. Just to have a poll system. Yeah, okay. Does it have potential for a CMS system? Sorry? CMS, right? Do you want to use my custom design? Yes. I think at this moment, custom design is definitely yes. What you saw just now is actually a simple thing. You can have your own designs. Forums and stuff like that probably have to go through the platforms. I don't think they're going to develop. The developers are going to go through that. They've actually mentioned that they want 100% involvement from the community itself. So if there's anything going to be like that, it's going to be built by the community. Can they put tools to import and save from... Yeah. Not too sure if they're... I think there is. But basically, the import format is actually in JSON. So if you can convert it somehow into that format, it can bring it in. I think I saw this... Actually, there's this tool that... I mean, it's another guy's tool that generates status pages for GitHub. Yeah. But I think over time, it will come up on its own. Yeah. So it's actually quite interesting to see whether people want to do us photos and chuckle with stuff like that. Thank you. Welcome, everyone. My talk will be about multiple dispatch. So it's a tiny bit more theoretical, but hopefully it'll give you some new ideas when it comes to object orientation. What is method dispatch in general? So usually, when you have something that is called polymorphic method, you have multiple implementations for the method, and when you call the method, dispatch is used to determine which of the implementations to use. So in JavaScript, you have a single dispatch. That means a single value is used to determine what method or what code will be called in the end. And a good example is toString. ToString is a polymorphic method. You can implement it in your own constructor, and then it does its own thing. And there are many implementations off toString. On the other hand, what this talk is about is multiple dispatch, and there you use multiple values to determine what implementation will be called in the end. So this is an example of a polymorphic method. Here you call it via single dispatch, via Jane.describe, and you have two different implementations. You have one for person with a function and the other method is in employee. And kind of the analogous way of using a function for the same thing is called a generic function. And here, dispatch does not happen via Jane. It happens via describe. And now, the function is the top level construct, but you still have dispatch. And inside you kind of, this is not how it's actually like the languages that do it this way have fast implementations, but this is the idea how you would program it in code. So you check if the instance is an instance of person, and then you do whatever is done up here. And if it's not a person, you check if it's an employee, and then you do what's done up here. So that is kind of the whole thing turned inside out to. And with generic functions, you have the advantage that if you have more than a single parameter, the system works as well. So here you have plus and you have two operators one and up too. And you want to do different things depending on whether you add a number to our string, or a string to a number. And again, you do these kind of instance off checks or type off checks, the type checks. And then you perform whatever is appropriate for these types. This is kind of like a table and where the table is just the receiver of the method call here's actually the table is about parameters. And if you ever you could actually relatively easily implement multiple dispatch via a library in JavaScript and this is how you would do it. You would create a generic function as kind of an object. And then you would add methods like cases to it. And these cases and languages have multiple dispatcher and generic functions. They're actually called methods because they're very like these cases you add are very, very similar to methods in JavaScript. And here again you see the idea of having a table. These are the types of the parameters and this is the code that handles the specific case of adding a number to a string or adding a string to a number. And this is how you would call it. You would call the object like this and then internally it would go through the table and pick the appropriate component. So what are the benefits? At first glance it looks a bit weird especially if you're used to single dispatch and it's kind of a dominant way of doing dispatch. But you get several really nice benefits and in many ways it's more complimentary to how JavaScript does method calls. So what's the advantage? What happens is you get symmetry. This doesn't have this kind of special role anymore of the parameters become as important and functions become object-oriented now. They are now aware of the type hierarchy. The benefits you get from that is it's useful whenever you have an algorithm that spans multiple objects. For example here if you have if foo is an algorithm that does something and it depends on collaborators so this is not data. These are actually helpers. Object one, object two, object three they help foo. And then with single dispatch you have kind of had the problem okay now I have to put it into a method. But which of the objects should foo reside in? That's weird. Because it crosses it crosses all objects. It's not it should live in a single object it should live in all objects at the same time it's crosscutting. And generic functions actually allow you to extract this kind of algorithm into a function and still have this kind of polymorphism. And the other advantage is you can also easily extend classes or well in JavaScript constructors. But you get this kind of object oriented function and it's very easy to create it. And with JavaScript if you want to add something to an existing constructor it's always very messy and there's always a problem of you adding something that ends up being used by someone else as well or right now they have problems with they want to add new methods for ECMOSCUT 6 and sometimes they existing code has already used the same name and then you have bad clashes and with polymorphic with generic functions you don't have that problem. And one last example where multiple dispatch clearly makes sense is the visitor pattern. Who of you know the visitor pattern? It's a very obscure kind of thing it's and the idea is simple but how you implement it is always there's a lot of boilerplate involved and the problem is if you have theta and you want to have different algorithms that work for the data. A classic example is let's say you have an expression that is parsed in a programming language and you want to print it in different formats you want to print it in plain text in html maybe latex or something then you have a split on one hand you have the data structure which is the expression on the other hand you have the algorithm which is the printing and with normal object orientation you cannot modulely what you would do is you would add printing to the expression and then you would have print html for plus, for minus for parentheses and so on and you would have print plain text and so on but if you want to extract it and have it like kind of pluggable and modular somewhere else in a single object you cannot well cleanly do that with single dispatch and the visitor pattern is kind of a work around and you split the roles so on one hand you have the algorithm which is the visitor and then you have the data which is called the client and the pattern and you can actually look it up on a Wikipedia where you have a class diagram and then the data accepts the algorithm and the data tells the visitor I'm plus do you think with plus or I'm parentheses do you think with parentheses and then you get kind of this back and forth and it's you can look it up, it's not very intuitive on the other hand with multiple management patch it becomes trivial because you have a single function called visitor you have the parameter which is the data and then for each of the different kinds of expressions for plus, for parentheses and so on you add a case to visitor and one visitor would be print HTML one visitor would be a different function would be print plain text algorithm you have one function and it becomes very very simple and with the visitor pattern it's always a bit of a brain teaser so there are a few languages that have multiple dispatch and once you learn it's actually fairly natural common list, past school, art, movie closure and C sharp so it's exotic but not as exotic thank you any questions? if you have a quick one now or weird it out now ok, thank you and I have to say I have to tell you one secret I am not a Java script developer I am a Java developer I am control the Java world the Java developer believes that we don't need Java script because we have Java web and Java output very great technology but we know that we have to use Java script so I am just just touching on the Java script in the library like on NIDA when the character is inputting Java script this is kind of the upgrade of OSS you can get the photos from the GitHub ok, this is our web service the background is Java and Scara and of course we are using Java script in the itinerary but you can see that the Java script is written in itinerary so this is very difficult to text so I am trying to move this to the other file and now I am re-sign and then ok, confirm ok, so the AMD and the request is I know the solution for my my problem how many developers know the Rewindjs? thank you yes, so I will skip the what is AMD and now I will show you what is Rewindjs what is the module rooter? you can see that this is one of the modules it suggests how depending on the query it shows the battle mark and you can copy it but when you want to review the modules what you have to do is just explain that I need modules I need modules here and then the system to recognize we passed then you can see that this module the coffee is coming up the two right coffee when you put it that way I am saying yes I need to change the external the coffee the motivation of the Rewindjs as you said the Rewindjs is not the only one solution you can say it is not the Rewindjs you can use I don't think the Rewindjs is not so good for the solution for the Rewindjs my position to use the Rewindjs and first in the useful confusion the Rewindjs has a lot of confusion so you can customize the way that you put the javascript and modules or how to customize them to your program in the useful tools the Rewindjs has some tools Rewindjs is just an automator to optimize your files modules and Rewindjs is a similar example of AMD it means that you don't distribute your Rewindjs or even at least not so small so if you want to make the package of your project you have to reduce the size of the javascript you can use all of the javascript and then you don't have to reduce the module loader and first start all of the javascript this is not a member of the Rewindjs but you can use this module loader from now I will explain the tool use cases but I already know this the fancy is genius optimization in the old samples you don't have to combine so much and you don't have to minify your files if you minify your files you need to read the components of course you have how we can use so much but I don't think that we should use so much in the romance at that time you can download your modules but just one file and you don't have to edit you can disable the browser cache because maybe you modify some javascript files and you will download a fresh file so Rewindjs will help you to save your browser cache and after optimization the Rewindjs Rewindjs will be optimized you need to combine and minify the optimization but once you do the combination you need to minify and minification so you don't have to your customer doesn't have to download so much file 100 or 100 here 100 or 1000 so much file is just to download and minify your customer can enjoy your products and at that time you don't have to disable browser cache so you want to use the browser cache to make your system easy to use and the second use case is cdn4 but in your product you already use cdn right you have to use cdn right so do you have a folder code I mean that when the Google spots with their work how do you how do you product I think that if you have no product your service will be dead what about folder you can distribute the request it's sent from your domain to your host so if your server is working then there's no problem I don't know easy to wake up and call your customers then here is wow you can see this is just a simple configuration what you have to do is first you have to care the cargo app in that explorer it's stored from Microsoft and second is you have you can explain where is the first of course you can put the password on the cdn and the second if this pass can't work then your request will try the second one leave the jpeg in this case your customer has to download the text not a file so make the performance not so good but this is better than stopping your service here is more documents but you can't trigger this publish this to the public so please search my name is this is the name of my github account and twitter account and I really distribute my 5,000 twitter and I have a history you can see I have a github I have a so called and you can view the domain the so called and try how to optimize your files and you can enjoy it you can run and enjoy your monitor how to use the request this is all my presentation do you have a question during the flash days there used to be like cool loader sliders when you load flash that side I think there is any loader which looks shows you the progress as you download it behind your scenes you mean that you want to display the sound speed when you are downloading a huge file of course you can you should download a smaller model to show the speed the speed on this channel so you should you should download this on the display and after that you can start downloading other folders either in my the the physical for example whether you have it right and make the number people access to the script tags that's a little bit in the memo browsers you can get progress events and at least load events so I'm not sure if it requires if you can worst case scenario you can just run a loop to text newsprint is that all? thank you the amd and require.js is one option and there is a lot of discussion at the moment about how you can do these kinds of things I will post I don't have the internet now but there is a a guy called but I will post there is a discussion on the gist about this stuff because basically there is three different versions of three and a half you've got require and require.js and amd who basically is an asynchronous tool but it kind of like works at runtime you've got you've got component and you've got browserify which requires a build step so you run a build step they give you synchronous requires and it's a little kind of neater it's a lot neater actually I'm sorry and there's also some interesting stuff which is coming up in ES6 which is like ES6 has its own module loading mechanism and they're all different and they all have pros and cons but the point that I want to make is npm npm is this amazing massive library of code and these other module systems that aren't compatible with it and I don't need all that code well I'm happy to rebuild everything and I think anything that's not compatible with npm is like making an incredible sacrifice whether they know it or not just because okay at the moment npm is primarily node modules but you can also put you can put anything on there just through chance a lot of stuff that works for node also just works for the browser one of the key things that browserify gives you is that a lot of the built-in stuff in node gets replaced with something like an equivalent for the browser so for example in node you can say you require fs to pull in the file system module which allows you to then read and write files so there's modules transforms for browserify which will allow you to read files using the exact same syntax as you would in node but in the browser and basically it inlines the file into your script so that when you actually require it all it does is just like returns a string anyway the long term thing is that most people will move to or even npm will move to the npm script 6 I'm not sure there's been a discussion about that there's one move to the new syntax and I'm not sure about that either so again like the new syntax for ES6 it's weird like well it's weird because it introduces new keywords for like exposing for attaching stuff to the local scope I don't know we've already got like two keywords now for attaching stuff to the local scope why do we need anyway there's a good little argument about that which is right now the single gravity for the npm sort of track it if it adds new syntax then usually it's not there's lots of discussions and like sometimes it's fun just to pick one side and just be really opinionated so that's not what I talked about I'm talking about shout out what the hell am I doing okay so I have to run this in canary because the thing I have to do is make a word for chrome socks so yeah alright so I found the whole concept of shout it on kind of confusing at first and I didn't really what the hell is it and part of the trick with all of these programming things is that they throw words out and you try to map them to concepts that you already have but you don't have anything so like I didn't get like what does the word shadow have to do with anything and in fact I kind of feel like I got it wrong anyway the light dorm is what you're using now so when you're using well in the these terms so the light dorm is if I open up here and I look at this thing this is the light dorm the shadow dorm is what I'm talking about today and it's something which is kind of packaged up with this whole web components movement and it will be coming soon so you should learn about it so the basic idea of shout it on is that it takes an element so let's say you go button on this case we've got an h3 that's that one there and it completely replaces its visual so if I click on this code that runs it so we've completely replaced our h3 with this shadow dorm and in this case the shadow dorm has nothing you know so our item really disappears so the shadow dorm itself kind of like having a it's a whole document that lives inside a dorm node and yeah like a mini my friend that lives inside an element so for example here I create my shadow which is kind of like creating like a new document inside h3 and then I just said it's inner html to be this you know a tag and if I run this code our h3 has been replaced with this a tag so you can kind of think of html being a model and the shadow dorm is reviewed so one of the things that you can do here is about that so that's that thing there basically when you create the shadow root inject some stuff now this is an interesting new tag basically what this does it takes your original item and injects it into the shadow dorm so you've got an item you've created a shadow root so it pulls it out of the document and replaces it with this with this new tree and at this point then we put in an anchor so that will display and then we take the original node and we put it into the shadow dorm tree so that's how that works and so if we look at this what will happen is we'll end up with a link that says shadow dorm on the left and we should have the original this thing on the right that was run up and it worked so that there is probably that's the most important thing to understand in this thing because that was the part that I really struggled with when I was trying to figure out what the hell this thing was but that's basically it how is this useful so do you guys remember semantic markup and actually trying to do this recently it kind of sucks the whole idea was we're trying to decouple our content from our presentation this is like old 90's early 2000's probably banks in Singapore style but you end up with you've got an element here which doesn't say anything about what it is, it just describes its presentation and so that was bad and we moved to this CSS thing but we were trying to get away from people using tables for doing layouts and things like that but we've kind of created pretty much the exact same problem it's a little bit better in the fact that div doesn't have any meaning but we end up with this spam of divs everywhere so CSS is really good for handling one element at a time but it kind of sucks when you're trying to build an application with it and it also, I mean layout is really a problem with it and so this is something which you commonly see in your programs you'll see nested divs to achieve some effect so this is vertically centering content and in fact the reason why this is up at the top of the page is because I couldn't be bothered doing all this it's just a padding on the top but it's a lot of work doing vertical centering we've got to add extra elements and I actually feel bad when I'm adding elements to my DOM that aren't semantic this is from Bootstrap this is really easy it's really convenient to produce stuff with it but we've completely lost the whole concept of semantic marker but there are things getting better and there's progress on both ends we've got progress coming in from the HTML HTML is getting better HTML5 has these new elements there's a hell of a lot more but these are just like you know, particularly useful ones we're doing header it renders the same header once header bang, side, foot off anyway, whatever but HTML5 can't save you from the CSS when you need to do often you need to have a div that wraps something to do something with it and even though you've got your semantic elements in there you end up injecting all these divs or whatever just because you need something to attach some styles to so that you can vertically send to something so that was the HTML side of getting better CSS Flexbox is helping us a lot so I'm not sure if you guys have ever tried to do header so if you tried to wholly growl out so that's the idea, you've got a header and you've got content and footer and trying to do that kind of responsively basically it's actually a real headache to do it if you were trying to do it hand roll it and not following some kind of like protocol but it becomes quite trivial to do if you're doing it with Flexbox so this is something like it makes CSS a lot more powerful so you don't have to inject a lot of these wrapper divs when you're dealing with if you're using Flexbox but still sometimes you just need a div if you've got certain styling requirements you just need to have extra elements in your DOM so how do you get around that so one solution is having pseudo elements so it allows you to inject content into your document from your CSS because it allows us to we don't have to create all of these elements in our actual markup we end up we're dealing with presentation stuff in the CSS and that's where it belongs so that's good and turns out that these where do these elements actually go they actually appear in the Shadow DOM so Shadow DOM actually it kind of solves all these problems well for example one of the things that the key benefit of Shadow DOM is that it allows you to hide all of your non-spending markup inside the Shadow DOM so for example here I've got this main thing that's the same thing up there and I want to wrap it in this div with an inline style for whatever reason but it doesn't matter because the thing is nobody will see this right is this leaving the original document in tact yes I'll show you in a second so let me show you so if I inspect this sorry this is the thing that I'm going to be targeting when I run this code basically what happens is we get this document fragment and that's how the prime inspector represents a Shadow root so the document fragment if I open that up it contains the wrapper content and then it contains this content thing which is then when it's rendered is replaced with the original main element makes sense so actually I think you can even look at the video element in Chrome yes I'll get to that is this supported in IBM? get to that nothing is supported so nothing is supported in IBM so there's a few things that you can do here so I mean obviously in this one we're writing html and our javascript and that's just as bad as writing html and our css and our html just keep it where it belongs so you can use these things for this is a new thing coming in web components for template and template allows you to create inert pieces of DOM content they don't do anything so if you've got images scripts or anything like that they won't initiate loading and the other cool thing about it is that it allows you to manipulate it as if it was in the DOM already so you can attach classes, you can attach all sorts of interesting stuff do things with it without it ever affecting what's actually written on the page anyway, if you're using this template this is basically the template way of doing exactly the same thing here so I've got this deal which is wrapping the content but I'm just doing the same thing inside the template and I just use I just append the template content to my shadow root and then it kind of does all the magic and it happens so I'll show it to you great but this is really interesting, I think this is one of the coolest features there's more cooler features than this but I've got a little bit of time today but so these content things, let's say you've got a DOM node so here I have I have this div which contains two elements now, when I use content just on its own I have this idea including its children and put it into the shadow DOM if I use content but what if I don't want all of them so this is an interest so this select attribute on the content thing allows you to take just parts of your parts of your original content and inject them so what I'm doing here is I've got a headache and I've got a main and I want to wrap the heading in this div with a class green and I want to wrap this main with a class content in this div class blue and in fact that would actually select anything so this first one that's just a normal selector that's just like selecting the element with the wrong man again and we've also got this content with the dot content so you can do really interesting stuff with that anyway so if I run that I end up with this one's wrapped in this and this one's wrapped in that now you've also noticed that I've added some styles in here and what's interesting about this does this mean that now that this template's been applied that if I have other things on the page that haven't had the class green would these styles be applied to it and the answers no because you can encapsulate your styles so this is the way when you're dealing with an app I'm sure everybody's dealt with this stuff before it's very difficult to work in a team on an app when you've got multiple people committing CSS stuff and working on different things you'll have somebody who goes and changes the font on something and suddenly your components got gigantic fonts like working in a team on stuff and you have to have really strict rules on the way that you name not only how you do your selectors in the CSS but also how you structure your HTML and often you have to resort to doing something like this having these really long selectors just to change the color on something and the thing is that this poor person he's probably got this selected because somebody else has some other selected which was too specific and they had to overwrite it so over time the length of the selectors in your app just gets longer and longer and the thing is that it's very difficult to even fix this issue because if I go and change this I'm like why has it got so much specificity I don't know where that's going to break I mean there are tools Neo has a tool called Cactus Winston's tool he doesn't like it anymore but there are tools which allow you to test this kind of stuff but nobody does it well it's because it's hard it's difficult stuff to test and it requires a lot of time as well like you can't expect designers to like pick an Apple Rack code so with the shadow DOM it allows us to ignore the rest of the DOM and just do whatever the hell we want inside our own tree so for example here I've got this like you should probably never have this kind of thing unless you're doing you should never do that this kind of thing if you want to have like if this style tag was outside of this template you would apply that red color to everything and if I wanted to get around that in fact I've worked on an app before where they had like top level horrible things like this where they would change the color of everything so just to begin you already like just to style any element you already had to have body in front of everything so any kind of custom stuff had to have body because we had to override this so this is really cool because if I apply this even though I've got this crazy selector it doesn't affect the rest of the page so that's cool but the other interesting thing you'll notice before when we added the link to the when we created that link before in the Shadow DOM it was blue and it looked really horrible and the reason why is because by default Shadow DOM elements aren't affected by the incoming styles either so it doesn't pollute the styles of the outside page and it also doesn't absorb the styles at least by default so for example if I do this you can see there that even though I have this this style exists on this page it didn't apply to that item because it's in the Shadow DOM but you can use this property called apply all the styles which if we set that to true on our Shadow root it allows us to absorb the page styles so that's kind of cool no it only takes and not only that so you'll notice here that it took the color and the underline but there's also there's also a tree of properties which get inherited so it doesn't include color and it doesn't include underline but it doesn't include things like font and it doesn't include things like font size so there's a whole bunch of inheritable properties and basically by default it does inherit the page inheritable properties so you'll notice here that font's right you didn't see any problems so it's obviously right but here if I turn off the style inheritance I mean you've all just opened your web page and if you've gotten to have a style sheet and everything's in time to your moment basically this allows you to kind of like completely reset your style sheet you can stop any styles coming in and start everything from scratch and I'm not sure if anybody's ever tried to build like a widget to load on to like third party pages but it's a super big headache because you need to you've got people's styles coming in changing things it's really hard to solve this problem by just displaying things inside an iFrame that's the kind of only solution you can get or an image where you can guarantee that your third party content will be displayed correctly but this when you can use it will be very useful so there's something else you can do here so if I've got an element and I want to allow somebody else to be able to style it I can create these things will it's not that anyway this is a program I can't figure out but so there is a way where you can expose certain CSS properties to the outside world and that's what you can you can tap into for a lot of built in native elements so for example here we've got a progress bar that looks like that and if I that's what it does it's just me increasing the value so now here I've got this style sheet it'll only apply once I hit this custom, once I add this custom class which I haven't added yet but basically I turn off this WebKit appearance thing this WebKit appearance thing will trip you up if you're ever messing around with these things basically it tells this component to like all that magic aqua stuff so you're going to turn that off and then you've kind of got like access to let me show you this so if you look at this element now this is I haven't done anything I haven't created any shadow roots or anything I'll open up this progress bar see here it's a document fragment there's probably a shadow root and you'll see inside there's a whole bunch of dish and that's actually like the internal implementation of this component so if I look here my so you can see here I've got WebKit progress value WebKit progress bar and that's what these two divs so what I can do is I can style them so I'm going to add this custom class and you can see here it's style that looks pretty and it works like a native element and that's the key is that this is like one of the most important things that the Web needs to do and needs to get right is the ability to style and override the functionality of built-in elements so and the reason why is because the Web is like a platform for for everything you know people building games in the Web people building websites signing up to things but and then option if you want to rebrand a nation of components basically just to completely rebuild it so who's used like chosen or select two to get pretty drop-down boxes couple of hits so but even those things they're broken like it's like the amount of code that goes into just reproducing the functionality of a drop-down box it's an awful amount and a lot of companies will be produced they they don't use like chosen they just rewrite it themselves they build everything in divs and then like something's wrong like for example it won't work correctly on mobile or they'll forget that you know escape key should like loose focus or and they call the tab button doesn't work so they do all this stuff to make their forms prettier but they end up being completely useless because you can't use them well not useless but they they ruin your experience you cruise along good and then you bam can't hit tab so this this facility with the Shadow DOM allows you to override the built-in appearance while still maintaining all of the built-in behavior so that's really cool so this gist here it's done by Kinsley and Pipero she came to camp days last year but this is a list of all of the Shadow DOM books that you can get on some of the HTML5 elements so this is what you're mentioning before the video element so the video element is actually like it's got a whole bunch of little things which you can style and do stuff with you know you can you can style the mute button for example and so and these are all just like dibs and stuff so just treat it like regular see it like regular elements input range and other etc so there's a lot of things to look into although there's a problem I'll personally link to a plan so the there is obviously a problem is like you know I'll get to the next slide so with that previous slide I mean all those things that you can look into they're all custom WebKit things so whether the Chrome team and Firefox team can agree on all of the custom I mean even agree on like the Shadow DOM implementation let alone you know which elements to expose on their video player etc I will see but basically you can make this work in evergreen browsers so that means Chrome on Android Firefox Safari 6 mobile Safari and in the next four or ten blocks so the thing is is that these browsers the one we're going to talk about in the next four basically it's going to be here soon 11 is out exactly Google has dropped support for IE 9 so you guys like people are still on IE 6 and IE 7 in these like corporate environments and part of the reason why is because people the people who are making their money decisions it's too expensive for them they see it as a cost to upgrade but what I want everybody here to do is to make them realize the cost of them not upgrading there's no amount of money that you'll be able to like browser working on browser compatibility crap is one of the worst tasks you can do ever like I would prefer to do manual labor it is an awful job it's horrible just because nothing makes any sense and you just bang in your head against the keyboard it's not good and so you're going to lose these companies are going to lose like developer morale good developers are just going to see you supporting IE 8 and they're just going to fuck that it's true I'm a lot of work for a company that supports IE 8 and I encourage all of you guys to do the same because then it gives the fact that they're supporting these old browser it gives it a cost and it's not just you just need to complain they probably don't even know that there's a problem because everybody's too shy developers no personality anyway ShadowDoll is what you're going to be using in the future so basically I really want everybody to just start looking into this stuff because like I said it will be here sooner and as soon as these evergreen browsers hit so hang on evergreen browser isn't a browser that updates itself so as soon as this hits all of this awful shit that we've been dealing with with old browsers it's going to disappear so we've been dealing with this slow release cycle stuff so long but as soon as this is these popular that will just be a horrible memory that you'll probably repress it's going to happen we need to start learning to learn again all this stuff is being so slow and you can't use most of it so you don't even bother learning it anyway keep up with me any questions yes there's begs for it but I mean the browsers kind of like have their own I mean the way I'm making this work is actually through Polo yeah say a sentence about Polo I spoke about it at the last meeting but Polymer basically enables well at least the Polymer platform enables a lot of this new stuff in all of these evergreen browsers so the only one that actually supports a lot of this stuff is natively is Chrome and a little bit of Firefox kind of but the Polymer is a whole bunch of polyfills for a lot of this stuff even though they're kind of trying to jam their own framework into it you can strip their frameworks away yeah it's layered, mostly and in fact you can download the just a web if you're going to use Browserify as your tool you can MPM install Polyfill web components and that gets you all the platform stuff I've made it for Browserify so that's cool yeah any other questions can you replace native tags like input tags or tag lists yeah so like with the Shadow Realm you can do anything correct as soon as you add a shadow root that element vanishes and it's only are there like collections of people publishing these kind of things yeah so it's not really like a central or wasn't really that big thanks Mike yeah that's I guess we can fight I think what it matters too about web components is that at the moment we have like if you have a beautiful widget in say jQuery mobile but you actually want to use EmberJS and then that's a problem because every component framework has different widgets infrastructure, their layout so web components will have with them you'll have a single kind of market or ecosystem for widgets that will work across all these frameworks yeah exactly because it encapsulates style and also like events and all that kind of stuff like the idea is we're trying to set it up so that you can build a piece of DOM and it doesn't get interfered with and it doesn't interfere with anything it's just completely isolated and live on the page happily so if you find a widget that is cool you can frame it on that and you'll be able to use it anywhere and you can use it can you comment on this and all that all that all that well that is just like why yeah it's just like seriously what does it do it doesn't do anything it's just git clone just go to the repo and git clone and you can actually use it I used it recently it is kind of heavy I guess the thing is they're not really comparable because they're kind of it's for pulling over stuff which isn't modular and kind of finding a way to bake it into your project well like browser-reviable component gives you a facility for encapsulating your code it's all about encapsulation so ballot does not give you anything it doesn't control your code it doesn't do anything while browser-reviable component wrap up all of your files in closures automatically and allow you to only infect the code only infect files with what that file pulls out of your out of your code base that makes sense you add a shadow root yes so there was a content that content tag that you saw it was that's where like the normal content goes but if you've got shadow content it will appear in a shadow if you put in a shadow tag then any shadow content will appear there yes how does JavaScript communicate with post message the idea is that you shouldn't you're trying to prevent people from actually so that the shadow DOM boundary is designed so that you can't get in wow the only stuff that you is purposely exposed I think you can get like a benza and mess around with it or any kind of UI control you need to expose a benza there have to be a benza obviously or maybe you just I don't know if I'm going to mess around with that you know so if you've got your own custom event and it's called something like myclick and you've got somebody else who's just done a web content tutorial and they've left the same thing in there and they're not going to interfere with each other very fast data very fast data I think right now we're using PST so Polymer has a prolly fill for the single node bind and they also add a whole bunch of other stuff when you show it but go to Polymer project and they're trying to get the template system set up two way binding and also kind of like a handlebar style interpolation thing so yeah you can pass data in that's and it works actually, it's quite neat try it out Polymer project, anything else? Is it like a security context is it running in the same domain whatever you put in there I guess I don't know good question I don't know Windows Windows is still accessible Windows is still accessible oh really? hang on the script runs in the window it doesn't run anywhere else so the scripts aren't like it doesn't sandbox scripts so you can have a script tag in there you know what that's at least how it runs at the moment in Polymer Polymer is kind of like it's sort of making what are they called it's kind of got an estimate of that feature so I thought that they would run in their own sandbox but they don't maybe they do in like in real mode I don't know but that would be useful anything else? alright well thanks heaps for coming along thanks for all the speakers for sending us somewhere over here just follow the crowd just hang around what's cool see the board in there we've got one it's a specific place just follow the people yeah thanks we'll be in another meetup in January or February have a good Christmas have a good union see you then