Modern JavaScript Testing: Integration, Contract Testing & AI Tools - JSJ 692

Panel: Aimee KnightAJ O’NealCharles Max Wood Special Guest: Gil Tayar In this episode, the panel talks with Gil Tayar who is currently residing in Tel Aviv and is a software engineer. He is currently the Senior Architect at Applitools in Israel. The panel and the guest talk about the different types of tests and when/how one is to use a certain test in a particular situation. They also mention Node, React, Selenium, Puppeteer, and much more!Show Topics:0:00 – Advertisement: KENDO UI 0:35 – Chuck: Our panel is AJ, Aimee, myself – and our special guest is Gil Tayar. Tell us why you are famous!1:13 – Gil talks about where he resides and his background. 2:27 – Chuck: What is the landscape like now with testing and testing tools now?2:39 – Guest: There is a huge renaissance with the JavaScript community. Testing has moved forward in the frontend and backend. Today we have lots of testing tools.  We can do frontend testing that wasn’t possible 5 years ago. The major change was React.The guest talks about Node, React, tools, and more!4:17 – Aimee: I advocate for tests and testing. There is a grey area though...how do you treat that? If you have to get something into production, but it’s not THE thing to get into production, does that fall into product or...what?5:02 – Guest: We decided to test everything in the beginning. We actually cam through and did that and since then I don’t think I can use the right code without testing. There are a lot of different situations, though, to consider.The guest gives hypothetical situations that people could face. 6:27 – Aimee.6:32 – Guest: The horror to changing code without tests, I don’t know, I haven’t done that for a while. You write with fear in your heart. Your design is driven by fear, and not what you think is right. In the beginning don’t write those tests, but...7:22 – Aimee: I totally agree and I could go on and on and on.7:42 – Panel: I want to do tests when I know they will create value. I don’t want to do it b/c it’s a mundane thing. Secondly, I find that some times I am in a situation where I cannot write the test b/c I would have to know the business logic is correct. I am in this discovery mode of what is the business logic? I am not just building your app.I guess I just need advice in this area, I guess.8:55 – Guest gives advice to panelist’s question. He mentions how there are two schools of thought.10:20 – Guest: Don’t mock too much.10:54 – Panel: Are unit tests the easiest? I just reach for unit testing b/c it helps me code faster. But 90% of my code is NOT that.11:18 – Guest: Exactly! Most of our test is glue – gluing together a bunch of different stuff! Those are best tested as a medium-sized integration suite.12:39 – Panel: That seems like a lot of work, though! I loathe the database stuff b/c they don’t map cleanly. I hate this database stuff.13:06 – Guest: I agree, but don’t knock the database, but knock the level above the database.13:49 – Guest: Yes, it takes time! Building the script and the testing tools, but when you have it then adding to it is zero time. Once you are in the air it’s smooth sailing.14:17 – Panel: I guess I can see that. I like to do the dumb-way the first time. I am not clear on the transition.14:47 – Guest: Write the code, and then write the tests.The guest gives a hypothetical situation on how/when to test in a certain situation. 16:25 – Panel: Can you talk about that more, please?16:50 – Guest: Don’t have the same unit – do browser and business logic stuff separated. The real business logic stuff needs to be above that level. First principle is separation of concerns.18:04 – Panel talks about dependency interjection and asks a question.  18:27 – Guest: What I am talking about very, very light inter-dependency interjection.19:19 – Panel: You have a main function and you are doing requires in the main function. You are passing the pieces of that into the components that need it.19:44 – Guest: I only do it when it’s necessary; it’s not a religion for me. I do it only for those layers that I know will need to be mocked; like database layers, etc.20:09 – Panel.20:19 – Guest: It’s taken me 80 years to figure out, but I have made plenty of mistakes a long the way. A test should run for 2-5 minutes max for package.20:53 – Panel: What if you have a really messy legacy system? How do you recommend going into that? Do you write tests for things that you think needs to get tested?21:39 – Guest answers the question and mentions Selenium! 24:27 – Panel: I like that approach.24:35 – Chuck: When you say integration test what do you mean?24:44 – Guest: Integration tests aren’t usually talked about. For most people it’s tests that test the database level against the database. For me, the integration tests are taking a set of classes as they are in the application and testing them together w/o the...so they can run in millisecond time.26:54 – Advertisement – Sentry.io 27:52 – Chuck: How much do the tools matter?28:01 – Guest: The revolutions matter. Whether you use Jasmine or Mocha or whatever I don’t think it matters. The tests matter not the tools.28:39 – Aimee: Yes and no. I think some tools are outdated.28:50 – Guest: I got a lot of flack about my blog where I talk about Cypress versus Selenium. I will never use Jasmine. In the end it’s the29:29 – Aimee: I am curious would you be willing to expand on what the Selenium folks were saying about Puppeteer and others may not provide?29:54 – Guest: Cypress was built for frontend developers. They don’t care about cross browser, and they tested in Chrome. Most browsers are typically the same. Selenium was built with the QA mindset – end to end tests that we need to do cross browser.The guest continues with this topic.30:54 – Aimee mentions Cypress. 31:08 – Guest: My guessing is that their priority is not there. I kind of agree with them.31:21 – Aimee: I think they are focusing on mobile more.31:24 – Guest: I think cross browser testing is less of an issue now. There is one area that is important it’s the visual area! It’s important to test visually across these different browsers.32:32 – Guest: Selenium is a Swiss knife – it can do everything.33:32 – Chuck: I am thinking about different topics to talk about. I haven’t used Puppeteer. What’s that about?33:49 – Guest: Puppeteer is much more like Selenium. The reason why it’s great is b/c Puppeteer will always be Google Chrome. 35:42 – Chuck: When should you be running your tests? I like to use some unit tests when I am doing my development but how do you break that down?36:06 – Guest.38:30 – Chuck: You run tests against production?38:45 – Guest: Don’t run tests against production...let me clarify!39:14 – Chuck.39:21 – Guest: When I am talking about integration testing in the backend...40:37 – Chuck asks a question. 40:47 – Guest: I am constantly running between frontend and backend.I didn’t know how to run tests for frontend. I had to invent a new thing and I “invented” the package JS DONG. It’s an implementation of Dong in Node. I found out that I wasn’t the only one and that there were others out there, too.43:14 – Chuck: Nice! You talked in the prep docs that you urged a new frontend developer to not run the app in the browser for 2 months?43:25 – Guest: Yeah, I found out that she was running the application...she said she knew how to write tests. I wanted her to see it my way and it probably was a radical train-of-thought, and that was this...44:40 – Guest: Frontend is so visual.45:12 – Chuck: What are you working on now?45:16 – Guest: I am working with Applitools and I was impressed with what they were doing.The guest goes into further detail.46:08 – Guest: Those screenshots are never the same.48:36 – Panel: It’s...comparing the output to the static site to the...48:50 – Guest: Yes, that static site – if you have 30 pages in your app – most of those are the same. We have this trick where we don’t upload it again and again. Uploading the whole static site is usually very quick. The second thing is we don’t wait for the results. We don’t wait for the whole rendering and we continue with theBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

27 Marras 20181h 2min

Panel: Aimee KnightAJ O’NealJoe EamesCharles Max WoodChris Ferdinandi Special Guest: Julian Fahrer In this episode, the panel talks with Julian Fahrer who is an online educator and software engineer in San Francisco, California (USA). The panel and the guest talk about containers, tooling, Docker, Kubernetes, and more. Check out today’s episode!Show Topics:0:00 – Advertisement: KENDO UI 1:00 – Chuck: We have today Julian. Julian, please tell us why you are famous?1:10 – Julian (Guest): I am a software engineer in San Francisco.1:35 – Chuck: We had you on Elixir Mix before – so here you are! Give us a brief introduction – tell us about the1:56 – Julian: About 11 hours. You can get it done in about 1 week. It’s a lot to learn. It’s a new paradigm, and I think that’s why people like it.2:22 – Aimee: How did you dive into Docker? I feel that is like backend space?2:35 – Julian: I am a full stack engineer and I have been in backend, too.3:10 – Aimee: I know that someone has been in-charge of our Dev Ops process until the first job I’ve had. When there is a problem in the deployment, I want to unblock myself and not wait for someone else. I think it’s a valuable topic. Why Docker over the other options?3:58 – Julian: Let’s talk about what Docker is first?4:12 – Chuck.4:23 – Julian: Containers are a technology for us to run applications in isolation from each other.Julian talks in-detail about what contains are, what they do, he gives examples, and more. Check it out here!5:27 – Chuck: Makes sense to me. I think it’s interesting that you are talking about the dependencies. Because of the way the Docker works it’s consistent across all of your applications.5:59 – Julian. Yes, exactly.Julian talks about containers some more!6:56 – Chuck asks a question about the container, Docker, and others.7:03 – Guest: You don’t have to worry about your company’s running operating system, and what you want to use – basically everything runs in the container...7:30 – Chuck: This short-circuits a lot of it.7:46 – Guest.8:00 – Chuck: People will use Docker if your employer mandates it. Is there a learning curve and how do you adapt it within the person’s company?8:25 – Guest.8:52 – Aimee: We are using it, too.8:57 – Guest: Awesome!9:03 – Aimee: The only downfall is that if you have people who are NOT familiar with it – then it’s a black box for us. We can’t troubleshoot it ourselves. I want to be able to unblock from our end w/o having to go to someone else. That’s my only issue I’ve been having.10:03 – Guest: I want to see that tooling to be honest.10:12 – Aimee: Can you talk about how Civil and Docker work together?10:19 – Guest: Yes!Julian answers the question.10:56 – Chuck: How much work it is to get a Docker file to get up and running? How much work would it take?11:18 – Guest: For the development side in about an hour or two – this is if you understand it already. Putting it into production that’s a different story b/c there is a million different ways to do it. It’s hard to put a time on that.12:24 – Chuck: Let’s assume they have the basic knowledge (they get how server setup takes place) is this something you could figure out in a day or so?12:47 – Guest: If you have touched Docker then you can do it in a day; if never then not really.13:02 – Guest: There might be some stones you will fall over.13:39 – Panel: The part of the learning curve would be...13:52 – Guest: The idea behind the container is that the container should be disposable. You could throw it away and then start a new one and it’s fresh and clean.Guest continues with his answer.15:20 – Chuck: I have seen people do this with their database engine. If you need to upgrade your database then they grab their container...15:55 – Guest: You don’t have to worry about setting it up - its provided in the container and...16:09 – Chuck asks a question. 16:17 – Guest: For production, I would go with a hosted database like RJS, Azure, or other options.Guest continues. 17:13 – Chuck.17:20 – Guest: If it dies then you need to...17:30 – Chuck: We talked about an idea of these containers being something you can hand around in your development team.Chuck asks a question. 17:50 – Guest answers the question. He talks about tooling, containers, web frontend, and more.  18:48 – Guest asks Aimee a question: Are you using Compost?18:50 – Aimee: I don’t know b/c that is a black box for us. I don’t know much about our Docker setup.19:00 – Guest to Aimee: Can I ask you some questions?19:14 – Guest is giving Aimee some hypothetical situations and asks what their process is like.  19:32 – Aimee answers the question. 20:11 – Guest: You have customizing tooling to be able to do x, y, and z.20:25 – Aimee: They have hit a wall, but it’s frustrating. Our frontend and our backend are different. We are getting 500’s and it’s a black box for us. It’s the way that ops have it setup. I hate having to go to them for them to unblock us.21:07 – Chuck: I have been hearing about Kubernetes. When will you start to see that it pays off to use it?21:20 – Guest answers the question. 22:17 – If I have a simple app on a few different machines and front end and job servers I may not need Kubernetes. But if I have a lot of things that it depends on then I will need it?22:35 – Guest: Yes.22:40 – Chuck: What are the steps to using it?22:45 – Guest: Step #1 you install it.The guest goes through the different steps to use Docker. 25:23 – Aimee: It makes sense that your UI and your database don’t live in the same container, but what about your API and your database should that be separate?25:40 – Guest: Yes they should be separate.26:09 – Chuck: What has your experience been with Docker – AJ or Chris?26:17 – Panel: I have used a little bit at work and so far it’s been a black box for me. I like the IDEA of it, but I probably need to take Julian’s course to learn more about it! (Aimee agrees!)One thing I would love (from your perspective, Julian) – if I wanted to get started with this (and say I have not worked with containers before) where would I start?28:22 – Advertisement – Sentry.io 29:20 – Guest: Good question. You don’t have to be an expert (to use Docker), but you have to be comfortable with the command line, though.30:17 – Panel: Is there a dummy practice within your course?30:27 – Julian: We run our own web server and...30:44 – Panel: I need to check out your course!31:04 – Guest: It is some time investment, but it’s saved me so much time already so it makes it really worth it.31:38 – Panel: You are a version behind on Ruby.31:46 – Guest: ...I just want to make code and not worry about that.32:04 – Chuck: Updating your server – you would update Ruby and reinstall your gems and hope that they were all up-to-date. Now you don’t have to do it that way anymore.32:37 – Guest: You know it will behave the same way.32:48 – Guest: I have some experience with Docker. I understand its value. I guess I will share my frustrations. Not in Docker itself, but the fact that there is a need for Docker...35:06 – Chuck.35:12 – Panel: We need someone to come up with...35:40 – Panel: It’s not standard JavaScript.35:51 – Chuck: One question: How do you setup multiple stages of Docker?36:12 – Guest: The recommended way is to have the same Docker file used in the development sate and through to production. So that way it’s the same image.37:00 – Panel: ...you must do your entire configuration via the environmental variables.37:29 – Chuck asks a question.37:36 – Panel: If you are using Heroku or Circle CI...there is a page...38:11 – Guest and Chuck go back-and-forth.39:17 – Chuck: Gottcha.39:18 – Guest.39:52 – Chuck: I have seen systems that have hyberized things like using Chef Solo and...You do your basic setup then use Chef Solo – that doesn’t’ make sense to me. Have you seen people use this setup before?40:20 – Guest: I guess I wouldn’t do it.40:30 – Chuck.40:36 – Guest: Only reason I would do that is that it works across many different platforms. If it makes your setup easier then go for it.41:14 – Chuck: Docker Hub – I want to mention that. How robust is that? Can you put private images up there?41:38 – Guest: You can go TOTALLY nuts with it. You could have private and public images. Also, your own version. Under the hood it’s called container registry. Yeah, you can change images, too.42:22 – Chuck: Should I use container registry or a CI system to build the Docker system and use it somewhere else?42:35 – Guest.43:24 – Chuck: Where can people find your Docker course?43:30 – Guest: LEARN DOCKER ONLINE! We are restructuring the prices. Make sure to check it out.44:05 – Chuck: Picks! Where can people find you online?44:14 – Guest: Twitter! eBook – Rails and DBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

20 Marras 201858min

Panel: Aimee KnightAJ O’NealCharles Max Wood Special Guest: PJ EvansIn this episode, the panel talks with PJ Evans who is a course developer and an instructor through Manning’s course titled, “Node.js in Motion.” This course is great to learn the fundamentals of Node, which you can check out here! The panel and PJ talk about this course, his background, and current projects that PJ is working on. Check out today’s episode to hear more!Show Topics:0:00 – Advertisement: KENDO UI 0:36 – Chuck: Welcome and our panel consists of Aimee, AJ, myself, and our special guest is PJ Evans. Tell us about yourself and your video course! NODE JS in Motion is the title of the course. Can you tell us more?1:29 – PJ: It’s a fantastic course. 2:25 – Chuck: You built this course and there is a lot to talk about.2:36 – Aimee: Let’s talk about Node and the current state. 2:50 – Chuck: Here’s the latest features, but let’s talk about where do you start with this course? How do you get going with Node? What do people need to know with Node?3:20 – Aimee.3:24 – PJ talks about Node and his course! 4:02 – PJ: The biggest headache with Node is the...4:13 – Chuck.4:19 – PJ: I am sure a lot of the listeners are familiar with callback hell.4:50 – Aimee: Let’s talk about the complexities of module support in Node!5:10 – PJ: It’s a horrible mess.5:17 – Aimee: Maybe not the tech details but let’s talk about WHAT the problem is?5:31 – PJ: You are talking about Proper Native ES6 right?They are arguing about how to implement it. 6:11 – PJ: My advice is (if you are a professional) is to stick with the LT6 program. No matter how tensing those new features are!6:46 – Aimee: It could be outdated but they had to come back and say that there were tons of complexities and we have to figure out how to get there.7:06 – PJ: They haven’t found an elegant way to do it.7:15 – Panel: If it’s a standard why talk about it?Seriously – if this is a standard why not implement THE standard?7:38 – PJ.8:11 – Panel.8:17 – Aimee: I would love to talk about this, though!8:24 – Chuck: I want to talk about the course, please.8:30 – PJ.8:54 – Chuck: We will keep an eye on it.9:05 – PJ.9:16 – PJ: How is it on the browser-side?9:33 – Aimee: I don’t want to misspeak.9:41 – Chuck: I don’t know how complete the forms are.9:49 – Aimee: I don’t want to misspeak.9:56 – PJ: I just found the page that I wanted and they are calling it the .MJS or aka the Michael Jackson Script. You can do an import from...Some people think it’s FINE and others think that it’s a TERRIBLE idea.10:42 – Chuck: “It sounds like it’s a real THRILLER!” 10:52 – Panel.11:25 – Panel: When you start calling things the Michael Jackson Solution you know things aren’t well.11:44 – Aimee: Just to clarify for users...11:57 – Chuck: I want to point us towards the course: NODE.JS.Chuck asks two questions. 12:34 – PJ: The concepts aren’t changing, but the information is changing incredibly fast. The fundamentals are fairly settled.13:22 – Chuck: What are those things?13:28 – PJ talks about how he structured the course and he talks about the specifics.  15:33 – Chuck: Most of my backend stuff is done in Ruby. Aimee and AJ do more Java then I do.15:55 – Panel: I think there is something to understanding how different Node is. I think that Node is a very fast moving train. Node has a safe place and that it’s good for people to know about this space.16:34 – Aimee: Not everyone learns this way, but for me I like to understand WHY I would want to use Node and not another tool. For me, this talk in the show notes really helped me a lot. That’s the core and the nature of NODE.17:21 – PJ: Yes, absolutely. Understanding the event loop and that’s aimed more towards people from other back ends. Right from the beginning we go over that detail: Here is how it works, we give them examples, and more.18:08 – Aimee: You can do more than just create APIs. Aimee mentions Vanilla Node. 18:50 – PJ: To get into frameworks we do a 3-line server. We cover express, and also Sequelize ORM. 19:45 – Advertisement – Sentry.io 20:43 – Chuck: I never used Pug.20:45 – PJ: PUG used to be called JADE. 20:56 – Aimee.21:14 – PJ: Express does that for you and I agree with you. I advocate a non-scripted approach, I like when frameworks have a light touch.22:05 – Aimee: That’s what I liked about it. No offense, Chuck, but for me I didn’t like NOT knowing a lot of what was not happening under the hood. I didn’t want to reinvent the wheel, but I wanted to build at a lower level.22:40 – PJ: I had the same experience. I wanted to figure out why something wasn’t working.23:24 – Panel: I had a friend who used Rails...he was cautious to make a switch. This past year he was blown away with how much simpler it was and how fast things were.24:05 – Aimee: I feel like if you want to learn JavaScript then Node might be easier on the frontend.24:21 – Chuck: No pun intended.No, but I agree. I like about Rails is that you had well-understood patterns. But the flipside is that you have abstractions...To a certain degree: what did I do wrong? And you didn’t follow the pattern properly.25:57 – Panel: With Node you get a little bit of both. To me it’s a more simple approach, but the downside is that you have 100’s of 1,000’s of modules that almost identical things. When you start reaching out to NPM that...26:29 – PJ: Yes the module system of NPM is the best/worst thing about NODE. I don’t have an answer, honestly.There is a great article written that made me turn white. Here is the article! 28:12 – Panel: The same thing happened with the ESLint. That was the very problem that he was describing in the article.28:50 – PJ: Yep, I put that in the chat there – go ahead and read it! It’s not a problem that’s specific to Node, there are others. It’s the way we do things now.29:23 – Chuck: We have the NODE Security project. A lot of stuff go into NPM everyday.29:43 – PJ: We cover those things in the course.29:53 – Chuck: It’s the reality. Is there a place that people get stuck?30:00 – PJ answers the question.30:23 – Aimee.30:55 – PJ: I am coding very similar to my PHP days.31:20 – Aimee.32:02 – PJ: To finish off my point, I hope people don’t loose sight.32:18 – Aimee.32:20 – PJ: I am working on a project that has thousands of requests for...32:53 – Chuck: Anything you WANTED to put into the course, but didn’t have time to?33:05 – PJ: You can get pretty technical. It’s not an advanced course, and it won’t turn you into a rock star. This is all about confidence building. It’s to understand the fundamentals.It’s a runtime of 6 hours and 40 minutes – you aren’t just watching a video. You have a transcript, too, running off on the side. You can sit there and type it out w/o leaving – so it’s a very interactive course.34:26 – Chuck: You get people over the hump. What do you think people need to know to be successful with Node?34:38 – PJ answers the question. PJ: I think it’s a lot of practice and the student to go off and be curious on their own terms.35:13 – Chuck: You talked about callbacks – I am thinking that one is there to manage the other?35:31 – PJ answers the question. PJ: You do what works for you – pick your style – do it as long as people can follow you. Take the analogy of building a bridge.36:53 – Chuck: What are you working on now?37:00 – PJ: Educational tool called SCHOOL PLANNER launched in Ireland, so teachers can do their lesson planning for the year and being built with Express.Google Classroom and Google Calendar.39:01 – PJ talks about Pi and 4wd. See links below. 40:09 – Node can be used all over the place!40:16  - Chuck: Yes, the same can be said for other languages. Yes, Node is in the same space.40:31 – PJ: Yep!40:33 – Chuck: If people want to find you online where can they find you?40:45 – PJ: Twitter! Blog! 41:04 – Picks!41:05 – Advertisement – eBook: Get a coder job! Links:JavaScriptjQueryBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

13 Marras 201849min

Panel: - http://www.aimeemarieknight.com- AJ O’Neal- Aaron Frost- https://2013.boston.wordcamp.org/speakers/ Special Guests: https://www.linkedin.com/in/cwbuecheler In this episode, the panel talks with https://www.linkedin.com/in/cwbuecheler who is an author, blogger, web developer, and founder of CloseBrace. The panel and Christopher talk about stepping outside of your comfort zone. With a technological world that is ever changing, it is important to always be learning within your field. Check out today’s episode to learn more!Show Topics:0:00 – https://www.telerik.com/kendo-ui?utm_campaign=kendo-ui-awareness-jsjabber&utm_medium=social-paid&utm_source=devchattv 1:08 – Aimee: Our guest is Christopher Buecheler – tell us about yourself and what you do.1:22 – https://www.linkedin.com/in/cwbuecheler I run a site and help mid-career developers. I put out a weekly newsletter, too.2:01 – Aimee: It says that you are a fan of “getting comfortable being uncomfortable”?2:15 – Guest: I am a self-taught developer, so that means I am scrambling to learn new things all the time. You are often faced with learning new things. When I learned React I was dumped into it. The pain and the difficulty are necessary in order to improve. If you aren’t having that experience then you aren’t learning as much as you could be.3:26 – Aimee: I borrow lessons that I learned from ice-skating to programming.3:49 – Guest: I started running a few years ago for better health. It was exhausting and miserable at the start and wondered why I was doing it. Now I run 5 times a week, and there is always a level of being uncomfortable, but now it’s apart of the run. It’s an interesting comparison to coding. It’s this idea of pushing through.5:01 – Aimee: If you are comfortable you probably aren’t growing that much. In our industry you always have to be learning because things change so much!5:25 – Guest: Yes, exactly. If you are not careful you can miss opportunities.6:33 – Panel: You have some ideas about frameworks and libraries – one thing that I am always anxious about is being able to make sense of “what are some new trends that I should pay attention to?” I remember interviewing with someone saying: this mobile thing is just a fad. I remember thinking that she is going to miss this opportunity. I am worried that I am going to be THAT guy. How do you figure out what sort of things you should / shouldn’t pay attention to?7:47 – Guest: It is a super exhausting thing to keep up with – I agree. For me, a lot of what I pay attention to is the technology that has the backing of a multi-million dollar company then that shows that technology isn’t going anywhere, anytime soon. The other thing I would look at is how ACTIVE is the community around it?9:15 – Panel: Is there a strategic way to approach this? There is so many different directions that you can grow and push yourself within your career? Do you have any kinds of thoughts/tips on how you want your career to evolve?10:00 – Guest: I am trying to always communicate better to my newsletter audience. Also, a good approach, too, is what are people hiring for? 11:06 – Aimee: Again, I would say: focus on learning.11:30 – Panel: And I agree with Aimee – “learn it and learn it well!”12:01 – Panel: I want to ask Chris – what is https://blog.closebrace.com 12:17 – Guest: I founded it in November 2016, and started work on it back in 2013.14:20 – Panel: It was filled with a bunch of buzz worthy words/title.14:32 – Guest continues his thoughts/comments on https://blog.closebrace.com 16:54 – Panel: How is the growth going?17:00 – Guest: It is growing very well. I put out a massive, massive tutorial course – I wouldn’t necessarily advice that people do this b/c it can be overwhelming. However, growth this year I have focused on marketing. I haven’t shared numbers or anything but it’s increased 500%, and I am happy about it.18:05 – Panel: Are you keeping in-house?18:13 – Guest: I think it would be cool to expand, but now it is in-house. I don’t want to borrow Egg Head’s setup. I would love to cover MORE topics, though.19:05 – Panel: You are only one person.19:08 – Guest: If I can get the site creating more revenue than I can hire someone to do video editing, etc.19:35 – Panel: I think you are overthinking it.19:45 – Guest.19:47 – https://sentry.io/welcome/ 20:47 – Guest.21:30 – Aimee: There are SO many resources out there right now. Where do you think you fit into this landscape?21:44 – The landscape is cluttered, but I feel that I am different b/c of my thoroughness. I don’t always explain line by line, but I do say how and why things work. I think also is my VOICE. Not my radio voice, but the tone and the approach you take with it.23:25 – Panel: I was trying to copy folks in the beginning of my career. And at some point I realized that I needed to find my own style. It always came down to the reasons WHY I am different rather than the similarities. Like, Chris, you have these quick hits on CloseBrace, but some people might feel like they don’t have the time to get through ALL of your content, because it’s a lot. For me, that’s what I love about your content.24:46 – Christopher: Yeah, it was intentional.25:36 – Panel: Good for you.25:49 – https://www.linkedin.com/in/cwbuecheler I am super device agnostic: Android, Mac, PC, etc. I have a lot of people from India that are more Microsoft-base.26:28 – Aimee: I think Egghead is pretty good about this...do you cover testing at all with these things that you are doing? It’s good to do a “Hello World” but most of these sites don’t get into MORE complex pieces. I think that’s where you can get into trouble. It’s nice to have some boiler point testing, too.27:18 – Guest answers Aimee’s question. 28:43 – Aimee: We work with a consultancy and I asked them to write tests for the things that we work with. That’s the value of the testing. It’s the code that comes out.29:10 – Panel: Can you explain this to me. Why do I need to write tests? It’s always working (my code) so why do I have to write a test?29:39 – Guest: When working with AWS I was writing...31:01 – Aimee: My biggest thing is that I have seen enough that the people don’t value testing are in a very bad place, and the people that value testing are in a good place. It even comes back to the customers, because the code gets so hard that you end up repeatedly releasing bugs. Customers will stop paying their bills if this happens too often for them.33:00 – Panel: Aimee / Chris do you have a preferred tool? I have done testing before, but not as much as I should be doing.33:25 – Aimee: I like https://jestjs.io and https://github.com/smooth-code/jest-puppeteer 33:58 – Guest: I like https://jestjs.io, too.34:20 – Aimee: Let’s go to PICKS!34:35 – https://devchat.tv/get-a-coder-job/ Links:- https://www.javascript.com- https://jquery.com- https://reactjs.org- https://elixir-lang.org- http://elm-lang.org- http://closebrace.com- https://jestjs.io- https://github.com/smooth-code/jest-puppeteer- https://podflix.app- https://github.com/wting/autojump- https://brutalist-web.design- https://www.youtube.com/watch?v=QrR_gm6RqCo- https://balloonfiesta.com- https://www.docz.site- http://closebrace.com- http://cwbuecheler.com- https://www.linkedin.com/in/cwbuecheler- https://github.com/cwbuecheler- https://gomakethings.comSponsors:-Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

6 Marras 201843min

Panel: Aimee KnightCharles Max WoodJoe EamesAJ O’NeilChris Ferdinandi  Special Guests: Charles Lowell (New Mexico) & Taras Mankovski (Toronto)In this episode, the panel talks with two special guests Charles and Taras. Charles Lowell is a principle engineer at Frontside, and he loves to code. Taras works with Charles and joined Frontside, because of Charles’ love for coding. There are great personalities at Frontside, which are quite diverse. Check out this episode to hear about microstates, microstates with react, Redux, and much more!Show Topics:1:20 – Chuck: Let’s talk about microstates – what is that?1:32 – Guest: My mind is focused on the how and not the what. I will zoom my mind out and let’s talk about the purposes of microstates. It means a few things. 1.) It’s going to work no matter what framework you are using. 2.) You shouldn’t have to be constantly reinventing the wheel. React Roundup – I talked about it there at this conference. Finally, it really needs to feel JavaScript. We didn’t want you to feel like you weren’t using JavaScript. It uses computer properties off of those models. It doesn’t feel like there is anything special that you are doing. There are just a few simple rules. You can’t mutate the state in place. If you work with JavaScript you can use it very easily. Is that a high-level view?7:13 – Panel: There are a lot of pieces. If I spoke on a few specific things I would say that it enables programming with state machines.7:42 – Panel: We wanted it to fell like JavaScript – that’s what I heard.7:49 – Aimee: I heard that, too.7:59 – Guest.8:15 – Aimee: Redux feels like JavaScript to me.8:25 – Guest: It’s actually – a tool – that it feels natural so it’s not contrived. It’s all JavaScript.8:49 – Panel.9:28 – Guest: Idiomatic Ember for example. Idiomatic in the sense that it gives you object for you to work with, which are simple objects.10:12 – Guest: You have your reducers and your...we could do those things but ultimately it’s powerful – and not action names – we use method names; the name of the method.11:20 – Panel: I was digging through docs, and it feels like NORMAL JavaScript. It doesn’t seem like it’s tied to a certain framework or library platform?11:45 – Guest: Yes, we felt a lot of time designing the interfaces the API and the implementation. We wanted it to feel natural but a tool that people reach for.(Guest continues to talk about WHY they created microstates.)Guest: We wanted to scale very well what you need when your needs to change.13:39 – Chuck: I have a lot of friends who get into React and then they put in Redux then they realize they have to do a lot of work – and that makes sense to do less is more.14:17 – Guest: To define these microstates and build them up incrementally...building smaller microstates out of larger ones.Guest continued: Will we be able to people can distribute React components a sweet array of components ready for me to use – would I be able to do the same for a small piece of state? We call them state machines, but ultimately we have some state that is driving it. Would we be able to distribute and share?16:15 – Panel: I understand that this is tiny – but why wouldn’t I just use the native features in specific the immutability component to it?16:42 – Guest: I’m glad you asked that question. We wanted to answer the question...Guest: With microstates you can have strict control and it gives you the benefit of doing sophisticated things very easily.18:33 – Guest: You mentioned immutability that’s good that you did. It’s important to capture – and capturing the naturalness of JavaScript. It’s easy to build complex structures – and there is an appeal to that. We are building these graphs and these building up these trees. You brought up immutability – why through it away b/c it’s the essence of being a developer. If you have 3-4-5 levels of nesting you have to de-structure – get to the piece of data – change it – and in your state transition 80% of your code is navigating to the change and only 20% to actually make the change. You don’t have to make that tradeoff.21:25 – Aimee: The one thing I like about the immutability b/c of the way you test it.21:45 – Guest: There a few things you can test. 23:01 – Aimee: You did a good job of explaining it.23:15 – Guest: It makes the things usually hard  easy! With immutability you can loose control, and if that happens you can get so confused. You don’t have a way to have a way to navigate to clarity. That’s what this does is make it less confusing. It gives you order and structure. It gives you a very clear path to do things you need to do. If there is a property on your object, and if there is a way to change it...25:29 – Guest: The only constant is change no matter what framework you are working on.24:46 – Chuck: We are talking about the benefits and philosophy. What if I have an app – and I realize I need state management – how do I put microstates into my app? It’s using Angular or React – how do I get my data into microstates?26:35 – Guest: I can tell you what the integration looks like for any framework. You take a type and you passed that type and some value to the create function so what you get is a microstate.(The Guest continues diving into his answer.)28:18 – Guest: That story is very similar to Redux, basically an event emitter. The state changes on the store.Maybe this is a good time to talk about the stability benefits and the lazy benefits because microstates is both of those things.Stability – if I invoke a transition and the result is unchanged – same microstate – it doesn’t emit an event. It recognizes it internally. It will recognize that it’s the same item. Using that in Ember or Redux you’d have to be doing thousands of actions and doing all that computation, but stability at that level.Also, stability in the sense of a tree. If I change one object then that changes it won’t change an element that it doesn’t need to change.31:33 – Advertisement: Sentry.io32:29 – Guest: I want to go back to your question, Chuck. Did we answer it?32:40 – Chuck: Kind of.32:50 – Guest.32:59 – Guest: In Angular for example you can essentially turn a microstate...33:51 – Guest: You could implement a connect, too. Because the primitive is small – there is no limit.34:18 – Chuck summarizes their answers into his own words.34:42 – Guest: If you were using a vanilla React component – this dot – I will bind this. You bind all of these features and then you pass them into your template. You can take it as a property...those are those handlers. They will perform the transition, update and what needs to be updated will happen.35:55 – Chuck: Data and transitions are 2 separate things but you melded them together to feel like 1 thing. This way it keeps clean and fast.36:16 – Guest: Every framework helps you in each way.Microstates let’s you do a few things: the quality of your data all in one place and you can share.38:12 – Guest: He made and integrated Microstates with Redux tools.38:28 – Guest talks about paths, microstates to trees.39:22 – Chuck.39:25 – Panel: When I think about state machines I have been half listening / half going through the docs. When I think of state machines I think about discreet operations like a literal machine. Like a robot of many steps it can step through. We have been talking about frontend frameworks like React - is this applicable to the more traditional systems like mechanical control or is it geared towards Vue layered applications?40:23 – Guest: Absolutely. We have BIG TEST and it has a Vue component.41:15 – Guest: when you create a microstate from a type you are creating an object that you can work with.42:11 – Guest: Joe, I know you have experience with Angular I would love to get your insight.42:33 – Joe: I feel like I have less experience with RX.js. A lot of what we are talking about and I am a traditionalist, and I would like you to introduce you guys to this topic. From my perspective, where would someone start if they haven’t been doing Flux pattern and I hear this podcast. I think this is a great solution – where do I get started? The official documents? Or is it the right solution to that person?43:50 – Guest: Draw out the state machine that you want to represent in your Vue. These are the states that this can be in and this is the data that is required to get from one thing to the other. It’s a rope process. The arrow corresponds to the method, and...44:49 – Panel: It reminds me back in the day of rational rows.44:56 – Guest: My first job we were using rational rows.45:22 – Panelist: Think through the state transitions – interesting that you are saying that. What about that I am in the middle – do you stop and think through it or no?46:06 – Guest: I think it’s a Trojan horse in some ways. I think wBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

30 Loka 20181h 18min

Panel: Aimee KnightCharles Max Wood (DevChat TV)Christopher Ferdinandi (Boston)Cory House (Kansas City)Joe Eames Special Guests: Nicholas Zakas In this episode, the panel talks with Nicholas Zakas who writes on his site, Human Who Codes. He is the creator of ESLint, also the author of several books, and he blogs, too. He was employed through Box and today he talks about ESLint in full detail! Check it out! Show Topics:0:05 – Advertisement: KENDO UI 0:37 – Hello! The panel is...(Chuck introduces everyone).1:04 – Nicholas who are you?1:17 – Nicholas: Yeah it’s been about 5 years and then you invited me again, but I couldn’t come on to talk about ESLint back then. That’s probably what people know me most for at this point. I created ESLint and I kicked that off and now a great team of people is maintaining it.1:58 – Chuck: What is it?2:04 – It’s a Linter for JavaScript. It falls into the same category as JSLint. The purpose of ESLint is to help you find problems with your code. It has grown quite a bit since I’ve created it. It can help with bugs and enforcing style guides and other things.2:53 – Where did it come from?2:57 – Guest: The idea popped into my head when I worked at Pop. One of my teammates was working on a bug and at that time we were using...Nothing was working and after investigating someone had written a JavaScript code that was using a native code to make an Ajax request. It wasn’t the best practice for the company at the time. For whatever reason the person was unaware of that. When using that native XML...there was a little bit of trickiness to it because it was a wrapper around the...We used a library to work around those situations and add a line (a Linter) for all JavaScript files. It was a text file and when you tried to render code through the process it would run and run the normal expression and it would fail if any of the...matched.I am not comfortable using normal expressions to write code for this. You could be matching in side of a string and it’s not a good way to be checking code for problems. I wanted to find a better way.6:04 – Why did you choose to create a product vs. using other options out there?6:15 – Guest: Both of those weren’t around. JSHint was pretty much the defector tool that everyone was using. My first thought was if JSHint could help with this problem?I went back to look at JSHint and I saw that on their roadmap you could create your own rules, and I thought that’s what we need. Why would I build something new? I didn’t see anything on GitHub and didn’t see the status of that. I wanted to see what the plan was, and they weren’t going to get to it. I said that I really needed this tool and I thought it would be helpful to others, too.8:04 – My history was only back when it was customizable.8:13 – Aimee: It’s interesting to see that they are basing it on regular expressions.8:32 – Guest: Interesting thing at Box was that there was...I am not sure but one of the engineers at Box wrote...9:03 – Aimee: I was going to ask in your opinion what do you think ES Lint is the standard now?9:16 – Guest: How easy it is to plug things in. That was always my goal because I wanted the tool not to be boxed in – in anyway.The guest continues to talk about how pluggable ESLint is and the other features of this tool.13:41 – One thing I like about ESLint is that it can be an educational tool for a team. Did you see that being an educational tool?14:24 – Guest: How do you start introducing new things to a team that is running at full capacity? That is something that I’ve wondered throughout my career. As a result of that, I found that a new team there were some problems I the code base that were really hard to get resolved, because when one person recognizes it there isn’t a god way to share that information within a team in a non-confrontational way. It’s better to get angry at a tool rather than a person.Guest goes into what this can teach people.18:07 – Panelist: I am not surprised. Is there a best practice to get a team to start with ESLint?Do you get the whole team in a room and show them the options or take the best guess and turn it on?18:34 – Guest: The thing I recommend is that first and foremost get ESLint in your system with zero rules on. It starts that mindset into your development process. We can do something to automatically check...Get Syntax checking and you will se improvements on the number of bugs that are getting out of production. I recommend using the default the ESLint configuration. This has all of the things that we have found that are most likely errors and runtime errors vs. syntax errors. You can go through with those and sometimes it is easier to run that check with...Using those ESLint rules will clean up a lot of problems that you didn’t know you had with your code. There are too many problems with those rules. I recommend instead of turning them off then put the severity to warning and not error. That is something we started with in the beginning. We turned on as many rules as we could and it drove people crazy. They didn’t feel like when they were committing to a file why should I be...The idea with the different scenario levels you don’t’ want to turn off rules so people don’t know there is a problem. There can be a rule on so people will know that there is a problem, but...Doing that alone will give you a lot of benefit in using ESLint. How do you decide as a team on the rules that are maybe not for finding errors but for stylistic in error? Do we use four spaces, semi-colons, etc. To figure that out I am a big component on finding a pre-existing style guide and adapting it. Get everyone to agree.There is no right or wrong when it comes to stylistic preferences. It really is just getting everyone to do the same thing. I think it was Crawford that said: Whether you drive on the right side of the left side of the road – it doesn’t matter as long as everyone is dong the same thing. I agree with that and it applies to style guides. It can get heated but for the best thing for the team is stick with a guide and work together.24:36 – Aimee: I can go through the options to pick one of the style guides out there and then it will automatically create my configuration for me is helpful. Question: If you had to pick 2 or 3 rules that you are super helpful what would they be?25:30 – Guest: To touch briefly on indentation. Whether you like four spaces or whether you are wild and like tabs, I think the indent rule is very helpful. Just for wiping out and eliminating that discussion through your team. Have your editor setup however they want but on the pre-hook...But my favorite rules I tend to lean towards the ones that saved me.The Guest goes through his favorite rules with ESLint. Check it out!26:51 – Guest mentions his second favorite rule, here!28:24 – Guest mentions his third favorite rule, here!29:03 – Guest mentions the rule that makes him giggle a lot, here!30:07 – Advertisement – Sentry! 31:22 – What is your take on running Fix? Does it make sense to run Fix?32:00 – Guest: It depends and the idea behind Fix is the idea of doing a one time (at the start) fix everything that it can find wrong b/c I don’t want to do it by hand. It morphed into a more of a tool that people are using all the time. I too have mixed feelings about it. I think the greatest value you get out of Fix is that when you first install it or when you enable a new rule. I think in those situations you get a lot of value out of Fix. I think that when people were getting aggressive with their code styles it took us down a path where we...As a pre-commit hook it could be to fix things and part of the built system you wouldn’t want...People are probably wondering: Why doesn’t ESLint doesn’t fix all the time?It can be a team decision: do you want to run Fix at the point that the developer is writing the code, do you want to use Fix as running it as a build when you are bundling? It really seems more of a personal preference. I am on the fence about it. Even though I am leaning more towards...35:16 – Do you run Premier?35:20 – Guest: No I don’t. I don’t have anything against Premier but I think Prettier uses a very interesting space.37:50 – Chuck: What is next for ESLint and what is next for you?37:55 – Guest: Well, to be honest I am not sure what is next for ESLint. I haven’t been involved with keeping it maintained for the last few years. I do help out with feedback with decisions. But in general the ESLint the direction is that let’s add tings that help people avoid language hazards and make sure that ESLint is still pluggable. Lastly, that we will be there to help people and the community. There is this virtuosic cycle and tools like Babble and then tools like ESLint introducing rules adapting new rules and featurBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

23 Loka 20181h 8min

Panel: - http://www.aimeemarieknight.com- https://twitter.com/cmaxw?lang=en (DevChat TV)- https://2013.boston.wordcamp.org/speakers/- https://twitter.com/josepheames Special Guests: https://twitter.com/justinbmeyer?ref_src=twsrc%255Egoogle%257Ctwcamp%255Eserp%257Ctwgr%255Eauthor In this episode, the panel talks with https://twitter.com/justinbmeyer?ref_src=twsrc%255Egoogle%257Ctwcamp%255Eserp%257Ctwgr%255Eauthor who is a co-author of DoneJS, CanJS, jQueryPP, StealJS, and DocumentJS. Justin currently works for https://www.bitovi.com/about and is their Director of R&D. He is also a fan of basketball and Michael Jackson. The panel and Justin talk about CanJS in-detail – check it out!Show Topics:0:58 – https://radiopublic.com/all-javascript-podcasts-by-devcha-WwEoX8/ep/s1!3b9d2 1:14 – Chuck: Can you tell everyone who you are?1:20 – Justin tells us his background.1:50 – Chuck.1:58 – Justin.2:06 – Chuck: Can you give us an introduction to what CanJS 4.0?2:11 – Justin: It is a JavaScript framework and is similar to Vue. It adds a very model layer, and uses Real Time very well.2:44 – Panelist.2:49 – Justin.2:55 – Panelist: What is the current...3:09 – Justin: Compatibility is very important to us. A lot of the same tools are still available. It has over 80 different repositories.Justin continues to talk about the differences/similarities between the different versions.4:55 – Panelist: Angular, React, and Vue are dominating, so I have 2 questions.1.) Where is the core strength of JS and its user base?2.) What is like to be the CanJS when everyone is talking about the other programs?5:31 – Justin: We have dealt with this for the past 10 years. Emotionally it’s not great, I wished it was more popular, but our priority is keeping our user-based happy. We’ve had big companies use it.Justin answers the second question.8:44 – Panelist: You mentioned two things.9:22 – Aimee: I think everything has trade-offs. I would use something because it was the right tool for the job. I wouldn’t want to make something that was “cool.” I would want to make it super accessible in a network.10:10 – Justin: That is a great marketing angle. We are trying to remove the worst parts of the program.10:26 – Now I am intrigued.10:32 – Justin: You have this mutable state and you aren’t sure. At least for https://twitter.com/canjs?lang=en I don’t see that occurring too often.10:54 – Aimee.10:58 – Justin: Deep inheritance is definitely a problem and it can create...11:13 – Aimee.11:19 – Justin: We have changed strategies a lot, and I think it’s helped https://twitter.com/canjs?lang=en grow; like 60% since January. We are doing a lot of user studies now. I run Meetups, etc. That being said inheritance schemes aren’t something that people will encounter. This is something that they won’t encounter months down the road.13:00 – Aimee.13:05 – Panelist: I would like to dig deeper into state-management. Everyone is doing Flux, talk about that with CanJS.13:20 – Justin: Yeah. It depends on what kind of user you are talking to. When I talk to new users off the street (people who just graduated, etc.)...If you look at React’s statistics – more than 50% doesn’t use any state management.16:15 – Panelist: I think it’s interesting that there are people that aren’t “oh my gosh...”16:43 – Justin: The last coolest thing I’ve done is...18:02 – Justin continues.18:16 – Panelist: I kind of have this belief that we as a community turn to frameworks and tools too much. From your perspective when does it make sense to turn to a tool like this or better off working with native...18:56 – It depends on how complex your app is and our ability to work through those problems. I think that’s a generic answer, but hopefully that helps. I don’t think you really can’t live without.19:49 – Panelist: I think that’s fair. One thing that I found is that there are many things layered into state-management. Because you mentioned performance, which is something I care about, too. At what point does the extra tooling become too heavy for the user’s experience? Where do you draw the line?21:11 – Justin: It depends. I don’t know what the parallel is – it’s like a richer developer problem. You have too many users where you can make those fine tuned adjustments. Do whatever is going to deliver the product first and then worry about performance later? I think our things are geared towards performance by default.22:41 – Panelist: Playing devil’s advocate, though. But isn’t there some danger in kind of suggesting that you focus on performance WHEN it’s a business issue? Maybe there is there a lack of empathy among developers. I worry that advice is hurting us.23:53 – Justin: No matter what you can build your homepage with Angular weird monstrosity, but then when you get to the point when people are using your product – you can just use native HTML, and native methods and build that one widget and as easy and fast as possible.24:50 – Panelist: Dealing with complexity. Now we need to do things like bundlers, and such to deal with this issue. I feel like a crotchety old man yelling because it takes forever.25:38 – Justin: I think it depends on where you are sitting. I think that comes down to the design. If your design has a lot of complex states, then...26:37 – Panelist: Because you care about performance...26:54 – https://sentry.io/welcome/ 27:53 – Justin: I don’t think that the run time of https://twitter.com/canjs?lang=en is going to be a critical performance path for anybody. Is there a responsibility? This is the oldest question. It’s like saying: where do you draw the line that you need to choose success/be elected to fight the battles if you really want to win.You need someone using your product or it doesn’t really matter. Start-ups use our product because they need to get something up and in. I am going to flip this back onto you guys.30:48 – Panelist: I think that’s fair.31:00 – Aimee: I have a question. You got into consultancy when do you recommend using CanJS or something else?31:15 – Justin: I always suggest people using CanJS.31:53 – Aimee: What do these people do when their contract is over? I have used an older version of Can, and...32:20 – Justin: Are you on https://github.com/gitterHQ?Aimee: No, I am not.32:25 – Justin: We do offer promote job posting to help them find somebody. We try our best to help people in any way we can.33:05 – Aimee: That’s helpful. Another question.33:28 – Justin: DoneJS is that. It uses the full kitchen sink. That’s what DoneJS is.33:50 – Panelist: Let’s talk about CanJS in the mark-up. Do you think it’s better now or worse than 2012? Less space or more space?34:13 – Justin: It’s probably worse. I think the methodology that we are using: focusing on our users. We get their feedback frequently. We are listening to our users, and I think we are being smarter.35:16 – Panelist: Is the space getting more welcoming or less?35:31 – It depends on what framework you are. It’s very hard to compete if you are the exact same thing as...The market is so dense and there are so many ideas, so it’s getting harder and harder. What helps people break-through? Is it the technology or the framework?36:36 – Panelist: I appreciate the richness of the field, as it exists right now. There aren’t a few things SMELT and ELM37:10 – Justin: Elm for sure. I don’t have a lot of experience with SMELT.37:23 – Panelist continues the talk.37:54 – Chuck.38:00 – Justin: I think it spreads by word-of-mouth. I used to think it was “technology” or... all that really matters is “can you deliver” and the person have a good experience.Usability is the most important to me. We will see how this turns out. I will be either right or wrong.39:18 – Panelist: Can we talk about the long-term future of Can JS?39:28 – Justin: We are connecting to our user-base and making them happy. If I had it my way (which I don’t anymore) I think https://reactjs.org/docs/jsx-in-depth.html is the best template language. We have been building integrations between JSX and...I am putting out proposals where most people don’t like them.Justin continues this conversation.44:24 – Picks!44:28 -https://devchat.tv/get-a-coder-job/ Links:- https://www.javascript.com- https://jquery.com- https://reactjs.org- https://elixir-lang.org- http://elm-lang.org- https://vuejs.org- https://polyfill.io/v2/docs/-Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

16 Loka 201854min

Panel: Aimee KnightCharles Max WoodChristopher Ferdinandi (Boston) Special Guests: Dan Shappir (Tel Aviv)In this episode, the panel talks with Dan Shappir who is a computer software developer and performance specialist at Wix.com. As Dan states, his job is to make 100 million websites (hosted on the Wix platform) load and execute faster! Past employment includes working for companies, such as: Ericom, Ericom Software, and BackWeb. He studied at Technion Institute of Management and currently lives in Tel Aviv, Israel. The panel talks about web performance API among other things. Check it out!Show Topics:1:29 – Charles: Let us know who you are and why you’re famous!1:39 – “Hello!” from Dan Shappir.2:25 – Charles: You should say that you go to EACH site EVERY day out of the millions of sites out there.2:53 – Charles: My mom mentioned Wix to me at first. My mom teaches High School Math.3:16 – Dan: Yes that is our mission statement. That everyone can get a website without the knowledge of how to build a website.3:52 – Aimee makes her comments.3:59 – Dan: On our platform we try to offer people flexibility. There are bounds and limits, but people can do their very own thing, though. To make Wix faster because as we add more features and functionality that is our goal.4:40 – Chuck: Okay, I know how to make X perform a little bit better. You are looking at a platform that controls TONS of sites, how do you even go about that?4:58 – Dan: It is more difficult then that. We have millions of users leveraging the platform but there are a lot of developers in Wix who are developing the platform. I don’t think anyone at Wix has a total grasp of the complexity of the platform that we built. We have hundreds of frontend people working on our platform. All of them have pieces to the kingdom. We have processes in place with code reviews and whatnot, but there is so much going on. There is a change every 2 minutes, 24/7. We need to make sure progressing instead of regressing. 6:54 – Aimee: I think it was interesting in one of the links you sent over. Because you know when something is getting worse you consider that a bug.7:15 – Dan: It is more than a bug because if we see regression in performance then that is a problem. I can literally see any part of the organization and say, “stop” if it will7:57 – Chuck: We are talking about performance, but what does that mean? What measures are there?8:15: Dan: We are looking at performance can mean different things in different contents. User sites, for example, most important aspect is load time. How quickly the page loads and gets open to the viewer to that specific site. When they click something they want it instantly and no drag time. It does change in different contexts.9:58 – Chuck: People do talk about load time. People have different definitions of it.10:12: Dan: Excellent question. When you look at the different sites through Wix. Different people who build sites – load time can mean something else to everybody. It can mean when you see the MAIN text or the MAIN image. If it’s on an ECON site then how soon can they purchase or on a booking site, how long can the person book X product.I heard someone at a conference say that load time is when: HERO TEXT And HERO IMAGE are displayed.12:14 – Chuck: What is faster React or Vue?12:21 – NEW HOST: Not sure. It all depends.12:34 – Dan: We are big into React. We are one of the big React users outside of Facebook. I joined Wix four years ago, and even back then we were rebuilding our framework using React. One of our main modifications is because we wanted to do server-side rendered.13:27 – Christopher asks Dan a question.14:16 – Dan: We are in transition in this regard. Before we were totally client-site rendered, and that was the case until middle of last year. Then we deployed...Dan: We are 100% server-side rendered now. Some things we are still using JavaScript. We have another project going on now and it’s fully CSS, and little JavaScript as possible. What you might want to do with that site is...You might get in a few months every Wix site will be visible even if JavaScript is disabled.16:26 – Aimee adds in her comments and observations to this topic.16:55 – Dan: We don’t want things displayed incorrectly before it lays out. We hide the content while it’s downloading then make it visible. They lay-outing are done faster, because...17:44 – Christopher asks Dan a question.18:04 – Dan: I got into API...Either you are moving forward or are you moving back. AKA – You are either progressing or regressing.Different stages:1.) Development stage2.) Pre-Production (automated tools that check the performance with specific use cases)3.) Check it out!It’s beneficial to use these APIs.21:11 – Christopher: What is performance APIs?21:38 – Dan: There is a working group – Todd from Microsoft and others who are exposing the information (that is available in the browser) out into the browser. When the browser downloads a certain source (image, font, etc.) it can measure the various stages of downloading that feature.  You have these different sages of downloading this resource. The browser can measure each of these stages and then expose them to you. Basically it’s for the browser to expose this information to you and in a way that is coherent and uniform. It essentially maintains this buffer that puts performance entries sequentially.Dan continues explaining this topic in detail.25:55 – Dan: You have this internal buffer...28:45 – Advertisement – Sentry – They support opensource.29:39 – Christopher: everything you are saying seems that I can use this or that tab right now...Why would I prefer the API to something visual, hypothetically?30:03 – Dan: Three Different Stages. (See above.)This information is very, very helpful during the developmental stage. Say you got a link from someone...Dan mentions: Performance.mark 34:04 – Aimee: When you were talking about resource-ends. Many people don’t know what this is. Can you spend 2-3 minutes about how you guys are using these? Are there people can add for big bang for their buck?34:41 – Dan: This might want to be a topic for its own podcast show.Dan gives a definition of what a resource-end means.Go back to fonts as an example.Pre-connect for example, too.39:03 – Dan: Like I said, it’s a huge topic.You have to exercise some care. Bandwidth is limited. Make sure you aren’t blocking other resources that you do need right now.40:02 – Aimee: Sounds like a lot of great things to tap into. Another question I have is about bundling.40:27 – Dan: One of the things that we try to do (given that we are depending on the JavaScript we are downloading) we need to download JavaScript content to the client side. It has been shown often that JS is the most impactful resources that you need to download. You really want to be as smart as possible with that. What is even more challenging is the network protocols are changing.Dan continues to go in-depth about this topic. Dan: What we have found is that you want to strive to bundle resources together.44:10 – Aimee: Makes sense.44:15 – Dan continues talking about this topic.45:23 – Chuck asks two questions. (First question is now and second question is at 51:32.)2 Questions:1. You gather information from web performance AI - What system is that?45:42 – Dan: I am not the expert in that. I will try not to give misleading information. Actually let me phrase it different. There are 3rd party tools that you can use leverage in your website. IF you are building for commercial reasons I highly recommend that you use performance-monitoring solution. I am not going to advertise one because there are tons out there. We ended up rolling out our own infrastructure because our use case is different than most.At a conference I talked with a vendor and we talked about...51:32 – 2nd Question from Charles to Dan: Now you’ve gathered this information now what to you do? What patterns? What do you look for? And how do you decide to optimize things?54:23 – Chuck: Back to that question, Dan. How should they react to it and what are they looking for54:41 – Dan: Three main ways: 1.) Generate alerts 2.) See trends over long period of time 3.) Looking at real-time graphs.Frontend developer pro is that likely being woken up in the middle of the night is lower. We might be looking at the real time graph after we deployed...57:31 – Advertisement – Get a Coder Job!58:10 – Picks!Links:JavaScriptjQueryReactElixirElmVueWixBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

9 Loka 20181h 8min