Presentación
HTML (pincha para descargar)
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
I'd say wait for people to find this place but looks like everyone's already found it and then some so I'm just going to kick off here my name is Micah godbolt that's all my info here so i want to say if you want to follow me on twitter micah
godbolt i will make sure to tweet out not only the slides for this later on but also i've got some demo code them kind of moved around so i need to create a new repo for it but i certainly wanna make sure that's available for you as well so that's
a little carrot to follow me because I'll between that information out so you can get a handle on it a couple of things about me I'm a front-end developer at lolla bot I've been there for about the last year or so and it's awesome I love little
bun I just had to say that and contractually obligated to say that so I said it we're done good all right okay low about cause last jobs yes we are hiring all right drupal I is capital D capital anyway uh so a couple of things about me I'm from Portland
Oregon I'm out in the States this is my second drupalcon obviously my first one was when it was in Portland this last year just quite nice but my first time speaking so um thank you for like 4 crazy stuff in the back and everyone that's when to come
out here and shove in there there's some more room up front so if you want to still come on in we'll try and I don't know well duh well fake it til we make it a couple of things about me I am also the creator of a series of videos called SAS fights
so you can also follow on twitter at SAS bites or youtube.com slash test bites if you're interested in front of development and especially SAS using SAS to really power your front end development that's what's a Speights is all about weekly about
10 20 minute presentation I give on everything from directives loop statements mix-ins functions all that kind of stuff so the curious you can check that out those are all obviously record it and put on YouTube also the founder of pdx ass a assassin meet up
that we meet monthly out in Portland we're coming up on our fourth month so it's kind of nice those are also recorded and post live which is a blast to actually have two or three people I think there's some from Italy that watches every week it's
kind of cool you can just broadcast Italy so we do that every month second Thursday of the month at 6 p.m. pacific time again it's recorded so you can find it and the next one we're going to do is actually that's kind of cool is a you still see
the slides the next one we're going to do is a design have an actual SAS boot camp because we've been doing it for a little while and we want to make sure that all the newcomers get a chance to just kind of get up to speed and we'll have some hands-on
stuff there so if Portland please stop by or you can check us on at pdx ass on twitter get some links to all our videos and those kind of things so let's get on to what this talk is actually about and not me and my little side projects but a clicker works
cool creating responsive drupal prototypes with angularjs it's a nice packed title the title has two parts the first part is this is creating responsive drupal prototypes so what we're talking about that is actually starting not in Drupal but actually
starting in code building as much of the site as possible from prototypes and wireframes all the way into an actual design process before we even get into an actual drupal install to do as much as that is possible when code is cheap and when changes are cheap
because once you get into drupal you know that changes are not cheap whatsoever so that's what the first part is this going to be about is explaining why this is necessary and then secondly with angularjs is going to talk about how we can leverage a system
like angularjs to make that possible so let me give you a quick an idea of what we're going to be talking about during this entire presentation what to expect the first thing is with create responsive drupal prototypes this is an approach what am I talking
about is not specific to angular it's an approach to designing prototypes in the browser for Drupal or really any inning content management system it is about designing in the browser so if you're not designing the browser yet this is going to be your
call to say it's time to start it's time to think about it because the tools are actually they're there to make this happen thirdly it's about getting the front-end developers involved in the process much earlier I've been on my too many
projects where the designer has done its designs signed off and it's passed off to me as a friend developer and then it's my job to go like why did you make those decisions why did you do that and to spend all that time that if I just had a chance
to lean a little bit earlier in the process to maybe make a small few tweaks that life to be a lot easier for me so that's really what this is about is getting the front of developer in earlier because there's code instead of Photoshop files and we
can we can deal with code right and so the second part with angularjs what I do want to say is this is not the only way to accomplish what's on the left angularjs is just one of the opportunities one of the possibilities when I started this project actually
start in Jekyll and then after a little bit of Jekyll actually moved to a ruby gem and then after that ruby gem I moved to angular so this has been through three iterations already and after the twig presentation I saw yesterday I'm like you know this
might eventually move to twig here's there's a lot of the concepts in twig that are really similar to what I've been doing and crating with angular so especially when d8 gets really solid and twig is there and we kind of know what those final templates
going to be like I'm really hoping the baby to start using twig for the same same thing so again and we need help for that so um so just to say angler is not the only approach to this the other thing is this is not an angular app this is usually what scares
my designers it's like I don't know how to write angular and I don't want to learn how to write angular I'm not asking you to be able to write an angular app from scratch what we're doing is actually let me do this so it's not an actual
web app this is is this isn't like a software-as-a-service where you go to page and click on things and you get pages to do stuff that's not what we're trying to do we're also not trying to create a full NVC just for a prototype really what
we're doing is we're using the view layer of angular and using angular as an actual templating system kind of similar to how you'd be using twig in Drupal 8 but of course we're still with Drupal 7 so angular works really well for that so along
with temple' templating and also the directives that are included in angular there's a lot of power that lets us accomplish this so that's what we're going to be talking about its kind of these two halves the first one I'm talking about
why we need to be doing this and then secondly how we can accomplish this with with angularjs and really with any framework any framework that that supports these concepts so um oh and also angular's also the foundation for tractor tractor is this project
i'm currently working on that is built with angular to do this it was actually aboriginal called protractor then i found out some of these are using protractor protractor such a great angular name I was so mad the life goes on so I'm very short in
the tractor and just happened to Emma Jane had a huge picture of a tractor in her place and I was like there's my inspiration it's based off a picture in her living room all right so um this is what a page a built page would look like when using when
using tractor as you can see what you're doing is you're just writing code in the browser just like you would really like design in the browser write HTML in the browser and that gets compiled into a page like that so on the left hand side we have
like a page manifest which describes all of your describes your layout this graves describes your blocks regions what everyone call them and also the partials inside so if you saw Fabian's talk yesterday its exact same concept I was like he's stealing
my stuff I swear so you can discrete you can define your layouts you can define your regions and put content side of that it's also the concept of partials so all of your HTML is broken out into smaller partials that can be reused over and over again and
then placed into into those page manifests you can also put straight HTML in there as well it doesn't have to be necessarily a partial but typically want to break everything out as much as you can so again this is a quick mock-up i did for project little
while ago this is more in like the prototyping phase once this was done and and because the customer is happy with this layout we move in and design using this exact same tool just applying designs and styles and some kind of design pattern to everything so
[ ... ]
Nota: se han omitido las otras 4.638 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.