 front-ends obviously Calypso is the big one I'm using react so Gonna hand over to Damian who's gonna talk to us about AngularJS, and I'm sure we're all gonna learn a lot So take away Damian. Perfect. Thank you much Hello guys So just to summarize I'm gonna be talking about three main things today AngularJS WordPress and How we kind of can get both of these guys working together using RESTful API's On top of that RESTful RESTful API's are a kind of the future and they sort of picking up and the whole idea is about you know, what what kind of functionality and what possibilities they open for web technologies and You know information exchange and how we can how we can sort of build websites with unique functionalities and Allow for this functionality to be used by other people through the web and through those interfaces and web architecture and I like to start with just giving you a few notes about myself and what I do So I actually have a web technologies degree from University of Greenwich I'm a senior web developer with approximately six years of commercial experience Working on day-to-day basis with WordPress Payment getways API's things like that. I worked with possibly every PHP framework you can name there different content management systems Yeah, on top of that you can check me out after the presentation Please come down talk with me if you have any ideas if you like the presentation if you didn't like it I'm more of an welcome to take their criticism or just talk about the web technology because that's why we are here just to share our experiences and Get better at what we do I guess You can check me out on my git my website Few cool things. I did some security research in back in the days Kind of funny three years ago exactly And yeah, my my best area of interest are API's and how we can change the web and how it works and Performance optimizations. I am kind of guy who loves to tweak things around to to get better delivery better performance better load times in terms of You know website Load times. You might ask why AngularJS? What's so what's so cool about it? Well, basically, it's super popular if you if you start as a web developer You start you start with HTML when you get some CSS and then next big step is JavaScript And you sort of do that because JavaScript allows you to make your website dynamic do cool stuff do do You know all sorts of animations and and off only after you pick up JavaScript I guess your next step is to to move to scripting side languages, you know to server side programming like PHP Java You name it so What's so cool about angular? It's based on JavaScript, which like I said It's third thing you pick up as a web developer, which makes pretty much any person ever dealt with Building websites know at least basics of how to use JavaScript so You know JavaScript, you know how to use AngularJS obviously anger is a library slash framework and it requires some You know learning curve to kind of get get your head around it, but it's it's based on the technology You sort of know already What's so cool about it? It's client-side. So everything is executed in the browser You can write your script and your testing platform is your browser you don't need to set up anything over one have a machine and Running browser with possibly internet connection, but not necessarily It's super popular like I said every every what every website is powered by JavaScript every pretty much every browser on the planet powers JavaScript natively you can disable it, but It's on there by default. So it's it's extremely popular I don't think you might think okay, so what's so cool about JavaScript and Angular and its form well, it's a Basically, it's it's super powerful because it allows you to to get your content very dynamic to get your Websites do some cool events and bring bring this interactivity to your website where it's not just you know page with text It's it's a media-driven event driven website that engages the user and and engages into much more profound experience and Another thing with JavaScript and and what it does and what Angular allows you to do it through the power of JavaScript is to Manipulate the HTML and DOM object that means through JavaScript. You can essentially modify and Interact with every HTML element on your website give it some properties hookup events to it that will trigger Following events and things like that and this brings the entire power of interactivity to to to your to your website and What's so cool about Angular is that it brings Brings more structure to your To your website as if you were to write raw JavaScript. It's kind of Written many years ago. It sort of does not cater anymore for how Internet and web technologies have evolved and Angular sort of Gave a new fresh breath towards what you can do using JavaScript on your website one of those things is Model view controller, which is a common pattern of organizing your file structure organizing your pro your project architecture and Basically model is responsible for all the data binding interaction with data Quaring stuff of database for example view is everything you see on the screen. So HTML structure possibly song Some data binding echoing stuff out. So if you write some logic in model We can display it using the view and and there is a good connection between them because they They allow for two-way data binding So whatever you you create in your view can communicate with what's in your model and Controller is sort of a link between all this three And as well controller allows you to manipulate the routing allows you to control how your logic flows Next thing that's really cool about Angular is that it allows you to To create custom directives directives are those unique HTML attributes that AngularJS understands and Attaches some logic or behavior to your standard HTML elements like in this example We are we are attaching a scope with name ABC to normal diff HTML element that means I can define the controller with name ABC in my model or Controller and attach some functionality to it. For example, I can do one plus one and then Then display it in my div element right here Another cool thing is the power of templating so it's it's fairly new concept in web development where and we use our templating languages to to essentially help us get the back end talking with front-end and And and kind of keep everything organized so it's not really cluttered We don't have to do a lot of string manipulations and echoing if you guys have an experience with Stuff like getting your functions in PHP and then trying to bring it out to to the front and through through echoing things or you you create a template file for example, and you have for each loop and You struggle printing things out because for example every every third row in your for each loop My require a side call to some internal function you wrote but you kind of have this separation where you have your Back end functionality and then front-end and you might end up using Using some some functions in your in your front end in your template the idea of a templating again Is to separate those two and and keep them very well organized and one one of the cool things in Angular is the power of Binding the data. So for example here. I am defining a word variable and this is where I instantiated and this is all in HTML So essentially once I once I render this page out. We're gonna see wordpress in this paragraph Right here and everything is done without a single line of JavaScript It's it's behind the scene what Angular does using the JavaScript But we don't have to to achieve this result to print out variable within the template We don't have to write a single line of JavaScript code, which is quite handy. All you have to know is a Bit of documentation a bit of things about Angular and HTML and you're good to go with templating And another thing which brings us is what happens when we want to attach some logic to it, which is essentially a A Application module where we can specify the controller and how the logic flows So in here, I am specifying the scope and to the scope I am attaching variable word which equals wordpress and this this essentially comes back here If I didn't have this in it word It would it would power the wordpress WordPress binding from from the scope and printed out here and so again, if I if I don't have that or Depending on for example Different variants or different event behavior Let's say I have a logged it in user who visits my website and Anonymous user who visits my website depending on who that is I would want to change that this welcome message again through the controller I can do that because because JavaScript can identify for example a Class that got bound to a body element like wordpress does whenever you log in it It appends different classes that identify whenever you're a logged in user or not So using Angular I can see whenever you're a logged in user or not It's kind of it's kind of work around of identifying and communicating with the back ends HTML structure tells me you're a logged in user and and depending on that I can append different behavior Just based on that Another thing another cool thing is it links links together a front end with back end with front end and In in a way in a way like I said you can whenever you log in for example on wordpress It it appends and changes a bit of HTML structure because a it for example adds a logout link next to Next to your name it prints out prints out your user name on the screen and things like that And so HTML structure structure changes and you can use JavaScript to to bind different behavior based on that and and an Angular is sort of a merger between How you can manipulate HTML without ever touching server-side scripting or touching PHP You can already already do sort of what would you would normally do in PHP using using JavaScript essentially now to give you a quick rundown of how How data to a data binding in Angular works and what you can achieve with it to have interactive experience with your users as Is essentially this take a note right now. I have here in CSS coded two different classes One is called big and it just runs CSS free animation in a loop which resizes the big letters over here, I have hidden input field and I Can change the text of it essentially delete the word nothing happens If I type shaky It starts to shake essentially. I have another class which is which is describing this animation through the two-way data binding on On the HTML using AngularJS It reapplies different class depending on whatever word is typed into the input field for as long as I have a CSS for for the word I typed in CSS class Defined it will apply this class to this HTML element. So it's a This is essentially that the main kind of feature that Angular offers us this two-way data binding And this is all done using the previous example. I showed Which is right here Everything everything done using HTML No JavaScript involved forward That's about what covers the the main aspect of AngularJS. I like to talk about Second thing is what can we do with restful? What what restful APIs are essentially? It's representational state transfer restful is Sort of in a simple words are a set of architecture principles a set of to do's and don't do's of how to structure your your application and And make it sort of work within the standards There isn't any sort of body that defines like We don't have W3 standards that define how you should implement restful Restful transfer protocol and things like that. It's sort of up to you how you build the the application and Structure it but there are some white papers on github running around I encourage everyone to look after them to to kind of get your head around if you're interested in creating restful APIs of What to do and what not to do to sort of save yourself a bit of a heading down the road once your application For example runs and and you have clients relying on it Another thing is the API so The essential structure is that what why would you want to do the API? This is the very first thing I mentioned is it's it's really cool that you you sit down at home or Do something at work for for for your client and every time you develop something there was probably someone before you who probably did something like like what you're doing right now and the ideas to to share things with community to to kind of not try to reinvent the wheel and Go and you know try to build something that someone might have already done and through the through the application of APIs A couple of years down the road Projecting we could say that if if we focus strongly on on trying to Expose the and a sort of functionality we're gonna write for our websites and try to share it with You know with open source community in terms of sharing your source code But not only that but whenever you set up a website you can you can actually Give away this This unique functionality so other people can reuse it and some of the good examples of API is used nowadays are for example a Twitter or Facebook API where you can you can tweet from your own website using the widget it goes through all of authentication for example and so so so Twitter is you don't have to go to Twitter website to tweet and and Because they expanding on that they they allowing you to use any sort of device and even your own website To to create tweets and share things with internet and and I think this is well the future for the web Whatever you develop don't think of it as well. It's it's kind of minor and you know It's it's only one time thing I'm gonna develop try to try to think you know How can you develop something that's gonna do what you're doing by as well might actually be helpful to other people as well And another thing is that Yeah, that's covered What API is offered so restful API is mainly Crowd-based, so it's create read update and delete and those are Basically for procedures you will have a do do using the restful API you you would either try to Create so if you were you know if you were using an API for Twitter You would probably create a tweet so you would you would use create function for to hit Twitter API That's gonna post the border of your tweet and and Twitter is gonna accept that and and display it on your timeline Read this would be to read your timeline timeline from Twitter for example update Well, if you added your tweet or you delete your tweet, this is where those guys come in place That's that's as far as the restful API goes for procedures Everything you have to you have to know and understand to to get things going which is basically nothing now This is an example of WordPress JSON API, so I have here a Plug-in installed on my WordPress, which is WPRS API in version 2.0 Which is still in beta and essentially what this plugin does it it exposes your WordPress content Through the restful API so you can you can sort of you can you can build like separate website Which might not be a WordPress website or something else and let's say you would want to share on your mobile app Or on separate website or any other application share posts from your WordPress blog You can do it through exposure of restful API and this is an example of how it exactly works So we can we can the heat Forward slash posts and this is gonna this is essentially gonna query up all the posts on your WordPress Database one is the identifier for post ID within WordPress posts table and right now we have one post and I am querying all the necessary information that makes the post page and To give you an example, this is how this post page looks It just says angular words sample page. Here's my post and The content of the post is welcome to WordPress. This is your first post, right? and You can you can interact with with the API using different different endpoints now The plug-in specifies if we want to access the page I would type in page with ID one and I'm getting full output of All entire object now this comes with JSON format Which is really cool because you can again go going back to JavaScript and AngularJS. You can you can use things like Things like Ajax to to request the JSON elements and kind of filter out and maybe create completely unique Interaction and displaying unique or filtered content You are only interested for for visitors of your website to see so instead of having a year and tired Like sample page like here with content and titles and things going on I might only be interested in in the main body content of My of my posts and I can put with the exposure of the restful API That's hooked up and requested for agent Ajax request now I Like to give you an quick experience overview of what I am facing on day-to-day basis as a web developer and things I you know things things I Struggle with things that frustrate me some of the problems I deal with on daily basis and Like some some of them are usually I work for a digital agency most of our clients are WordPress based clients We we do rebranding design full WordPress development including plug-in and vim development now One of the biggest struggles I face while we're in general working as a web developer is things like connecting to an FTP to for example edit a vim file or functions file to update some of the functionality at some redirections and things like that and Usually it spins around editing the content of the website But content of the website that was brought into through different plugins or through custom functionality applied either by vim or a custom plugin developed for the client and some of those things and Maybe sure not sure some of you might connect with me where you you just go to you just go to FTP and you try to edit a functions file to to to fix for example URL redirect on your client website and and this is usually quite frustrating because I you need a software to connect to FTP Then you need a let's say you're on holiday and it's Saturday and you get the you know client call Listen website is not working. It's redirecting incorrectly and you figure out You know you typed in the wrong URL and you have to add your plug-in your plug-in functions for example and And you kind of limit it very you limit it in terms of what software you use you have access to it How can I get it as quickly as possible now? some of those things can be Can can be worked around when we take into the consideration of how powerful the WordPress is what it offers and What we can do with it when we when we connect AngularJS and RESTful API's now some of the things WordPress offers to us that we know it are coming outside of a box right away is That our widgets we can create custom post types So we define we define different different pages With different content that's gonna have different behavior and vote. This is all server side, you know focus through that through the PHP through the extension of either functions Veeam file or the plugins you might be installing or building when we have text tags and categories now What's so cool about WordPress is that it is extensible we we can we can do whatever we like with it right now It's such a powerful and popular platform building full-blown e-commerce website It's it's like installing three plugins and just configuring them together You can probably do it within like 30 minutes if you if you know what you're doing Now another thing is themes and this is another thing. This is aesthetic theme clients love it You can change how the website looks and behaves so a lot of themes in WordPress They come in with bundled plugins that help you edit the content We send a lot of front-end visual editors that that sort of take the take the wheezy week we have in the Admin area of the WordPress and bring it to the front end and things like that by usually those plugins are Extremely heavy they extremely slow they sort of unreliable quite often break because they happen very heavily on loads of custom JavaScript that had to be written for them Few extra points. Well WordPress is the thing and it's probably begun up be the main thing for next Next couple of years to come because it holds 65% of all the CMS's market and as well it makes 25% of all the websites on the Internet 25% of all the websites if you know how to develop WordPress you're essentially Targeting 25% of all the websites on the Internet and you have potential of targeting this market now Fun part so Once we take Angular WordPress and the restful APIs and We take into the consideration some of the struggles with FTPs with with creating those, you know custom beautiful-looking themes and amazing functionality through through the plugins and Once once we once we consider what we want to do and whatever frustrations and we realize we have WordPress APIs and we have AngularJS once we mix them together something magical happens so here is a Custom plugin I developed as a demonstration for what's possible when we merge merge those three technologies together and So this is edit page And I have a short code which activates my plugin my plug-in all it does it includes AngularJS script It echoes out specific things on the page whenever they are requested now. We have three things that are echoed out onto the page One of them is So this is standard AngularJS you can type in JavaScript here. It's get executed as well Another thing is HTML code. So this is your template. This is where MVC structure comes in Model view of control and you have you can insert your your templated html So every every variable I have here is Bound through the AngularJS code box right here For example Over here because I have WP res API installed here. I have exposure to specific content So if I if I want to access Yeah, thank you Okay, so Through through the rest API I have access to the database which normally I wouldn't have using Using JavaScript. It doesn't really interact with database and even even there are some custom libraries They are not excellent for that Usually if you would want to display Something of the database you would be writing a plug-in you would be writing this code in PHP You would have an SQL statements going on there. Essentially through the rest API. I have access to the database I can query all the users. I can I can Create read and update and delete Posts users pages Whatever the API exposes now AP this API is not a limit you can create your own API Which exposes unique database features off of the WordPress? now if we take into consideration that through the through the rest API I have access to the database I can make a Ajax request to this JSON page which lists Entire object of the posts and I can I can bind it to the scope and And I can print it out of the page using using essentially my HTML template right here So if I if I view the page This is my URL Which is defined right here post link? post title rendered That's the link and here I'm displaying my post content Which is coming from here So and as well I can add custom CSS and this is all rendered so all of a sudden I gave Angular and JavaScript the same power of that PHP would have and This as well sort of if you think think outside of the box this three three Tabs for for JS code HTML and CSS They sort of allow you to create custom plug-in functionality per page or per post because This bit of code only runs on the sample page because we editing sample page right now But looking forward and looking at the possibilities of what we can achieve we can we might as well do a full-driven MVC structured and code and functionality and The best things are about it is it's it's all it's all data-driven. It's it's all dynamic It works both ways and and it adds so much extra interactivity to the website and Talking about the frustrations I've been facing and things like FTP and stuff like that. Well having this functionality you can essentially Edit the WordPress site just by logging into it and changing the HTML content or using the AngularJS code bit to to edit your functionality that you're written and well that's That's about it here and Any questions? I don't think there's a limitation here. You should be able to use react absolutely You can write your own library in JavaScript It's it's all idea about client-side scripting here and and by the of connecting client-side scripting to to that backend Right, so so like I mentioned there the main limitation for a client-side scripting is you don't really have database access And you can you can't really work with this data so efficiently But but because of the exposure of the functionality through a REST API you can do that So up you can absolutely is react or another JavaScript later Yeah, and more questions Could you just wait for a mic before you start your question in your example there Were you using a plug-in to create those extra fields or did you just code those extra fields as Yeah, I actually have Coded plug-in for that. Yeah, I'm gonna be releasing the plug-in. So all of you guys can it should end up either hopefully on the work on website on my Schedule page with the description of my presentation We should put hopefully put the links there so all of you guys can Download the plug-in play with us see how it works. Have fun. Enjoy Thank you. Yeah, I came to this presentation because I need to learn about Angular I'm gonna be working with a team of developers soon to help on a single-page app that I'm gonna be helping with the accessibility of Okay, I just wondered if you had any any experience of of getting angular Applications accessible. I've heard of Marcy Sutton and some works. She's done with NGR I just wondered if you had any experience of any of that side of things Unfortunately, not to be perfectly honest. I'm very new to AngularJS myself I I sort of looked at looked at it about two months ago, and I may be spanned for this playing with So I haven't yet built any projects on it. It never required me of it But I was interested in the technology So I kind of got my hands around it and this is the result of what came out of it. Okay productive four days Thank you so I'm interested in your thoughts of Building themes are effectively single-page page apps. So instead of Having lots of different templates. You basically move the templates to JavaScript and you just your theme effectively just an index PHP yeah, so what are your thoughts on and do you think that's the future of weapons theming Well, it is interesting concept. Definitely it really it really boils down to what you aim me for I I Seen and and after the QA screen I have here the credits and links and as well the presentation is gonna be accessible after After the demo so you guys can can have a look and as well I coded some of the examples into this presentation as I was showing some of some of the credits and Yeah, the mud Saunders. He created sort of what he did is he took a AngularJS one, you know, everything in one file sort of index and he he is angular because angular offers you to to do the routing and He sort of put the angular on top of WordPress Now about two examples doing that and there are some benefits of doing that and It really depends and boils down to you know what you aiming for What you're looking for it's I wouldn't say and Why so my example is different it's sort of I like to think of it that it AngularJS sits sort of within or next to WordPress and because of you know, the restful API exposure They they talk to each other and I go talks really well with templating and I still have all the benefits of WordPress WordPress routing, you know, if in case if you would put Like like that centers did with his angular WP project if you would put angular with index file and And do the routing through it and things like that. You sort of only Request necessary database information of of the WordPress but you lose all its all its benefits Like for example, if you would install WooCommerce plug-in or any other plug-in the plug-in for for example deals with Redirections or things like that It would probably not work because it's your angular that that directs that now obviously you can edit your angular But that involves, you know a lot of coding around for the functionality you're trying to implement So it's sort of it's it can it can cap you in terms of how you want to grow your WordPress website I hope that sort of answers your question again. I'm fairly new to angular. So No difficult questions on angular Anymore questions Sure, general money in the back How will Google interpret these pages? Sorry. How will Google interpret these pages? How Google would interpret? Well, those are as this is essentially a wordpress fully, you know full wordpress website. It's a You know instead of echoing content through my plug-in, you know echo function, you know like Whenever I would try to use Either a template echoing or stuff like that it it essentially renders a content using all the native wordpress stuff So as far as Google is concerned, this is this is full full wordpress With with JavaScript libraries on top of it, which is like, you know wordpress comes with jQuery Angular next to it. It's it's you know, they like each other It's a and as well of ideas you could possibly use and jQuery for it as well. It's just I Think angular has some benefits in terms of how interactive and the two-way data binding and and those examples as I was showing where you can only add those Those HTML Attributes direct angular directives where that's that's the right name for it You don't have to write a single line of JavaScript And it it gives you this templating and it gives you This this echo, you know, already Variable binding essentially, but you can you can you can write us You can write totally the same code using jQuery or pure JavaScript or what are you like? Like I said anything that's JavaScript, you can write for it But if you have angular and it does all that cool things why not use that? Yeah, I hope that answers your question And more Unfortunately, we've kind of run out of time for questions But as Damien said at the beginning he'd love you to come down to the front and talk to him Yeah, I can talk all day all night about that. So I would encourage you to do that. I'm yours So thanks very much to Damien obviously