Adventures in Angular

AiA 148: What’s New in NativeScript with TJ VanTollOn today's episode of Adventures in Angular, we have panelists Alyssa Nicoll, Ward Bell, and Charles Max Wood. We have a special guest, TJ VanToll of Progress. If you want to stay current with NativeScript, tune in![00:01:55] – Introduction to TJ VanTollTJ works as a Developer Advocate for Progress, which is a software development company behind KendoUI, NativeScript, and few other tools.[00:02:20] – NativeScriptNativeScript is completely free, completely open-source tool that lets you build iOS and Android native apps with Native user interfaces using JavaScript. It also provides built-in support for both TypeScript and Angular, as well. If you’re an Angular developer, it’s a tool that you can use to take Angular and build for Native iOS and Native Android.[00:03:15] – Native apps using JavaScript core or v8 on AndroidNativeScript uses Native UI components so they’re not using web view, the DOM, HTML, etc. For people that are coming from an Angular background, your apps look like Native apps. They’re using the same building blocks that you’d use if you’re building your app straight up in Xcode or Android Studio. You’re still building your apps the same way, the same file and folder structure, routing, etc. But the real learning curve that it takes to build NativeScript apps is that you have to use their user interface components to build your apps.[00:05:35] – Template syntaxIf you’re building a fairly complex Angular app, when you have all custom components, it’s going to look exactly like a NativeScript app. It’s basically using a suite of custom Angular components vs. using divs and spans as you’re building blocks.Angular is an optional dependency. NativeScript, at its lowest level, it’s just a technology that’s allowing the communication between JavaScript and these Native objects. The reason why the team spends a lot of time working with Angular integrations is that the model that Angular uses happens to be a really good fit for NativeScript. Any JavaScript developer who doesn’t really like using frameworks at all, using these components and syntax that they’re not familiar with could make their learning curve a little bit heavy.[00:08:05] – What’s new in NativeScript Over the last 6 months or a year, the team’s focus has been performance, tooling, and plug-ins.Performance:In the last release, specifically, NativeScript 3.0 was shipped back in May. That release is really the combination of profiling over the NativeScript source-code based on how fast your apps start up, how you can render your UI, etc. There is a cost to working with NativeScript because we are letting you write your source code in JavaScript. The team’s effort has been in really optimizing how fast you can paint your UI’s, how fast you can transition from one page to the next, the startup time, etc. One of the performance penalties that NativeScript has is because you’re using JavaScript, there is one step that truly Native apps don’t have. Specifically, Angular is not necessarily known for being the world’s smallest JavaScript framework. But Angular is being known for being very tool able. So the team shipped a Webpack plug-in that helps you reduce the footprint of your app, which means faster start-up times when you’re using Angular with NativeScript.Tooling:The other thing that’s related to tooling with NativeScript is the command line interface. You build NativeScript apps with the command line interface. The team is working on adding some more visual tooling, more like a companion to the CLI. There are problems that visual tooling can solve like how do you build your icons? How do you deal with splash screens? How do you deal with some of these Native configuration files? There is a thing called NativeScript Sidekick that can help you with some of these tasks. There’s an early beta out now.Plug-ins:The team purposely try to keep NativeScript core light, trying to keep our footprint small. TJ encourages developers, on your own team, and the NativeScript community to do that to your plugins because the NativeScript plug-in ecosystem explodes over the last few months. There are somewhere over 500 plug-ins. Their new plug-ins market place is plugins.nativescript.org/ that shipped several months ago. Now, they’re trying to work to add some consistencies to the plug-ins and adding some documentation around as well.[00:13:25] – NativeScript 3.0 upgrade and compatibility with NativeScript 2.0It’s like Angular 2.0 to Angular 4.0 in a sense that there are few breaking changes but for most apps, it’s going to be fairly transparent or fairly trivial to update. It had some breaking changes with NativeScript plug-ins and one of the main reasons that they bumped the version number up is part of that performance changes to specifically render your interface faster. They also have to change their layout mechanism and some of the API with the NativeScript visual tree. Those are things that are unlikely to hit your common app because you’re probably just coding using their Angular components, in which case, you don’t necessarily need to know what’s going on under the hood. The team also worked with the plug-in authors of the top 30 or 40 most downloaded plugins out there to make sure that they were absolutely ready to go for the launch date for 3.0.If you are getting trouble with the upgrade, you can reach out on their forums. They’ve been trying to tackle these issues when they come up.[00:15:30] – Communication, upgrade, breaking things, and bugsProgress, as a company, haven’t done project quite like NativeScript before. It’s a project that’s completely open-source and completely free. They want to give people some freedom to of experiment and build their own things. But they try to be as transparent as possible on what we’re trying to do and reach out for feedback.They have a NativeScript Slack channel, which has a lot of people in there. They’re the first point of contact when making changes. And for the actual upgrade process, they try to actually put a good effort to get plug-ins where people have put on a considerable amount of effort into them.[00:17:35] – NativeScript 4.0Debugging:If you’re a Visual Studio Code user, you can now just directly do this step debugging directly within the debug tab in VS Code for your completely Native iOS and Android apps. The team also launched support for the Chrome developer tools for NativeScript but they’re only available at a very limited capacity right now. Right now, in the Chrome dev tools, the console works and you can see network request but it’s not the full experience that you’d expect if you’re using those tools for web apps.Visual tree:One of the big pinpoints when it comes to learning NativeScript is learning how to build a visual tree with NativeScript. You can mess with CSS in your web apps, you can play around with layouts, play around with colors, etc. That’s possible to break that to NativeScript as well.Performance:The other big thing is again related to performance. We’ve got a lot of efforts going on at the moment, specifically, around start-up time. I mentioned we shipped a lot of performance-related things for NativeScript 3.0 but most of those were focused on the runtime experience – how fast we can paint your UI, how fast we can paint more complex Native user interfaces. We’re not turning our attention more to just how fast we can start-up your app and what sort of things we can do to optimize that and bring that number down as much as possible. A lot of that involves how can we fight with web configuration files to get exactly what we want, what are the best ways to reduce the number of files we’re using, use whatever we can to reduce that bundle size.The last that’s related to toolings is some of the visual tooling that we have. They think they can bring some fairly powerful behavior to NativeScript developers. In the past progress, they've had some premium tools for working with mobile apps that let you do things like build apps in the cloud. Say, you are a Windows developer and you want to build iOS apps, we have some premium tooling that could do that today. We think we’re going to be able to bring that to the open-source version of NativeScript, sort of make that work with directly within the NativeScript CLI.[00:21:15] – Store on distribution of appsWith NativeScript, things are going to work exactly the same as if you’re building things from the ground up with Xcode or Android Studio. NativeScript CLI spits out the Native app package - that’s .apk file for Android and .ipa file for iOS. You just head out to the Native stores and actually register your apps and use those stores as the distribution model to get your app out to your users.There are certain people, especially companies, that don’t need to distribute their apps publicly. Think an app that you need your internal people to have, maybe they’re sales rep, maybe they’re doing an inventory job. In Progress, they sell some of the tools that you can use to distribute your apps locally to users. Because it’s generating those exact same Native binaries, once you have that, you can use any iOS or Android distribution model that you want to use.[00:22:30] – Start-up performanceOne of the big performance advantages that Native apps have is you don’t necessarily have to deal with a network. In terms of media files, a web app might need to worry about your initial load of image assets or video assets. But with Native apps, you have the ability to package that in the file.The specific cost when it comes to start-up time is not getting JavaScript from the network. The cost is actually the registration of your JavaScript code with v8 or JavaScript core. It’s the same reason that there’s a cost for that in the browser if you feed Angular into v8. There’s a cost that it will take to be able to parse that thing and run with it.[00:25:30] – Lower cost for low-powered devicesTJ has zerBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

AiA 147: Codelyzer and Static Analysis Tools for Angular with Minko GechevThe week on Adventures in Angular features panelists Alyssa Nicoll, Shi Resnick, Lukas Ruebbelk, and Charles Max Wood. The special guest this week is Minko Gechev who is here to discuss Codelyzer. Minko is currently working on a start up. Angular JavaScript is the programming language that excites him the most.How do you work in a start up and still have free time?He tries to find an overlap between the work he's doing in the startup and work he does in his spare time. This is why he had previous work that was completely Angular (Angular Seed). This startup is more complicated because the overlap isn't as much.What is Codelyzer?       Last year, he worked on the Angular Style Guide. He thought it was a good idea to have an automated way to verify a given project that follows the Angular Style Guide. He built on top of that and built Angular and provided similar style checks on top of templates, Angular CSS Styles inside of the components, and the Angular expressions inside of the templates. Codelyzer is a tool for static code analysis for Angular applications.How is it used?                                               It can be used as a set of rules on top of tslint. You install it with mpm. Then tslint performs static analysis and verifies whether the source code follows some style guidelines that our team has agreed upon. When Codelyzer is used, we can also analyze the templates on Angular applications. After that, you can confirm it follows these rules by running tslint on top of the entire project.How many of the default tslint rules do you agree with?Minko states that that is a lot of tslint and Angular rules that align and that he agrees with most of them. He does admit there are some he finds annoying, such as specific semi colon rules. Overall, he believes that if the team has agreed upon the rule, it is following in order to avoid arguing.What do you recommend as the best way to add Codelyzer to a project that started without it?He thinks you should add one rule at a time. All the wordings will be fixed one by one, eventually fixing the entire project. He has also started working on style analysis on top of the application, which is performance analysis. He doesn’t know what data the application will process. But he still considers that a given component will have performance if it has a huge -- in the template. So static analysis we can find such templates and eventually warn the users about eventual performance issues that are possible.How hard is it to add or change in Codelyzer? It might be slightly harder compared to tslint because there are more things that can be statically verified. In Tslint there's a visitor pattern. There is a classical design from the Ganga; it is used for the reversal of syntax 3 of a Typescript code. So when you implement the visitor pattern, you visit a specific construct, verify whether the name follows some guidelines. It is pretty much the same thing in Codelyzer but you can also implement the same visitor pattern for visiting the template of the component. Currently, the project has more than 20 contributors. It looks complicated but not if you spend 30 to 40 minutes looking at the code.What was the motivation behind going deep into Angular? The style was easy for static (automated) verification. This way saved a lot of time from code reviews. Code reviews still have to be performed, but at least can skip the verification from style guides because they can be automatically done.He likes compilers, it is the front end of a compiler: analyzing Syntax 3 part of a compiler itself interesting algorithms. There is another rule from Codelyzer being worked on that isn't completely stable yet. It is to find out which styles are actually used inside of the template. Codelyzer can find out some of the styles that are no longer applied to some of the styles within the template. This is not ready yet but it will be ready in a couple of configurations.Is the idea of searching through of finding either redundant or non-used style, is this something Codelyzer's doing for the very first time (no one has ever done it) or are there tools that this would replace?For Angular, there is no other tool like that. JavaScript or HTML may be close. The Browser can do that.If I want to write a rule do I take the abstract syntax and tell it what to look for? How does that work?You can’t learn it by heart, so I usually copy and paste the existing code and then modify it. It is a standard typescript rule so you need to provide an abstract rule; you'll need to provide the visitor. If the rule is super complicated, you need four visitors.Are you relying on tslint to break things down into tokens and the abstract syntax and then doing the work from there? Yeah. I did some extensions of tslint. Just extending tslint because it would have been too much work to create something from scratch. He is relying on tslint’s error reporting.So in order to set this up on a CI machine, it needs to be able to run node and install some mpm packages?Yes. Run node, install tslint, install Codelyzer and have this rule directory with the Codelyzer rules inside tslint.Is there a visual proof for knowing what the rule does? There is documentation on codelyzer.com/rules.Picks: Shi:Reflect APIDriving on the right side of the roadMinko Gechev Alyssa:Apple Airpods:https://www.apple.com/airpods Crutches Lukas:iPhone 7+ portrait mode: https://techcrunch.com/2016/09/21/hands-on-with-the-iphone-7-plus-crazy-new-portrait-mode/Vulfpeck-1612: https://www.youtube.com/watch?v=jRHQPG1xd9o Charles:Angular Dev Summit www.angulardevsummit.com Minko:Pixel: https://madeby.google.com/phone/Angular IO: https://angular.io/Philip Wadler’s Monads for Functional Programming: http://homepages.inf.ed.ac.uk/wadler/papers/marktoberdorf/baastad.pdf Special Guest: Minko Gechev. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

AiA 146: 10 Ways to Lose a Developer with Bonnie Brennan and Keith StewartOn today's episode of Adventures in Angular, we have panelists Ward Bell, Alyssa Nicoll, Joe Eames, and Charles Max Wood. We have special guests, Bonnie Brennan of ngHouston and Keith Stewart of CollabNet. The discussion ranges from the Most Common Reason for People to Leave to Mandatory Happy Hour that companies have! Stay tuned![00:01:05] Introduction to Bonnie Brennan and Keith StewartBonnie is an Angular architect at Houston, Texas. She is the founder of ngHouston. She also runs Code Bridge Texas with her daughter. They do free programming workshops for girls. She’s going to be at a couple of conferences coming up. They’re going to AngularMix and FrontEnd Connect with Alyssa.Keith, on the other hand, works for a company called CollabNet as a UI Tech Lead. He is working mostly on UI’s for DevOps-related products. He is also a frequent panelist on the ngHouston Meet up broadcast that Bonnie runs and a curator on ngDoc.io with Alyssa and Joe.[00:03:20] – Most common reason for people to leaveIf Bonnie has to narrow down, she thinks it’s the tech stack. Some companies have a lot of legacy code that needs to be maintained but at the same time, when you are a developer who spends a lot of time on emerging technologies, you want to be working on this new stuff that you’re learning.While working on this course on how to find a better dev job, Charles surveyed people on Skype or the phone. They feel stuck and not moving ahead.[00:10:50] – In the culture, if you’re not a performer, then, you’re not trying hard enough?Joe thinks that we have this problem in this industry that if you are not going to be blogging and speaking at conferences, then, you just don’t belong. Ward also thinks that you don’t have to be a performer to contribute to a great development environment. But for Bonnie, being a performer is not exactly about getting up on stage. It really is about caring enough.Alyssa tells about the gradient of the type of person. There’s a person like, “Okay, this is just a job for me but I still take pride in my work.” But if you’re in the mindset of “Hey, I have kids or I have a wife outside of this. But I’m still giving it my all while I’m here.” Then, it’s perfectly reasonable. Keith also tells about the two different types of people. The generalists, the folks who are on the bleeding-edge, they don’t necessarily master one of those, and the other folks who get really good at one particular thing that they’re working on.Ward cites an instance where you’re in an enterprise and you have a lot of very important legacy systems that need a person who cares about the legacy stuff. You can’t have a company that has all people who have to be on the bleeding-edge all the time.[00:18:55] – Type of developers that companies want and how to keep themWard mentions how professional growth is important. The opportunities for people to work on the leading technologies is not always something that every company can offer but they can sprinkle these opportunities here and there. It can be done but if it’s not, there are things that you can do with some of the legacy applications to make them more palatable to work on.Charles suggests to companies to show the developers that you care, you are listening. It’s on the roadmap and you’re going to get there.[00:22:55] – Is boss on your list of Ways to Lose a Developer?Bonnie can’t think of the time that she has left because of her boss. But the company culture is an important thing because however, the upper management feels about culture, that’s going to trickle down.One issue about Charles’ boss is that he is very controlling. Another issue is he was specifying the requirements for the application and he wasn’t very good at staying consistent with it. They wind up building one thing but gets angry with them because they hadn’t built what he wanted, even though it was exactly what he specified.Bonnie also had a situation similar to Charles where the project requirements kept changing while she was writing the code. If you feel like you’re going to work to be frustrated again, it doesn’t matter what technology you’re using, it doesn’t matter how you like the rest of your co-workers, eventually, you’re going to burn out.[00:27:00] – Not being paid enoughWhen you’re not making a whole lot of money, Bonnie thinks it can be a big deal but it’s not the biggest issue. For Keith, if he would be weighing two companies, he’ll also choose the company with the good tech stack instead of the company which pays a little higher. But Ward thinks that it is a privilege to be in an industry where even in the low-end of the salary rank, you tend to be pretty comfortable.[00:29:55] – Effective ways to show your appreciation to a developerBonnie refers to an instance when the boss gives credit for a developer in a meeting on how he did a great job on a feature. And on the flipside, the worst kind of boss is the boss that says, “Look what I did.”But Keith finds it a difficult question because it might be different for other people. Some people like to be called out in a meeting and say, “You did a good job.” But some folks would like that to be a little more behind the scenes. Or some folks might be looking for a bonus instead. So you might be able to read your people.For Alyssa, she likes the boss who regularly checks in even if it’s not a pat on the back because it just shows that they care about the process. Ward speaks of the boss who asks your opinion on an important decision, technical or otherwise.[00:37:40] – RecruitmentKeith never likes the recruitment process of companies which bring a lot of people in and give them coding exercises on a whiteboard. So they built a small application that’s similar to the application that the folks will actually be doing.[00:41:05] – Remote vs. working in an officeAlyssa loves being remote. She mentions she has ADHD so she was distracted in an office setting. It’s important for her to set up her environment to be more productive. Bonnie also has been working remote for 3 years now. It used to be difficult to communicate but now, we can just use video call.But Keith finds people more engaged in a meeting when it’s in person. An office space can add a lot of value to a team. Ward points out that you can also be distracted as well by working remote. In Google, they all work in the office. Even though they have open office plans, sitting right next to each other, they trust the people that they can do well in that environment. People put on headphones when they’re really focusing on something.[00:53:20] – Mandatory happy hourCompanies which have a snack room, ping pong table, foosball can contribute to company culture and make it a much more attractive place for developers. But Alyssa gets scared a little bit when programmers go overboard and sometimes you’re not into it as much as they are.PicksWard Bell- Progressive Web Apps (PWA)- https://www.google.com.ph/url?cad=rja&cd=1&esrc=s&q=&rct=j&sa=t&source=web&uact=8&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DcmGr0RszHc8&usg=AFQjCNFteiHS7s7K1wYiwwm9_OlD9BsM1A&ved=0ahUKEwiWj_3m6vvUAhVLUbwKHcSeDjMQtwIIJDAAJoe Eames- https://www.google.com.ph/url?cad=rja&cd=2&esrc=s&q=&rct=j&sa=t&source=web&uact=8&url=https%3A%2F%2Fwww.netflix.com%2Ftitle%2F80103734&usg=AFQjCNHF57izk0IQJ8XmF1Ay63ML83JpRg&ved=0ahUKEwjcxtny6vvUAhUBxbwKHYkrAbgQFggwMAE- Keith StewartCharles- Angular Dev Summit- https://www.google.com.ph/url?cad=rja&cd=3&esrc=s&q=&rct=j&sa=t&source=web&uact=8&url=https%3A%2F%2Fwww.amazon.com%2FCamelBak-53843-Eddy-Water-Bottle%2Fdp%2FB01787PW8W&usg=AFQjCNETAQ4PYgXgV_UqLnJdxO5nvn38HA&ved=0ahUKEwjDjYT_6vvUAhWHTrwKHUJMBCcQFggvMAI- https://www.google.com.ph/url?cad=rja&cd=2&esrc=s&q=&rct=j&sa=t&source=web&uact=8&url=https%3A%2F%2Fwww.amazon.com%2FExtreme-Wireless-Speaker-Blue-HX-P430BL%2Fdp%2FB00CDGSNPS&usg=AFQjCNGcC6MiTlBLxq7gRuqMCjOP4b753Q&ved=0ahUKEwjQwdOR6_vUAhVGwbwKHfN1BbcQFggpMAEBonnie Brennan- https://www.pluralsight.com/courses/angular-2-reactive-forms- https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/- https://twitter.com/bonnster75- https://www.youtube.com/channel/UC3cfVUpgrO5TK6cvH04ieSQKeith Stewart- https://medium.com/curated-by-versett/building-maintainable-angular-2-applications-5b9ec4b463a1- https://en.wikipedia.org/wiki/Rogue_One- https://twitter.com/TheKeithStewartSpecial Guests: Bonnie Brennan and Keith Stewart. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

AiA 145 Why I’m Still Betting on Angular with Shai ReznikOn today’s episode of Adventure in Angular, we have panelists Alyssa Nicoll, Joe Eames, along with Charles Max Wood. We have a special guest Shai Reznik from Hirez.io, a website and video web development course series that mixes information with a few laughs. Today we are figuring out why Shai is still betting on Angular. It’s a fun show, we hope you check it out!Why are you still betting on Angular?Shai has been getting this question a lot. He tells us about working on Angular courses for his website hires.io He has two courses out so far, first being a course on Angular basics, a second course on Why Angular? Shai suggests that picking a framework is essentially gambling. He also gave a talk “Why I’m betting my future on Angular 2,” focused on the non technical reasons that he is sticking with Angular. If you teach someone without experience about web development and ask them to pick a framework without guidance it’s a disservice. Once that person has gained experience, then they can choose on their own.Shai’s Decision MethodAt HiRez.io he had to pick a specific framework. Shai has been working on comparing different frameworks for years, including React and ViewJS. He adds that when you see talks or documentation on framework, you’re seeing a showcase of the best parts. It isn’t until you work with it that you find the quirks and issues. Part of what he did to learn the frameworks were to simulate real life scenarios. He also came up with a set of requirements to help him. The main question being “Does it handle scaling?” He found that React leans more towards libraries while Angular is more of a framework. It comes down to integration. Building your own framework from a library can be a good practice if you want to become a more professional JavaScript developer. Shai suggests that its like building your own computer instead of buying a brand new one. The issue is with JavaScript, the updates come weekly and so building your own framework from a library comes with a cost. Developed frameworks tend to handle that level of integration for you.Less Mental Overhead with AngularCharles adds that Angular allows him to make things without worrying about when to use things like Redux or Mobix and it just works. There is less mental overhead along with available expertise because everyone is generally using the same stack. React can have a shorter learning curve, and both communities have about the same number of proficient users as a resource. Both seem to be equal in those ways. Having choices keep things on the innovative edge. Shai talks about the Angular team and how innovative they tend to be. Aimee adds that their attitude about Angular is also genuine, giving an example of when they are approached with issues, they are open to discussing them.Dependency InjectingViewJS is also a framework. The one thing that is missing is dependency injection ,which in Shia’s opinion is one of the biggest selling features of Angular. It allows for easier code testing and in Angular 2 it has been improved even more. He adds that some developers can be lazy and not write tests and for them it wouldn’t matter. Angular also prides itself as a JavaScript framework, and so no typescript. When working on a big team, being able to see immediately where things are broken is very helpful and is a plug for Angular.Evolving communitiesJoe says that Angular has a great community and he like Angular because of his familiarity. Shai adds that all three are great solutions. Angular just happens to fit well with his current situation. He had to switch from old technologies or communities because they got stuck in the past. ViewJS is picking up popularity and in a couple years will have a strong community. He adds that while the community and support system is great, it’s not the main reason he stays.Will the market for Angular courses be sustainable?Shai mentions that it seems to come in waves, a certain technology will have hype come in every six months or so. That hype leading to adoption and then months later the adoption rate drops down. This is something he witnessed with Angular 1 in 2012 with 1.0. It took 6 months to a year for people to learn about it and adopt it. It wasn’t until 2013 or 2014 when React came out, early adopters jump on React and started creating hype for it. Some of React solved the pain points for Angular. We are getting to the end of the adoption wave of React. It’s hard to tell how long React and ViewJS will be popular. The new Angular will bring a new wave and peak in demand in a year or so. Shai adds that this is his bet and he may be wrong. He sees that it handles small apps or big apps, having the ability to scale and that is important. Charles adds that Ruby on Rails had a similar cycle. Ruby has stop being in the media as much because it’s becoming stable, but the community is strong there either way. Shai mentions that he doesn’t see these frameworks like React going away soon because they solve real issues. If you zoom out from the discussion, these frameworks are all part of a big JavaScript family. Listens can comment on this episode on what frameworks they’ve choose and why.PicksJoe NGDoc.io PersistenceAlyssaHiRez.ioCharles Rush Revere and the American Revolution Palto Alto Firefighter’s Hot Sauce Shia Futur Youtube Decorators HiRez.io Links HiRez Twitter Shai Twitter Special Guest: Shai Reznik. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode of Adventures of Angular we’ve got panelists Ward Bell, Joe Eames, Alicia Michael, John Papa, Charles Max Wood, and our special guest Shayne Boyer. Shayne is a Senior Developer Advocate at Microsoft and on the Azure team. The last time he was on the show was Episode 082 of Adventures in Angular and we talked about getting started with Angular 2. Today we are going to talk a bit about Angular and Azure. Stay tuned.[3:12] Talk about offerings with Azure.There is a connotation that if you want to use Azure you have to use .NETThat is not the case.Large part of Azure runs linux.There are over 170 type products that Azure offers.noSQL databases, postgres, mongolDB, Azure Cosmos, Azure functionsIt’s more than .NET and VMs.Things you can do this type application are things like - Deployment to web front end, putting apps in Docker container and pushing to container service, scaling those apps etc etc.[5:23] Put your app in Docker container?Talking about just front end. Just the web application.Putting it into a container and deploying the container into a linux instance or web app on Azure.[6:13] Why is it a good thing to use Docker for this kind of thing?Example. NGX for front end services, you can’t NGbuild using ClI do an NGBuild get the disc folder and throw that to a web application service like IAS or Node and have that application just service. Deep linking wouldn’t work.Instead you would want to package something like an express server that requires NodeJS. Then something to handle deep linking. You can easily package that in a container and push it to the cloud and be able to control it without worrying about infrastructure.Essentially it’s the app that has been written as well as the server that serves that app.You can choose the base it runs on. I.e. Node 6 instead of 8. Etc etc.Control those in the container so any time you pull it down it has those same settings.Often developers assume versions of services are the same between the developer and the services used like a cloud service and when it’s not, things break.The concept of “works on my machine” is actually true now. How it works for you, will be exactly how it works where ever you push it.You can set up the version of Node you want, the settings how you’d like, test it on your own machine and when you push it to providers like Azure, Heroku, AWS, etc, it will run the same on all those providers.Takes away complexities when testing.[9:39] Outside of Docker, what other things does cloud bring to the table?Serverless offerings.Takes away issues with - worry about building a node server to serve my app. Building API to serve the data. Building Infrastructure behind the server and deploying it.Building and deploying pains reduced as well.[10:57] “Wait wait, serverless?”It’s the new buzzword.There are servers underneath.Don’t have to worry about infrastructures or the servers themselves.Just write the function.Function will return the data to controller service built in Angular. Just have to build the Javascript (or python, and C#, java is coming) in the portal or in Github, and it’s just the code to run the function.No need to worry about the types of servers, VMs, operating systems, patching or scaling.It will scale based on what the capacity demand it needs.Event driven - event queues, message queues, etc.[13:20] Simple endpointsScalability at endpoint level.Previously when writing APIs on the backend, typically you’re concerned with scaling that API application.Endpoints typically scale at the same level.Serverless functions scale at that typical API level.Paying only for usage.[15:30] How do you orchestrate between the services?Just because you spread things around doesn’t mean it’s better.It’s important to realize that breaking assembly or dll files down into smaller dll files don’t change things much.Minimizing what it takes to think about when it comes to handle and configure a server running the services.It’s easy as “Here it is, go run it for me Azure!”[20:12] How does this relate to angular developers?Be careful about over complicating the ‘concept count’ Having too many systems, front end, back end, VMs, Docker, etc. To many things to learn or to know to get it done.Easier to write API and serverless. So then it’s just Javascript on the front end. Much easier.[21:58] Someone brand new to Azure, what should they try out?Azure functions is a great place for Javascript or Angular.Typescript is coming as well.Understanding it’s just a backend.Learning to connect to a database, or have a static file.Routing, proxies, etc are all built in Azure.[23:13] What JavaScript engine does it support?Chakra Engine.ES 5ES 6Support for TypeScript recently announced. Coming up.Node 8 is now available on Azure service platform.[25:04] More on the portal.The portal is one of the largest typescript platforms available right now.The portal is not the only option.Strong CLI experience.Making VMs and web applications and all products can be done with CLI.If you like CLI then start there.[26:54] Creating a quick web appIf you want to create a new web application.Simple as  AZ web create Pass the name of applicationpass the locationin a few commands you can create an appSet it up to deploy from the GitHub RepoFrom there it’s just checking in code and it’s getting the deployment from the CLI pipeline.Write it, check it in, deploy.[27:32] Do you have articles or videos that people can jump to?Did a course in deploying an angular app using GitHub git AzureTalks about how to hook up Azure web app instance to a GitHub repo.It’s easy as checking in code, no worries about the concept count and complicated setup.[28:45] Integrates with Docker and Visual Studio CodeThere is an Azure extension for VS Code that allows you to push all of your code.Demos available to learnHas great extensions for Angular too.[29:28] Simplifies or eliminates complications on the back end, does it also help on the front end.Don’t have to worry about scaling my static site. Data is what makes it scalable.Serverless experience - hitting databases, doing computations, working on triggers or WebHook from other parts of your business.Azure function can listen to WebHooksAzure can aggregate backend in serverless functions.Has database offerings to store data.Infrastructure for hosting Node applications and Node APIsAzure does not = .NET[31:19] How does someone get involved and try it out?Go to Azure.com and try it free.Try the Azure functions portal free as well.Plenty of free experiences from the platform.The tuts and walk-throughs for almost any of the platforms or languages for Azure.PicksJoe John Papa’s course on Angular CLI course. NG Doc. WardTroy Hunt used Azure functions to fight DDOS attacks article. AlexaCharles Serverless framework. NPM serverless. Angular Dev Summit (Now free) Shayne Keyvo Smartlock Angular 2 app to Azure using Git play by play course. Docs.microsoft.com LinksAzureSpecial Guest: Shayne Boyer. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

AiA 143 Kendo UI with Burke Holland Charles Max Wood and Burke Holland discuss Kendo UI. Burke Holland is on the Developer Tools Division at Progress. The discussion ranges from the introduction of Kendo UI to tests used for Angular apps. Stay tuned to discover what Kendo UI can do for you![00:01:50] Shutout for Angular Remote ConfCharles will be picking speakers really soon so get your ticket at the early bird price.[00:02:15] – Introduction to Burke HollandBurke Holland is working for Progress in the Developer Tools Division on the Developer Relations Team. They work on products like NativeScript, KendoUI and all the developer tools that Progress makes, which is mostly UI components and mobile frameworksQuestions for Burke Holland[00:03:00] – What is Kendo UI?Kendo UI is a Javascript UI library. It has open source components (Kendo UI Core), but it’s primarily commercial. It’s more on heavy lifting text scenarios like grid that has sorting and filtering, drag and drop, grouping, scheduler, robust calendar interface, pivot grids, Gantt charts, data visualizations. We’ve rebuilt Kendo UI from the ground up using Angular components. It’s the Kendo UI Core Angular that was released last January.[00:08:00] – How are Kendo UI elements pulled for use into an app?There’s a private npm repo that you would just pull in and bundle some of the widgets together. Inputs can be a drop down list, a combo box, autocomplete, etc. Using npm and install -@progress/kendo-angular-input, you get all of those inside your npm modules folder. We and the team are pushing to move to the public npm repo so that people don’t have to register for an account.[00:13:00] What about mobile development? Does this work with NativeScript?Kendo UI widgets do not work inside of NativeScript for mobile apps. However, we are looking for a possibility of merging their NativeScript UI library with Kendo UI so that you can build a website, a progressive web app, a NativeScript app, etc.[00:16:00] Do you also have to pull in some CSS?Kendo UI has their own CSS that is based on Sass. It has a theme builder to customize themes that you can pre-select from. Integration for Bootstrap 4 was also built because Kendo UI does not have a layout system so it doesn’t provide you with any grid system for layouts or for responsive design.[00:19:00] Do you just import it into my app and then use the components, is it that simple?It is recommended to use Angular CLI to use Kendo UI’s components and import it into an app. First step is to create a new project with the Angular CLI because Kendo UI is designed to work with it. You can work with SystemJS, instead, but it requires some tweaking. Next, you would need to add the private npm repo which registers the end point on the terminal. And then, npm-install to install the components. After that, you can include them in your app module file. Import Kendo grid from @progress/kendo-angular-grid. Then, you can import them into your module so you use it in your templates.[00:23:00] – Can I tie a chart to a grid, update the chart and have the grid change?Everything that Angular updates, Kendo UI just updates too. If you buy two components to the same array and you update that array, both of those components are going to update because they’re using Angular’s binding.[00:24:00] – Does Kendo UI work with the older versions of Angular?Kendo UI works with Angular 1.x. By the way, AngularJS means Angular 1.x. Meanwhile, Angular means Angular 2 and up. Directives for Angular 1.x wrap Kendo UI components.[00:28:00] – When moving my component in AngularJS to Modern Angular, do I have to include both of those in the product?I can’t provide any guidance here, other than I wouldn’t do that. If you migrate, you’re going to be firing up a new project but you should be able to move your application logic over pretty well. However, we still have this idea of services and injection and those things are transferable. And then, when you use Kendo UI components, the only thing that’s really transferable there is the configuration settings.[00:29:00] – How do you write tests if you’re testing Angular app? Are there other things that you should be testing?That would mean there’s some sort of functional testing and unit testing. If we’re talking about unit testing, you should just test the way that you would normally test Angular. For functional test, you need a functional testing tool like Selenium or Test Studio.[00:30:00] – Is there anything else that people need to know about Kendo UI?We’ve got a lot of other components coming so stay tuned on that. We’re also working on some React stuff. We always love to get feedback. We have a github repo.PicksBurke Holland:Server listAzure Functions ChallengeMedium article on Samsung’s weird emojiTwitter at @burkehollandTwitter of Tara Z. ManicsicCharles Max Wood:Serverless library in npmAWS LambdaSlack room for the podcast (adventuresinangular.com/slack)Angular Remote ConfGet A Coder JobStack for Slack automationMemberPress on WordPressSpecial Guest: Burke Holland. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today's episode, Adventures in Angular features Angular and Electron with Ryan Chenkie. Ryan is a product owner, blogger, and JavaScript trainer. His interests in working on Angular with other technologies led him to using it on desktop apps with Electron. Tune in!Special Guest: Ryan Chenkie. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

How long do you wait to load regular Angular? Today's episode features Migrating a Large Angular 1.x App to Angular 2+ with Ciro Nunes. Ciro is a frontend engineer at CrossEngage. He appeared on episode 89, where he talked about Angular CLI. Now, he shares how they migrated an app and the challenges they faced. Tune in!Special Guest: Ciro Nunes. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood and Ward Bell discuss NgDoc.Io with Joe Eames and Alyssa Nicoll. NgDoc.Io is a website that contains all Angular-related content in the community. It includes sample projects and apps. It's a great resource for everyone who wants to learn about Angular. Tune in! Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

On today’s episode, Charles Max Wood, Lukas Reubbelke, Ward Bell, Joe Eames, and Alyssa Nicoll discuss ng-conf Roundup. Stay tuned as they share their meaningful experiences in attending the conference! Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.