HTML Email with Vue.js

uh well welcome everybody it's september 2020. um today we're going to have a talk by uh tracy hilinka from bloomberg um also one of our uh meetup hosts um so yeah uh this is gonna be fun uh next slide uh so uh meet us uh so i'm christian greery i'm at politico as a lead front end engineer ben uh yep so ben hong i'm on cypress io as a dx engineer and on the vgs core team tracy hey i'm tricia linka and i'm at bloomberg industry group i'm a web application architect and i am jack jack kappa i'm also at politico with chris as a lead front end engineer cool this is us um so uh big update this this month um we have reached 1 000 members yeah actually 1003 1003 numbers it's just complete insanity um it has been um yeah three years running almost and um to reach a thousand is really awesome three years has it been december yeah almost uh yeah so we've been waiting for this we've been seeing the number crawl up uh and um it's just really awesome so thank you all for continuing to attend and continue to be a part of this group it means a lot to us uh so obviously uh we are vdc and um be sure to check us out at vdc.io um someone's going to paste these links into the chat um uh uh we have discord which is a great place to go um the all of the places where you normally go for view information and view questions is usually littered with thousands of people but ours is pretty small so you're going to get answers pretty quick um we always obviously have the meetup page which you probably have already seen and definitely check us out on twitter and almost all of our meetups are thoroughly recorded and many times managed in terms of the setting up the recording by tracy um on youtube so yeah big keynote is happening on friday um evan you will be uh be given the keynote for the amsterdam vue.js conference um which is a paid conference but um it sounds like a lot of the content might actually be free at the least i know this keynote will be evans will be free yeah so uh jump on youtube on this link and um there's a little button that you can hit to remind you uh so you'll get a notification about it um we're guessing that something big will be happening here um but uh you know probably the v3 release but who knows we'll see it's worth bookmarking that much yeah if at least this cursor is just having it up on the side exactly so looking forward to that uh so our next meet up uh sure enough is going to be an intro to ujs workshop we're meeting to do these a little bit more often so definitely join us that for that in october and then obviously november is to be announced roy is looking for people to to talk so please please please please uh fill out this form uh reach out to us at vjsdc gmail.com uh any and all of the above roy's looking for people to speak if you're doing anything it doesn't matter how small it is concerning view we want to hear from you and have you um present yourself and show your work and um and talk about it and be passionate about it so we're looking forward to that all right um um so this is actually a new thing we meant to start this up a little while ago but uh vdc now has jetbrains as one of our sponsors and so they've basically graciously donated two licenses for us basically every month so going forward at least for the foreseeable future we will have two jetbrain licenses to license off so basically um for this month uh the easiest way i think to enter the raffle go ahead and in the when you're typing the message you can do like all panelists and everyone just send it to the panelists give us your email um and so i can that way i can we'll announce it at the end of the meetup we'll do like a randomizer uh so that we can announce it but that way um people don't have to like post us up publicly publicly so if you're interested in the jeff brain's license free license uh please send us your email all right awesome so it's trivia time i think jack is hosting today brad congratulations for not flaming out all right that's good thank you everyone i'm gonna pass it back briefly to ben probably before we pass it to tracy i think that's right uh let's see do we um actually no i think we this after the trivia this is basically we're ready to go actually so tracy let's go straight to you um and so watch is getting set up um for those i've gotten basically a few uh a few of you have sent in your emails in so thank you very much for the raffles you want to know that we have received it so if you do want to enter the raffle we'll be doing that um at the end of the meetup and again i know some people may need to leave don't worry if you are selected we're on it we will still send it to you so you don't have to say the whole time for it um so appreciate everyone for sending in their email and if you want to add your email in or know someone who can use it feel free to edit as well all right i hope i'm doing this correctly looks good to me i see your screen well i'm trying to do this and oh good can you all see it yes oh excellent okay all right so i'm gonna so i just want to say you know give tracy olenka and i'm gonna talk about html email and i just want to say it said before you know like about a couple months ago before a couple months ago when i was asked to do html email i jumped for joy i ran away as fast as i could and i'm not kidding but then djs to the rescue so i'm really excited today to talk to you about html email with bjs and that just comes out of i'm not an htm email expert i can barely say it um it's but um i'm just a front-end developer who's been asked to do it a bunch of times and so before i actually start my talk i just want to get a sense of how many of you actually had to do html so the panelists and then participants you can just raise your hand your zoom raise your hand i just want to get a sense of how many okay so i i can't see the participants so is anybody raising their hands yeah we got we got like four people okay so keep your hands up if you really enjoyed the experience oh there you go wait wait hold on i've got a sean sean said sean's hand still up he had a good experience wow okay well that that's great because that's certainly not my experience so jack or ben can you talk really quick about your experience like what you hate it what you like you know yeah um i will sean since you were the only one who liked it if you um ping us if you're open to like hopping on the audio to share a little bit of that because i would love to hear from someone who yeah um so just leave with that thumbs up the thumbnail we'll give you the audio in a bit but as far as my end um yeah all i remember from working with html email is just like if we thought cross browser compatibility was bad that is the number one thing i remember was like once it looked good in one it like looked completely different in another finagling with table like attributes when like we all know that like we always want to keep up with the latest and greatest and then let alone being stuck with tables and having to learn those attributes and no one uses those anymore oh so painful um so yeah definitely the cross platform issue was my biggest gripe what about you jack yeah i think for us it was um i i had to work on it somewhat recently maybe a few months ago um and so it was after uh in our case you know i've been working with vue for two years and um angular for a bit before that and uh our email generator was just handlebars templates coupled to some java models um and so there were two there were two yeah there were two kind of questions you know it's fine you get used to it but um the two yeah two frustrating aspects were one what ben mentioned which is like you know it's writing html that no one in a way that no one writes html um ever at this point and then the other part was it was you know a syntax that felt funky and uh very different from what we normally write and so everything just seemed to take about three or four times longer than it would um with our web applications so yeah i was uh i was not raising my hand um uh sean just messaged back and so apparently just for the audience to know he was actually distracted at the moment so couldn't take his hand down in time so just you know you know i thought maybe there's an explanation like you know love the puzzle solving aspect of it because it is like there's like a lot to unravel with it but um fair enough sean you're like the rest of us good to know okay oops let me knock out the screen okay so basically kind of as ben was talking about there are many desktop and web-based email clients that don't support like today's basic standards or even the standards when they were created and so i actually like to say you code like it's 1999. and that means tables are used for layouts standards aren't followed what works in one brow one email client doesn't work in another email client like it was ben was saying it's really a frustrating experience um so like what are you to do right okay so enter these email frameworks that have been around i know for three or four years now and um they actually solve for this email client compatibility problem and there's one framework that's really lightweight it's mjml and it compiles to html email um but it doesn't actually provide a mechanism for dynamic data but vue.js does so okay wait a second vj asks us for a browser right you're not it's we're doing email we're going to send it out through email so like how is this going to work so server side rendering of user render is how you do it um so this actually wasn't my idea so here's a link to a simple poc and i'm going to um send out i'm going to through chat at the end i'll send out the all the links i mentioned here and so i just want to go over this psc um really quickly because give credit where credit's due right and um so basically again there's only three main dependencies here it's mjml view and view server render so it's pretty like it's been a long time since i've only seen three main dependencies in any kind of app or any kind of anything so um so basically you create the view um you you create the view app um this template mj section is the mjml code and then you create the renderer you know voodoo server renderer and then you take the app put it through the renderer and then the renderer is going to create this thing this data server um render equals true thing at this attribute and that's actually for client-side hydration and we don't need that because it's going to be email so we can take that out and then you just pass all this through this mj mjml to html and it's actually going to change everything into the special html email code and then you have your email so that's the quick and dirty uh poc okay so we can take this um we can take this and um you know create architect and create an app like we're used to having with view so we can have our views we can have components we can have assets you know we can just make it look and feel like we're used to using oops um so i recommend that you wrap everything in a method for easy access and this is what we do um in bloom bloomberg industry group and that way we can package it for a dependency and it can actually be used anywhere um so there's some changes that i've made for the poc uh the first thing is that i have this component body that has a slot that i pass this email which will be in view and i'll show you all this stuff so i do that because i want this i want this method that i'm using to um that i'm wrapping everything in to be as slim as possible um the other thing is i only when i create the renderer you really only need this view ssr outlet you don't really need anything else and then everything else is kind of what i showed you except i cleaned up some of the language the variables um so this is the body component and i i like to think of this as like the index.html of of the email right because this is how everything starts so this is their your head your body the code all the code you need to make this email work and so you can see here there's a couple things i want to point out one is these mj attributes this is actually so mjml has all these what they're called components or tags however you want to refer to it um and you can set the default like styles there there's some default styles that come come here come with it so you can override it with your custom ones you want so here i have padding zero they have some padding that they set um and you can also you can do it mjall and and set override all of them so you can have a font or a padding or whatever you want to do it's kind of like the css reset for for email the other thing i want to point out is this mj style inline equals inline so any any styles that come in here they're actually mj mjml to html is actually going to inject them as a style attribute onto whatever element that um the class is attached to so for example you say you have a class headline font style just like you normally would do css but then uh mjmjml to html it's a tongue twister will inject it as a style attribute this is really really important because a lot of email clients and i'm talking about you microsoft office will not understand the internal styles or styles in the head section they won't understand that so or it won't understand that so you need to put it into um you need you want to inject it as an inline style and the last thing is that by default um njml will have your content width be 600 pixels so this may seem small but if you think about it if you're on a desktop well if you're on mobile that's fine and if you're on a desktop you generally have like a list of folders and then you have the list of emails and then you actually have the viewer and so you maybe only have 7 750 with anyway so this is why it's customary to do it 600 some will do 650 i don't see much going um wider than that so if you want to override this 600 default width then you can do that just adding with to the mj body so i just want to go over the basic syntax before i get into the actual code so the basic mjl syntaxes um so i said and ben talked about that everything's tables and so you think of this as a table mjm section is a row mj column is you know just a regular column and then the mj text is the plain html inside this column and this is pretty much the only place that plain html will actually work i don't we have a great question sure i can't see anything because i have it on full screen no no that's fine um so just i think some some might have joined late um they want could you explain mjml to everyone just once more yeah it's just a um it's just a frame email framework yeah so think of them like custom components that basically help right so we have we have we have um web frameworks like foundation or bootstrap yeah i'm sorry i should explain that better uh we have you know like like i said bootstrap's a framework that people may have used and so this is just a framework that you don't have to write all this custom code and it will compile it for you does that explain it or is that a yes or no okay we gotta thanks in the chat great i'm sorry i can't see anything no don't worry i'll i'll interrupt you if i okay thank you um okay so uh anyway so here's an example on the right of of uh you know the syntax you know you have the section which is the row the column which is the column and then you have mj text this padding is a style you put on there i know this looks really weird to have it like this but mj the mj text component or tag however you want to refer to it actually um it's that's how you pass it into it so because you're not passing into html you're passing it into this component that's going to do a bunch of stuff with it so it looks really weird but that's how you do it and then inside that mj text is the only place that you can have regular html and of course you see i have the mustache code you have regular view vhtml so this is where you um you would put your regular html the stuff that's actually going to show up in the email you put your your regular html anywhere else and it's not showing up so you know so if you want to um you can do multiple columns uh so if you want to have like two columns and a desktop and one and then have them stack on top of each other for for um mobile you can do that and it's pretty uh you know easy syntax um so all right this i wanted to show you because this is crazy this is the whole table thing it's not just tables it's nested tables so this is a simple email that um that i'll show you for the actually show you the code and you can see all i did was put a border on the tables and you can see there's five levels of nesting so this is insane so if you can imagine actually do hand coding this yourself it's crazy so this is why we have frameworks now and the frameworks when they first started weren't that i didn't think they were that great but and that's why i hand coded a lot of stuff but now they're i think they're really good so okay so let's take a look at the code okay actually and uh before we take a look at the code real quick though i want to show you i don't i don't want to show you that oh my gosh sorry i can't this bar's in my way and i can't see ah there we go okay so here's the documentation and this is for mj tax and these are all the defaults i talked about so their documentation is so it's not as good as the view documentation bin but uh it's you know it'll get you through it so this is all the defaults that um you know that for that component will have so if you need to override them then you can just you know pass the attribute the styles to the attribute um this is the one thing that i find really kind of not their default is 13 which i think is too small i think it should be 16. um so anyway so this so you can come here and see the defaults so let's go see the code now okay so starts with render just like i showed you in the slides um so let's go take a look at this the body that um that starts the mjml stuff up it's a little bit more in there now uh so one thing here is this mj preview and this is when you have a list of emails it'll have a subject and then it's going to have um you know some text underneath it that's what this mj preview is for and so this is a nice thing that it does it just you just wrap everything in a tag and it just does all the stuff behind the scenes for you and that's why it's really nice um these attributes are the override so and then here's the in the style so there's two style ways you can use the style tag there's inline styles and there's the regular internal styles or styles in the head this is my way of doing it is to make it external i have it into a string that i'll bring in as a variable and it's i'm gonna go show you that real quick so it's kind of weird just to have something called css.js but this is i i like to keep my styles external to this so that's how i did it um so i just have my styles here like you would normally do because it's a string and it's just gonna write it as a string it's fine to do it this way so the one thing is that um if you have any like markup coming from outside so for my case a news organization we have article summaries and different texts coming in and maybe they have a bold or they're doing a hyperlink or they have italics or they have some kind of markup if you want that to have some kind of style to it this is where you would do it in the inline styles because mjml to html will actually take and inject it in that content too so you can only control your templates but it'll actually inject it into the actual data the actual content so this is where you would do that if you need to make a difference between mobile and desktop then you can do it in the style tag that doesn't have inline and i have a simple example here of when it's mobile because you know mobile first is center and then when it goes to higher than 480 the desktop it goes left align i don't recommend making too many differences designers may have a totally different idea but i don't recommend making too many differences like having font size differences and stuff because you're you're going from what 480 to 600 there really shouldn't be that much of a difference maybe you have a column two columns that go to one but i personally don't think there should be a lot of differences maybe that's just because i'm the developer that has to make it happen even with the system i still don't think you should do it um so that's just my my opinion so let's go back okay so back to the renderer so in the sl oh in the slot um you can see that i have this mj wrapper full width and i taught oh is this lot this is large enough everybody can see it i didn't think to ask that question yeah i think you're good you might bump it like a couple but um it's otherwise fine is that good that's great yeah i meant to do it beforehand and i forgot oh sorry about that uh so this mj wrapper full width full whip is pretty much the only way that you can have any um anything go across like the full viewport and not constrain to the 600 pixels so in this case i use it to make a bar go across the top other than that everything is pretty much constrained to the 600 or 650 or whatever your pixels you've chose chose um so the footer i have a footer here so i just want to show you this footer uh really quickly so and you can see this i kind of even know it's i'm using temporary literals it kind of feels like a regular view app to me at least it does so um so here's an example more filled out example of um what what the footer is and you can see i have the mj wrapper the section the column and this is the pattern you have to use i've passed in some font sizes and line heights through the mj text i have a footer i use that the footer class i use that between the the difference between desktop and mobile so um yeah so once you get used to this syntax it's really it feels pretty um natural at least to me it did um so let's go back to renderer okay so part of this method is you pass the payload in and so i extract the articles i pass in the props articles to this email and i put this email in views because to me this is the big views piece and uh here we can see it um oh i just want to point out one thing real quick because this is something that tripped me up so this wrapper rappers can't be inside wrappers they have to be their own thing so you can see i have mjwrapper then email i'll have a rapper and fitter had a wrapper too and that's something that actually always tripped me up and you just have to accept it so anyway so here we have the wrapper i have a header i have the section column again and i have an article component just like you would in view i'm v4 in it and looping through it and passing in the individual articles to this article component so this here's the article component you can see looks pretty much like a regular regular view component i mean it's not single file but that's okay um because the single file comes all the compilers and stuff anyway so uh article prop i have text again um so here i have body because i want to have a particular class on that so anything that's inside this mj text or basically anything that's a normal html element or tag if you want to do some kind of uh styles to it you need to do it by a class or you can if you really wanted to you could just do stop inline style yourself i just find it easier to manage i mean the bigger the more complex your email gets and the more components there are to it and the more styles there are i find it's just actually really better to control it externally in one place so i can see what they all are especially for consistency if i want to have some kind of consistency i find it better so okay so let's take a look at what this actually looks like and so i have um dummy data and i have a little script that i wrote to to trigger it all so and this is how i actually do the development at work too so i just type in yarn dub and it should trigger everything okay so this is the only live coding i'm doing because i do not like to do it is to run the the commands okay so this is what it looks like so pretty simple the bar that goes across with the wrapper the header the headlines and the article summaries and then the bottom the footer and i'll just show you real quick so here's what it looks like with with uh mobile and then without mobile it does it goes to left the line okay nothing really fancy okay okay so that was a really simple app but we can actually do a lot more things and we can take advantage to everything that view gives us view offers to us i mean we're not single file components but we still get everything with view so we can use computer properties which i use quite a lot um i know that it's we don't really need the reactivity so if you you're doing this for a web app you know data can change and stuff but this is like the data this is being run once and it's gone right so i don't need the reactivity but i found computer properties just a really convenient way to do what i needed to do with data we also have dynamic components and this is like been great because you can have all these different sections um you know you can have an image section you can have an article feed section you can have a featured article you could have all kinds of different sections and have the editors choose the order they want it like in the cms they can just choose here's the order they want it and long as the back-end developers did their job and delivering this in the right order then then we can paint it the way they want it and that gives them the opportunity through day-to-day to reorder their email based on what their particular email needs are what customer feedback says and developers aren't involved and that's that's really great um so there was a couple of issues i ran into so the fir one of the first one was um i don't really know why maybe someone that knows vue better or javascript better than i do but i'm already in a temp right literal and so this is probably part of the reason but i thought i'd be able to do something like um you know do the dollar sign uh thing to to get my um get the data in there and it just like blew up in my face so i basically mixing variables and strings just did not work and i'm not really sure why it through errors so i ended up using a method or a computer property depending on my situation and maybe somebody out there knows why that's happening or if there's a better way to do it so i should say that i just started doing this like six weeks ago so this is just like all new for me too um the really thing that really drove me insane and it's been driving me insane since the beginning of me using vue is the single root issue right so i realize that v3 is coming and that we're not going to have restricted to the single root component but we have to wait at least in this case i have to wait for the ssr the server-side runner to to catch up and i don't know when that's going to happen so anyway here's this here's the problem so you can imagine if you wanted to add an image like you have a head you have a headline and then you have article summary and you want to add an image above that right so the image is attached to that article so what you'd really want to do is what i have here in this slide is have this is what mj mjm wants you to do they say mjl image cannot be inside text it can be inside a column but it can't be inside text and if you think about what they're doing they're going to actually take this um image and they're going to put it inside a table and so this is part of the nesting table that happens and they're going to put it inside a table because mainly because microsoft office is the only way to deal with images of microsoft office um so that's the rationale why they're doing this but then you run into the problem what do you do with view and what i do with vue now because i can't wait for view three to come out so what i ended up doing and there may be other ways to solve it but this worked the best for my particular situation as i ended up doing a functional component with a render function and i use functional components as a single file um as a single file component but i've never i actually don't think i've ever used a render function ever i've never had a need to so this was um kind of this was interesting for me and the thing about functional components are you don't have computer properties don't have methods so in this case i think it's just best to use it as like a container to pass everything through which is how i used it so i just have my props i i can't use computed i can't do anything anyway and then i you know functional true and then i have the render function i'm not sure how you normally write a render function but in this case you have to do it as an array um so and then you just pass in your props and because you don't have the this anymore you you need to do the context.props articles images you know uh so that's how i solved that problem um and so let's see this code so okay actually what i want to do real quick is actually show you what this is going to look like oh this thing keeps getting in my way um okay so this is actually the final code what it actually looks like and um i have a jump link you click on it it'll take you further down into the article and that only works by the way in desktop i don't think it'll work in mobile uh so i have like a feature article component with an image i have articles article feeds and i you can have images above the articles you know i work for a news organization so that's why everything's about the news for me i have an image component and then another article component another article feed component and then at the bottom i have this component where it's just tagged so it goes through all the articles gets all the tags that are attached to them and you know theoretically provides a place where they can go do a search and see with search it shows you all the things that are attached all the articles are tagged like that um okay so let me shut that down let me just check this out okay so the render the renderer is the same the body is the same but now it's more complex and so more things are going on sorry i just got to move everything out of the way so anyway more things are going on so i have all this computer going on you know the article tags i have to go through and grab them i have topics i have to grab and construct so that's the thing that i really appreciated about doing a view and of course at work it's so much more complex what i have to do and i just found that view made it so much easier and my experience with frameworks is you had to piece together a bunch of stuff like you had to you had the the framework like this um mjml framework but then you had the piece back like i've seen where they do something like mjml and python and just all kinds of things that jack talked about using java i just found this really easy to use it's what i'm used to and i just found that view has a lot of features that just make it really easy so so let's take a look at this uh navigation component which is the jump links at the top um and you see everything's in the component just like i'm looks like we're used to okay so this is the example of like i couldn't you mix the the strings and the variables um so one of the things is even though you have um these frameworks like mjml or any other framework for email you still have to know some of the things that happen with oh i hate to say this but i feel like a broken record outlook because it seems like it's always the problem i.e is a problem in the browser world outlook's a problem in the email world and so e outlook for whatever reason at least what i'm targeting which is outlook 2016 it doesn't even understand display just doesn't understand it so normally if i have a list of like you know a list of topics or tags or something i normally would do it as an unordered list and then maybe flatten it out or do whatever i need to do with it and i partly do that partly training for accessibility but i also think it makes sense but since outlook doesn't understand display you can't do that so i have to put everything inside spans and if you wanted to you know if you really wanted to have a um you could put bullets in front of it as an image do whatever you want but display just doesn't work and so you do have to learn those kind of quirks too so okay so let's go back to now and so take a look at tags so tags um it's a similar problem i have to put everything in span but you can see here i have i'm i'm doing a loop i have just normally like the you would view code i have the key there i have dynamic data coming in with the tag ids um it's just really very similar i mean it's just like you're doing view okay so now i have these dynamic components so we're back to the email view um or yeah email in the views directory so now i'm doing the dynamic components and so based on the name that comes through i'm picking the component um so i have i have a featured section which is like a featured article i have an image image section just an image and then i have a feed section so the featured section was that article at the top with the dog in there because the images cannot be inside mj text and i'm not iterating through here i don't worry about splitting data up because this is all one component i have everything in section i have a column i have the text i have the section headline and then i close the text and then i have the image and then i open the text again so there's sometimes there's things like that you need to do um but it to me it's totally worth it or if you would just um well anyway you would yeah uh anyway so uh and then we have an article um not an article image sorry uh image section uh so image section is just an image the one thing i want to point out here is office microsoft office it does not doesn't respect doesn't accept i don't know what their deal is but it doesn't take css width so for images it's actually the best practice to actually put the width on the image um you know hopefully you'll know what that width would be and you'll put it you'll be able to put it on there in my case at work i actually have them deliver the images with the width because it's the only way it's going to work so this looks kind of weird because it's but it's not an h it's not the image tag right it's the mj mj component so that's why you have width 600 pixels so i just think that looks a little weird but i got used to it um and everything else is like again that you can use your dynamic data but you can see you could pass a lot of attributes a lot of css um through the attributes like this and then the kind of the big piece of this is the feed so again i have everything section columns like it's like it's very repetitive um but now i have the article container that i created that's my functional component and so now i'm just going to iterate through that now there may have been other ways to solve this problem like maybe you could have put every article in a section if you put it in a column they're going to stack so you can't do that so the other option would be i mean they're not they'll go side by side um the other option would be maybe to do everything in this section but for my situation it just didn't work so there could be other ways to solve it it's just the way that i chose to solve this problem so go to article container it's pretty much what i showed you in the slides there's nothing really different from there i have an article image and which is just an image and then i have article so and the article is really similar to what i had before except now i have actually a permalink attached to it so that's pretty much um that so let's run this and see what what comes out okay so now what i want to show you is the total insanity that is html email so i don't know how well you all can see this but this file is going to be long and crazy so you can see over here on the right oh my god it just goes on forever like you can see it's totally insane now this isn't minified or anything like that but this still gives you an idea that how long this is this isn't crazy so now that i've given you all a headache from spinning um this is what it looks like it's going to be tons of nested tables there's you're going to see a lot of if you know if explanation point mso microsoft office and i don't know if any of you remember the days when you used to do that for ie like 7 or 6 or whatever you were looking for whatever you were trying to deal with um so you'll see a lot of that um you'll see awesome yeah they're called uh conditional comments that's that's hilarious thank you yeah so you still have see code like it's 1999 right so anyway so you have a lot of stuff like this that you know mso tables you know just a lot of honestly it's a lot of special code for microsoft office so i hate to keep picking on them but it is um so it just goes on forever and ever tons of nesting um if you ever if we can ever find the content that i have oh my god well if you ever could find the content you'll see that like the styles like the headlines of h2s have been in uh have inline styles um this is really horrible to go through uh so anyway it just it goes on forever and ever oh here we go so you could see there's some inline styling done here so that's kind of um anyway that's why i find it better to just try to keep everything all my css in one place and just have everything in line and not have to even do it in the components the view components themselves um so yeah so i think um yeah that's it for that um and so this is just a that this is just this email the email that i showed you but i could show you this so if i hit refresh it's to be the the new long one see it really did work just to prove it really worked so anyway so okay so i asked just stop is there any questions or should i yeah no no questions in the chat uh yet uh but uh hopefully people will uh feel free to post q a um any questions anything i go over that wasn't clear because they can just deal with that now if you are yeah no i i i think it's really clear actually yeah okay good looking forward to this demo yeah yeah so i try to keep it simple but you know give you all the i you just haven't i'm so excited about this like it's just anyone who's that html email understands how excited i am about this i believe all right so okay so like i said i'm very excited i love it it's great there's one thing that kind of brought little tears to my eyes there's no view tools right so i'm sure all of you that do development and view use view tools all the time i know i do i can't live without it but apparently i've learned too over the last six weeks and it's actually not too bad there are ways to troubleshoot um it's just like view tools this is a nice a really nice package right um but so and of course this is html email it's like we process the email once it's not like um it's not like there's a lot of complexity to compared to a web app so probably we choose view tools as overkill but it's something that definitely a little bit different for me so there's ways to troubleshoot so view will give you warning at the command line when you run it like when you're doing development and you run it um like i did with that um yarn dev um thing that i created um it'll give you uh warnings so you know what's going on so it's just you know you definitely know what's going on but if you have a problem with like not being able like i can't read a url of undefined so that means something's not getting passed through then you can go ahead and use this mj section mj column and day checks and i ended up just keeping it copied some i just ended up doing a copy and paste job because it just got too tiresome to keep writing this out begin because you can't that's the only place you're going to get this to work if you put it just image this image mustache in in section it's not going to show up so anyway you can do that it'll show that it's like the old days of a php var dump i mean it'll show the entire object or array or whatever it is you've got and so that's a way to help troubleshoot what's going on mgml has a validator so the default is soft and you can set it to strict and if the default is soft and it doesn't it'll render despite air so you obviously want that for production but if you set it to strict then the errors are going to show up whatever your output target is and so that's a good way to specifically get the mjml error so like if when i was first doing it i would just use the components incorrectly or something and it would give me the errors which is how i learned the the wrapper can't be inside each other and stuff like that so that's really helpful um to help debug errors so performance uh uh obviously performance is important anything we do but like at least in my opinion when you're doing a when you're doing a web app and it's in a browser there's all kinds of tricks to hide you know problems right you load the stuff at the top of the page first and the stuff at the bottom could take longer to load because they can't see it um you know provided the bottom of the page is you know outside your the viewport which usually is um you know also you don't have everybody hitting your server at the same time plus the server only matters when they're server-side rendering because once they have the view app the browsers are doing a lot of the work right it's um you know it's it's a lot of its client-side that's happening it's not server-side so performance is important but i think it's just a different thing i have to pay attention to when you join this email because you can imagine if you have thousands and thousands of emails being generated and i don't know about politico but i know where i'm at when those editors send out an email and people haven't got it within like a couple of minutes oh yeah i'm hearing it we're hearing about it right yeah it's pretty important we have a lot of you know statistics behind the scenes to make sure we're we're making sure that that that always goes out quick oh yeah because the editors i mean i've been chased down by him and i'm not kidding so yeah so it's it's it's pretty important so um so uh there's different ways to manage to deal with the performance and stuff but as while i was developing um i changed a method because to something i thought would be better and a colleague of mine said okay let me see if it's actually better so what she did is let me oh actually i'll show you what she did so she just created this little file um you know this javascript file that just has some dummy data and actually is my my colleague emma give credit to where credit is due and so she's like okay let me prove if your new method is really that great so um anyway she created this method she created a bunch of dummy data she did the first method that was done the second method that i ended up doing which was this uh filter map filter flat map and then a couple other things and so the reason i'm showing you this because i was shocked now i'm not i don't consider myself a javascript developer so maybe people that do a lot of javascript would know this is what i'm going to show you may know this is the case but this was definitely something um really interesting for me can she type can she spell correctly that's the question okay so it's looping through with all this data that dummy data that she created and you can see can you all see this yeah so the crazy thing for me is that the difference between the filter and flat map is crazy yeah so that's a huge difference if you have a thousands and thousands of emails coming at you so that so i started using this technique to just test everything because i really don't like the editors coming after me um and so and i also ran the renderer through it um so i'll actually just do this and so i just have data the dummy data going through it and so that's what it came up 86 milliseconds so that i'll show you something that i discovered and i haven't really had a chance to figure out why it's like this but so if i actually run this i'll just copy and paste it okay so let me save that and let me run it again and this is interesting and maybe somebody actually knows what knows view better um why this is happening but if you look at the times so the first time it hits it like the view instance is being started or something and then after that it's pretty fast so interesting and i've actually verified that it's actually generating it's not like it's not like faking it out it's actually generating i did things where i threw different types of data in to make sure there wasn't some kind of weird cache that i didn't understand and it still did it so that's kind of a mystery to me and it's something i definitely want to find out more why it's happening but so um so so i think uh kind of towards the end here um okay yep so here is the links and i'll send them out um and i guess we should do i guess q a if anybody has any questions yeah um oh can i just say one thing sorry um two things i want to show you um is um there's something called can i um can i email yeah so let me see if they'll let me out of this okay i meant to show it to you and i forgot um so oh my god zoom why do you keep putting this where i don't want it it's funny we can't see it and so i know it even presents a zoom this bar gets like coming your way and it's always where i don't want it it's just very very frustrating um so anyway you have can i can i use right for a browser so this is can i email it's definitely not as robust but it's actually a place to start and see what's going on the other thing is and the links all sent out is something called email and acid and we use it at bloomberg um i know that you're using out of politico i believe chris yeah and that's a way what that is is actually so email and asset has 85 different email clients and so what i do is um and we're going to automate this process eventually but this is how i'm doing it now is i actually take this file here i copy it and i paste it into email on asset and it runs through i don't do all 85 email clients because i'm not worried about 85 email clients yeah but it will go through and it'll create a snapshot you know an image of what it looks like and it's the full length of the email and what it looks like and you can do it client too is what's important yeah it'll do it in the client and it also do without images because images are not always turned on by default so you get inside so you get a view of just the the viewport the viewport so to speak in the email client and without an image so that's been really helpful to troubleshoot different things because these frameworks are great but it is still that doesn't teach you that you know um that um outlook respect width which you know i've learned through pain that one um because i've done this so i've done html email in the past but i like to say i've like buried it deep within my soul because i don't want to think about it so i you know slowly started remembering some of the things um but you know display there's just all these kind of quirks with especially outlook um i don't know if this is still the case but when i was really doing tons of html email before outlook was actually using microsoft office as its renderer for html email it's which is crazy i don't know if that's still the case but it was back then which kind of explains some of the insanity i think um but anyway so it'll give you all these different views and it'll allow you to see where the bugs are you know what kind of you know you know what you need to fix and stuff and so even though you have these frameworks i've discovered this the simpler the emails are just the easier it is um on the developer but it's also more likely it's going to work at all these different email clients because even though i'm not checking 85 email clients i'm checking like our top 10. you know you still don't want to look horrible on the other ones yeah you definitely have to know like which clients you need to target and which ones aren't important because it's very easy to get like really in the weeds with like the really really old stuff right so how how um i guess i'll just start off q a until until we start getting questions but um because i have a few of my own questions um i like how um uh how are you going about knowing uh which email clients to test um so i uh we have a group that does analytics and uh i asked them to tell me so they didn't have um they didn't so yeah i just asked them to tell me i don't want to say too much because i don't know what i'm going to get like you know in trouble for so but they just they gave me a list and said here's our top clients and i can tell you this because this ain't a shocker like 75 was outlook 2016 which is not surprising so um you know the interesting thing about these emails though i want to say is that so i have i have out i have a mac right i have outlook 2016 on the mac and then i have my product owner he's got outlook 2016 on a pc and it's amazing the differences yeah i'm like it's the same email client but on a mac we're really not yeah no clearly not but so yeah i asked them and they said outlook 2016 pc and i of course cried and you know um so um it like this whole thing is really interesting because uh you know you assume when you hear like html and view like our uh emails each time emails via view like you assume that you have like literally all the power of view and like you can do everything you can do in view and you can do it now in emails like that's really not the case like you you're still limited by the end products and so um can you talk a little bit about um maybe uh you know um some someone gives you a project and you you have to produce an email that's been designed like how have you have you gotten around some of those design problems where they're like we want to have an animated gif you know and i tell them [Laughter] and we want all the email clients to show an embedded video you know i tell them no i really do i say no okay so i just i push back and um i'm just lucky i'm in a position where i push back and and you know as long as i have a good explanation on why to push back then they're fine i also was lucky in this round to have a designer that actually knew something about html email that's the other thing is your designer has to have some knowledge too right they have to know you know um i'm not gonna even know there's a carousel component which i don't understand why there's a carousel component for mjml but there is we aren't using it they have to know that that's crazy right so you know at least for our client base is crazy right there may be some that you get are just all in mobile and it works fine but so i think you also have to have a designer that actually has some understanding of html email and what the limitations yeah we're we're in kind of the same boat where uh i at least up until more recently you know the majority of our majority of the people that were writing html emails or composing them we're actually designers who do markup and css every day um and so this is obviously very difficult for them because they were they're they're still composing them manually um and so you've brought you you've shown like an interesting process to do this a little bit more dynamically yeah and the thing is this isn't like i feel like just like view view okay yeah you it's more javascript more javascripty you know like you have the temporal littles you have to deal with all that and yeah not a single component but it's not so difficult that you can say someone that just knows html css here you can maybe do it this way you know i mean i think what's really nice about this is that mgml has gone through the process of understanding like here are the quirks like we we know all the stupid little what we you know used to think of as ie5 and ie6 quirks and we know all the dumb little conditional comments they do let us handle this problem with just components so yeah i think that's what's really interesting about it right and to me it's that that by itself isn't enough because they have no way they say we only solve the email compatibility problem you have to figure out how to deal with the data yourself that's your you know and so people have strung different things together and i just didn't like it and then we were just like why can't we use vue and we're just like we googled and we're like wait a second there's two pocs here i just showed you the one that we like the best because it's the simplest one there's one that has more dependencies and stuff i mean if you google it you're not going to find that many uh i found more with react but um yeah so i just to me i thought that server-side rendering thing was i think that is brilliant that is a brilliant use of ssr so so we do have um we have one question from bart um and uh he's asking uh from between the moment where you fix a typo or you know let's say a design issue um you know how long does it take to get to that point where you're actually testing it again like how how long how many steps do you have to go through to get to that point um i mean i just i okay i don't know if i understand the question correctly this is from like editorial perspective or just like in my code yeah like let's say you you're you know previewing an email to editorial and yeah there's a typo there's like an em dash that's missing or something it's always the m dashes right okay so this is the renderer part we have all other part there and honestly it could take me a couple minutes i go into the component i make the change i um i commit it and i push it and it's like we so there's this whole pipeline in the back that you know uh we push directly to production because we have tests and stuff that we work so i mean i actually so we have a back-end team that deals with the data and um and they're actually doing the cms and that's where the editors are actually composing everything and we were testing things out and there was an uh issue i had made a mistake i don't remember what the stake was some mistake and we were like i had like 10 different people actually more than that a lot of people you know on a video conference and i was sitting there like oh crap and then doo doo doo doo and i pushed it and then that back end team they were just like oh my god are you kidding me like you're doing under two minutes you had your fix in production that like they're like that's insane we we want that you know so yeah so yeah i could do really quickly but it's a really simple system i have a great uh pipeline or see uh what do you call it the ci pipeline in the background so it's you know yeah i don't know if i answered his question correctly or i mean like what he wanted a couple minutes yeah so you're what you're saying is it's not it's not entirely manual for you at the moment it is a little bit manual um you would talked about wanting to automate more like what what does that look like i want to what i really want to automate is the process of right now i i generate this html email that you're looking at crazy email and then i copy and paste that and send it into email and asset they have an api i want to hook into that api exactly yeah right but i'm only one part of the process like yeah um so i have to people own the other process so i need to work with them but my idea is that the editors you know we can do test emails where they go from the editor all the way through the whole system and instead of going on to somebody's email it's going to go into email and asset or something like that i haven't really worked it all out yet but i just want because i'm testing what i am doing but there's another layer that actually delivers it and they actually have to do some transformation based on some custom stuff um you know we have things like when you get an email you can click on it and see stuff and not have to sign in there's a bunch there's code that goes behind that so they deal with that so i don't really have that i'm not testing the actual final email you know so that's something i would really like to do yeah that makes sense right but so far it's been fine and we haven't had any problems again because it's keeping it simple that's part of the reason to keep it simple but that's something i'd really like to do automate that part but honestly i feel like the rest is um in pretty decent shape considering i mean honestly we had this we had to spin up in less than two weeks like a week and we had to spend a proof of concept showing everybody that is absolutely amazing at least to me it was amazing so it's awesome yeah then do you have any questions uh yes we have an important question in the chat yeah some live coding uh what theme are you currently using uh i think this is sarah gerazner's uh oh it's sarah drazner's is that it i think it's night out yeah i'm sure i'm using night owl yeah because it's got the italic attributes what is that uh who's gonna guess cobalt too yeah it's it's night out i know i know it's night out it's night owl okay well there you go because i was wondering she's using night owl yeah i don't live code because it's like uh i've just you know i saw you doing tons of live coding i saw you copying and pasting lines well i remember once kristy you did something and there was a little uh thing that went wrong and my heart like dropped like to the floor i had notes i had a lot of nerves but you recovered but you know that that scarred me for life oh it was terrifying yeah so i guess if we don't have uh any more questions we might jump off into trivia great job tracy this looked really good i uh importantly showing this to people tomorrow at work yep that yeah so let me i'll send out the um i'll send out the uh links to everything and i have a fully developed um you know repo that um yeah that works so yeah but i would be curious if anybody knows because i'm sure there's some smart people why this happened when i ran my regular test the first run yeah i really would love if anybody has any insight yeah somebody mentioned it might be you know like a node like a node thing in general um yeah oh that makes more sense to me it's worth looking into oh yeah that actually makes more sense so i yeah okay that actually makes sense yeah so anyway yeah super cool uh so i think we're gonna switch to ben's screen yep let me get this set up all right um actually before we do the trivia we should probably do the giveaway yeah yeah so just actually i'll give yeah i'll just let's do this so if anyone else wants to get a raffle for the um jetbrains license we actually have i discovered we have a couple more that we didn't use the last meetup so if you want to get in the chances are better than average usually we'll only have two per meet up but we will have more this time we usually mention this but the the trivia is we're we're keeping track of people who win trivia so when we're all um post coveted and meeting back up together in real time you'll probably get a prize of some sort yes and if you're wondering if you're wondering why the jetbrain licenses aren't trivial prizes it's because not everyone wants to use them so we want people to feel like they can actually opt into this yeah yes i think um looks like we can do four licenses actually nice wow which is pretty good perfect for our meetup after we got a thousand members yeah that is true then where did we get these from just out of curiosity uh this is so that's why if there are any other meetup organizers here um big shout out to margo who is the organizer at um uh gosh uh in canada gosh why am i blanking the name anyways toronto no it's the other one clear thank you okay anyway she organizes i think kw javascript and so she's the one who told me about this and basically they um help sponsor meetups and give away so awesome montreal was it montreal okay you know now you're gonna make me look it up you have to look it up oh kitchener kitchen ontario kw javascript so you know what i'm gonna do guys thank you i actually use webstorm um at work for our for the bigger apps and i it just helps a lot because the code is so much more complex it just makes it so much easier to work with and to track the code down and stuff oh shoot hold up billy sorry about that hang on [Laughter] who's andrew sorry i clicked too quickly okay well all right andrew you're on the piano for a little while hello and welcome i don't know how to push you back down i don't want to accidentally we're just going to randomly every so often throw somebody on the panel nope that's that's what you're getting okay let me make sure i have all the emails so i got that i'm missing one okay here we go this is what i'm missing okay so let me do a list randomizer let's see i really wish someone had a prettier one but it's fine oh i know i've looked at them and they're not that pretty yeah i feel like we just need to deploy something on lafayette and then just like let people just enter a list and it looks nice designed well it's better yeah okay here we go all right so oh this is kind of nice i think we can make a prettier one i've i've turned off my ad blocker great oh all right so bb1 so that is brad actually so brad congratulations you are the let me mark this oh nice and then oh i shouldn't i should okay well we can't we can't say he flames out anymore if he's winning everything all right sean sean wants nice john congrats and then so now let me just actually make this a little easier since they are no longer here yeah this is gonna be a thing we totally need a better design one i'm thinking like you know price is right like you pull it down or something yeah yeah all right cc so chad chad is the third winner and let's do one more we got bart bart is our fourth winner so congratulations to our winners um so one of the licenses actually does expire sooner rather than later so if one of you can let us are if some of you are going to use it basically like soon let me know so i'll email you all the one that's expiring it's september 20th and then i can give the other ones to the other people super cool congrats everybody yeah okay so um all right that said number one is who's it gonna be chad congratulations all right congratulations chad beatrix and bill for number four and five all right got a screenshot of that really cool well done well done well done everyone all right well i think with that um yeah so just as a reminder if anyone here is interested in speaking please reach out to us we're happy to help assist with um yes i yes uh double dash i said not enough view we should we probably should have added a couple of view trivia but we shall have more next month promised um but yeah so if anyone is interested in giving a talk at udc please let us know we'd be happy to support you however we can um anything else tracy chris before we wrap up special thanks to tracy for putting this together yeah thanks a lot for tracy whoa well done well done all right so the next next meetup is october uh 20th oh gosh let me just double check that real quick yeah uh yes october 21st yep and so the intro to view workshop so actually if you want to spread word around um odds are we will as far as like so people know it probably will cover um basically view three basics as well so um we will be approaching it from like starting with view three so in case uh picks anyone's interest cool well thanks everybody for joining and we will see you all next month thanks everybody yeah thanks everyone bye

Channel: Vue DC

Views: 735

Keywords: Vue, Vue.js, MJML, HTML Email

Id: ZpanV5DQlbs

Length: 70min 59sec (4259 seconds)

Published: Sat Sep 19 2020