 Hello, everybody. How deep have we gone so far? Are we all very deep into javascript? i was here earlier. We were waiting above. We're all very deep. Oh, yeah, yeah, yeah. This is going to get real. Does anybody hear when i gave my talk earlier intro to angular? Okay, cool, cool. So that was very foundational, and that Was kind of we can do, we can do, that could have been Front-end stuff, that could have been back-end. I want to get a little bit deeper. There's one other thing i need to talk that's Almost as exciting as angular. It's a little bit less exciting, which is about ice cream. I've been asked to inform you that you will see people bringing up ice cream. They have asked that we wait until the end, because they're Worried that others are bringing up ice cream, and they're not ready. People will be like, oh, my god, ice cream. Keep it right out there. Also, you should finish my talk. But for real, they want to make sure that they wait until They can control it for release, which will be roughly when this is over. There is a q and a panel coming up later with speakers to be announced as well. So those are your updates throughout the day. So here's a really long title. Does anybody use co-schedules Headline analyzer for the content? it's a good tool. If you write content, this would not have passed. But single-page web apps as wordpress admin interfaces using Angular j s and the wordpress rest api. It's a big topic. But really, what i'm talking about is my experience building the In-get admin. Sorry, my ab testing plugin. This is josh. Hello. I'm josh malik. I'm a plugin developer. I make an ab testing solution For wordpress called ingot, which we're talking about. I have to build a drag and drop form builder called caldera Forms. If you go to my twitter at Josh412, my last tweet was a link to slides, resources, Example code. Everything's going to be front. All the example code today is going to be simplified from In-get. It's on github. You guys want to really get into it. And this is actually a link that will take you to it. This is the most important meme in the entire stack of memes That are available to us as developers. Gpl has a lot of virtues. Our ability to learn from Each other and to share what we've learned with our Neighbors is most important. So that's what i spent the Last three months on. That's what i'm commercializing. But one of the things that's exciting about this and this type Of event is that what i've been able to do, which is new to me, I've played with it before, but i wanted to do this. This was a quick gain for me. I'm going to show you some Gifts as we go on of what we were able to do in the admin, Where we need to move between states very quickly and have Lots of interactions and having tons of page reloads. Right? That's all gone. That's all out of the window from the way that these Things used to be done. That's why i'm excited about it. I hope that you'll take a look at my code. I hope you'll also find Stupid things that i didn't put in full request. I hope that you'll look at it and go, this isn't so hard. We can do this. So that gets into why. I think this is the new way. This guy, anybody met this guy? This guy called matt mollowanky. He does this word press Thing. Saying that javascript and ABI-driven interfaces are the future. I agree. And i do think that a lot of word press has been around for a While. It's awesome that what we've built, we're Maintaining a lot of legacy systems and a lot of legacy Patterns that we've repeated throughout our plugins and it's Time to level up that game. People who expect these Dynamic interfaces. Don't expect page refreshes. Expect to be able to move between tabs dynamically. Oops, i'm in the wrong space and go back right away. Browsers are fast, computers are fast, the internet is still Catching up. I think this is how we catch up. This is why wordpress.com rewrote into a single page web app. They were looking to catch up. This should be a gif. Oh, no, this isn't a gif. That's bad. Okay, imagination time. Six changes. No page refresh. What we're able to do in this Imagine that you click on content tests and that changes Into a interface. Do you want to create a new one? Do you want to show one? Do you want to go into this group? Do you want to jump back out of that because you're in the Wrong place? Do you want to see stats? Do you want to move Through all these cynics? i had a gif, a three-second gif With six state changes. That were no page refreshes. This isn't like that because angular is magic. That's exciting. That's a why statement. Deep linking. This gif. It was working before. All those different state Changes kind of paste it, drop it into another page and it Glows like that. We're able to use the angular Router that was built so we could have a website that has Different states moving through it. We're able to use that in our admin. You'll notice this is wp-admin. Right here. We could do this with admin agedx. We could write this all bespoke. Many of us have done this. But it sucks. Sucks for the user and all this weird magic that goes on Behind that i haven't figured out myself of what do i put in The cache, what don't i put in the cache, what partials do i Put in, this kind of stuff. Who knows how many engineers Are sitting around that google figuring out how to do all That magic for me. I like that. Because i don't have the google-sized group of engineers. Common uiux patterns. I'm using angular js and boot Strap. That's great for me as a developer. I don't do a lot of front-end stuff but i know how to do a Column small three. Bootstrap is easy and it's a Design pattern that everybody knows. Every person that's using the internet today is familiar With bootstrap. If they're not a developer But they're used to bootstrap because it's everywhere. For us, we're combining angular and bootstrap. We're sure with the wordpress rest api. We're able to build a really cool interface that's portable. I could very easily lift this out of wordpress. And it's familiar. And also because custom rest apis, Where does angular consume a rest api? Custom rest apis are so easy in wordpress now. For me to say, oh, i'm missing an end point, i can get that up With unit tests in less than 30 minutes. Because all the hard work for me is done. I've spent so much time in the past building custom apis for Plugins that were not half as good as what i'm able to build In less time because this is why we use open source People that are smarter than us, have more time than us To build this stuff for us. Why angular? I like the fact that it uses standard. It uses html5 for the system that's data binding. It's not reinventing the wheel. If i want to add a class to an Element, i type class equals, you know, double quotes, the Name of the class, end quotes. I like that. And i like the separation of concerns. I love that my views are put in an html file. If there needs to be funny logic to get them to work in That view, that's in a javascript file. I like that. It's relatively easy to learn. If today is your first javascript day, this is not for day two. But if you've been doing the jQuery stuff, if you've been Doing the, if you're a wordpress developer, you understand NBC, this shouldn't be too hard of a jump. It's testable. We're going to take a look at Factories, which i didn't cover in my last talk, that allow Your html interface to be injected into it. So instead of making an html call in the middle of your Controller, you call a method that does your html request. So you can mock that. Now all of a sudden it's De-coupled from the remote api, so you can write a unit Test using fake data. Beautiful. Also, someone else pays to maintain it. Hashtag thanks, google. That's great. I don't want to do this stuff. Accessibility. One thing that really scares me About everybody, myself included, saying, hey, let's All go javascript interface. One of the great things about The php templating systems we use in the back of the wordpress Is the translation strings. The attention to detail that's Been done in wordpress core to accessibility. This has been a priority. It's awesome. And we can't go back on that. We can't say, oh, look at This. Everything's moving around. It's so usable. Who is it usable for? People who have good vision, people who are able to control Their computers with their hands, people with disabilities All of a sudden, we can't leave them out in the road, out in The dark. For us to say, oh, we can make this More usable but become less accessible is unacceptable. And one of the things that i like about angular is that It has a very good aria library built in. It's not going to do everything for you. But it does a lot of the work for you. And that stuff is built in and there are a lot of ways to Handle translation strings. Sean hoober is around. He's built out a wpml add-on for the rest api to do the Strings. He's built one that can give you Your translation strings from wpml script and i'll show You in here how we're using wpml script directly. It's very clean the way we're able to make it work. So we have an html file or i can't call php function. I can't call underscore e. We have a very good way to make it Translatable. And that's important. These two things making it translatable and making sure we Have our aria tags in the right place. These are essential. Let's talk about this for a bit. Setting it up. You're doing it at a menu page. You're doing this as a single-page web app for your Plug-in. At a menu page the same way. All back as a php function that just puts out the skeleton of Your html. That's short link. We'll get you to it. My slides are online. If you want to click it very later. It's very simple. And then we use wpml script for two things. One, the way it was originally intended to be used, which was To put translation strings into javascript. And then the other thing is one of the good gotchas that You're going to see is that lots of angular tutorials will Show you your template paths and assume that they're relative to The root of the url. But they're not, right? In a wordpress stack, they're in wp content. Except for wp content. It might not be called wp content. Slash plug-in. Slash the name of the plug-in. Which we don't actually know. So the same thing. So we need to localize admin path and our nonsense and These sorts of things. Nothing new. But slight twist on the challenge we've always had. And then obviously the directories. So what's totally out of scope for today is building your api. Unless you're using something that works with the defaults. If you're a plug-in, you're not going to be able to get away With using the post routes. So you're probably going to Need to build your own api endpoints. This isn't dphp day. So if you go on wordpress tv, You can see my extending the wordpress rest api talk. Wp engine has a free book on the rest api that i wrote. And that's chapter eight. And then i have a course at Learn.joshpress.net. In part three is all about extending The rest api building your own custom routes. So that's essential. But we're talking job script today. Also, you know, two talks is a little ambitious. Three talks in a day. So let's talk about this. Making it work. Angular ui router. The older router is the ng router. The newer one is ui router. ng router is still there. ui router is superior for lots of reasons. It's based on states, which is very cool. And you can have multiple nested states and multiple nested views. So imagine that you have an interface, let's call this Main content area and sidebar. You can have three controllers, Three states that all have the same sidebar, but have a Different main view. So as you switch, this stays the Same, this changes over here. Right? That's pretty cool. Also, the parameters of the current state of this are Available to you throughout your application. So if you want to know, like, if you have a url that's, you Know, post slash nine, you can grab, you have an object Available where you can grab that nine off there and use it, Or the slug of it. So that's available. I love this a lot. And it's not that hard to use. This is slightly simplified from ours to fit it on the Screen. This isn't too complicated. This is a function. You know, our variable config. And then we say, at the top, that's my default state, slash. Nothing else matches, otherwise, we're just at slash. But when we're at, when we can call our state clicks Test, when we're at url slash click test, right? You see, i've used wp localize script to get this Variable and get admin. Partials, right? That's the directory and then pull in that html file. What controller? we don't even have one for that. But the next one has a controller. Clickers. Call that controller. It's pretty easy. It's just saying, when the url is this, we go there. And you'll see that that can have dynamic sections. This one here at the bottom. This is like my single group, Right? We have groups of tests. This is a state for editing an individual one. And the last url segment is dynamic, right? Group test slash edit slash seven. We'll get there. We'll be able to load up seven. We'll go a little bit deeper to get to that. We have a new state, these sorts of things. So that's not too complicated, but it's really powerful, Because it can change your application on the fly. And all these things are still sitting there once they've been loaded. Sending it all up. Right? We're making a variable that has the application. Calling angular.module and naming it. Right? Because you have multiple angular apps running at the same time. And then we're listing out all of my dependencies. These also have to be included in the page as javascript files, right? But i'm going to trust we're all wp and qscript savvy, right? But look, this is all the things that we use. We use ui bootstrap, ui router, ng aria, ng resource. You know, ng clipboard is like a little tool that gives you The cover to put into your copy. These sorts of things. And then we just run it. We go into it. This is very important. Right here. Root scope.Translate equals Inga translations. That's my localize variable for All my translation strings. When we're inside of a Template, when we're inside of review, we have scope, which Is unique to the current model available to us. We have root scope, which is essentially like a global Variable in angular. Root scope is sort of everywhere. So i put translations into root scope. And as a result, anywhere in my templates, i can say Translations dot whatever in i have a string that is Translated using word presses native translations functions. Which is, for me, beautiful, right? I can use exactly the same thing. Double underscore. Well, escape it properly. The http interface. This is my delete state. Where i need to make a Delete request back to delete something. You see state grams dot group id. What group am i going to do? Whatever state we're in. It knows the group id. That's how i define what Idea i'm working on. This interface here is very Similar to j query ajax. So i'm able to say, you know, Method delete headers this, that url. And then i have a call back. They've got a very deep system. It starts with just success but then goes to then and then They have the whole deferred library built in. But i'm saying function success call back. Use sweet alert to message this. And then you see state dot go. That's a state switch. Right? Because i was in a state for a group. But i just deleted the group. Why would i want to still be in That state? So state dot go takes me back to the list. It switches the state like that in that one line. And then i also have my error call back that opens up a, What's really neat is that the word press rest api, you Return a wp error. In your client we'll see it as A simple error. I don't know what this back is, But they figured it out. And so i just check to see if, Because it also could just be like a server side error that's Totally malformed. So i just checked that's a Low dash that is object. This is avoiding some things. To see if data dot message is set. Because if the rest api Returns an error, i can get the wp error message. And then i can display that. And then i use state dot go. Pretty neat. Factories. This is where it gets real cool. Who here has been down that Rabbit hole of, okay, i've got some jQuery ajax over here. That's almost identical to this jQuery ajax over here. That's bad software design. I should make a function to do That abstract way. Who's been down that rabbit Hole, anybody? Doesn't end well, does it? Factories are your way of having an abstract way of putting data. This is my group's factory. This is where i get groups. Imagine it could be a post factory. Where this is a simple, I've cut it off because we only have this much. But this shows you how to do a query. So i can say page equals three, limit equals two. Get the third page to two or i can do id equals seven. But i also have all my methods. So i have update. When i want to do an update, i do put. And i make sure that these headers are sent there, right? Standard word press authentication to xwp nonce. Pass that nonce that i localized in. But if you go and you look, there's a short link here. By the way, they'll jump you right into the code where we Have that. I've got delete. I've got get. I've got post. The whole thing is there. It's one place where i wrote It out. This might get a little bit more Complicated later on if we need to do more manipulation That always happens in the same place every time. Just to get it ready to be put into the view. And then again, because this is be coupled from my Controller, i can fake this in my test. Right? I can build a mock version of this. Theoretically jQuery is unit testable. I never figured out how. This is great because i just mocked this. I just built a new version of this with fake data. To see if it works. And this handles every use Case. And it's really neat. This is the example of it. See here? I'm injecting groups factory into this controller. Over here on the right. And instead of making an http Request, i say groupsfactory.query. Page equals one. Limit equals set up there A little bit at ten. Context equals admin. These are just url parameters to put into my get request. This gets translated into a query variable. I could type this out. Add equals. And sign equals. And then break it. Forget that. I just do this. And then when it's done, run that function. If you go into the actual source code, you'll see there's An error and all that stuff. But when it's done, i can Say, well, i could get back no matching and then we don't Have any data. That's my pagination. But what we normally do is say, and then we make scope. Groups empty. But what we hope for is we do Scopes.Group, the data, total groups. We get our header. We sort of modify, following Core's pattern. When you do a core endpoint, it'll give You like x total pages, x total posts, these sorts of Things. So we have x and get total. They'll give us our total. And then we're able to do A little bit of math to put it in there so that way we Can have pagination in our interface. Other benefits. api-driven plugins. When you're able to build a plugin from scratch. This is something i started in november. When you're building a plugin from scratch now, your Rest api isn't a bolt-on. It's not a thing that came Along later because you thought it would be a feature. It's essential in its necessary to the functionality Of your plugin, which means that when somebody says, hey, I'm using rest api to build this third-party integration, They're not second-class citizens of your code. They're doing it the same way you do. That does require some Discipline. That means that the code that is Used, the php side, to get read and write data from the Database needs to be totally decoupled. It can't be mixed in at all with your rest api endpoints. It needs to be called by your rest api endpoints. Your code that creates your front end needs to be totally Decorated out from reading and writing from the database. You need an abstract crud system to make this work. I think that's good coding. That's good software design. That's testable software design. Writing php code to serve this system? We do writing better, testable, decoupled code. That's important. Obviously, that means that it's Easier for third-party add-ons. If somebody comes along and says, i've inherited this Site and it's wordpress, but i don't really know that. Do you know jQuery? awesome. You can work with us. There's a lot more people out there that know javascript than There are professional wordpress developers who know what a hook is. That's awesome. That means that you can make the Jump to sass as a business person, but also that your Users can make the jump to being a sass. That your users can write their own integrations. With your hooks. Wordpress hooks aren't going anywhere. They can do that. They can do php, but they have a whole new Way in which they can do their integrations. Empowering other people to be performers. This guy again. He says that an api is the key to the open web. That is pretty good. Yes, sass is good for me as a Business person. What's awesome about wordpress, and the reason why we can have a conference of 600 People is it's empowered all of us to take control of our Data. When we empower other people to Be service providers of their data, we empower them. We empower them to create their own unique businesses that Maybe don't scale up for one central location, but we give Them the tools. This is why people are going out There and grabbing a bunch of e-commerce stuff and building Something unique with it on top of wordpress every day. As we've empowered them to do so. When we start making our Plug-ins available so our users can be service providers, we Open up a whole new range of possibilities for them to help Build the open web with us. And that, to me, is super Important in the time and place that we are right now Where the open web is threatened, but there's lots of Exciting work being done, let's encrypt apple taking the Stand that they're doing. Our ability to empower other People to control their own data is essential. That is why wordpress is a great cause. And that is where it gets to you. Does this make sense for you? Is that important to you? Is that fundamental to your Business? Is user interface design doing better with that Essential to your business? We can go high minded, but At the end of the day, the point of business is getting People that they want to use your product enough that They'll pay you for it and continue to. I think you can make a better product this way, which is Essential. So go do it. Angular docs are awesome. I love the Angular documentation and It's interactive. You can fork all the code examples and Play with them live on plucker. I have more links and Slides at joshpress.net, such word camp, miamiangular, Including my talk earlier today, all these slides. I know there's been a lot of links and i've moved through. I don't think anybody became an expert on this in the last 20-30 minutes, but i hope that i've helped you feel like, hey, This is something i can do. And hopefully you've been going to Other people's talks and hearing why they did it in Backboner. They did it in react. I did this because it's a very thin layer on top of a php Application, which is what ai happened to be better at. Different use cases. I hope that everyone is going to go Home and take all this to use and do really cool things. My name is josh pollock. It is so awesome that there's a roomful Of people here that want to learn this stuff and they want to Learn it from me. That means a ton for me. I don't know where on time if i'm going to be able to do Questions or we're just going to bleed into the qa panel. If you guys have questions on this or the intro to angular Stuff, i know my last talk butted up against lunch so i ran On out because that's what y'all wanted. But i'm at josh 412. What's the ice cream state? Okay, so if y'all want to find me, i'm going to be hanging out Getting some ice cream or at josh 412. Y'all are awesome. Thank you so much.