Adventures in Angular

Panel: WardAlyssaJoeCharlesIn this episode of Adventures in Angular the panel tackles the topic of build systems for Angular. Since the building process is subjective to experience and options. The panel talks about different ways to build based on their own qualification and prior knowledge of things like web pack, system JS, and many more.Joe, Ward, Alyssa, and Charles discuss how Web Pack is used, and individual problems they encounter in areas of the CLI and other areas. Ward and the team discuss guides to the CLI and deployments. Also, some talks about working backward to figure issues out. Also the key four lines of code.In particular, we dive pretty deep on:Issues with Web packUsing Node ServerEncounter problems with the CLIManually making sure production line of code do not changeand many moreLinksWeb PackCLIHerokuPicks:WardThe Annual Procrastination Conference Angular in Memory Web APIFences AlyssaJoePlural Sight Course  - Migrating from Angular JS to AngularSara Cooper CharlesAngular Dev SummitZapierAngular Materical NG Conf. 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.

Tweet this EpisodeThis is a talk given by Uri Shaked at the recent Angular Dev Summit. If you'd like to be notified about the next Angular Dev Summit, go to the Angular Dev Summit website and register for an attendee ticket.Uri is a Google Developer Expert in Web Technologies and Angular. He also works for BlackBerry.Uri shows us how to build a static website using Angular and other web technologies.Links:Github PagesJekyllyarnCore JSZone JSTypeScriptVisual Studio CodeAngular CLISystemJSWebpackFuse-boxAngular Universalts-nodeurish.org (Uri's website)firebase hostingng2-fusedprebootangular-iot Special Guest: Uri Shaked. 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.

Tweet this EpisodeShow Notes in ProgressSpecial Guest: Gleb Bahmutov. 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.

03:26 - Style GuidesJohn Papa's Angular 1 Style GuideJohn Papa's Angular 2 Style Guide Draft08:57 - Naming Conventions11:51 - The Growth of the Angular 1 Style Guide14:41 - Style Guide Dislikes21:26 - Multiple RecommendationsCTRL23:48 - Making Arbitrary Choices29:54 - What is the state of the Angular 2 style guide?34:32 - Pipes37:43 - What will be in Angular 2?41:21 - Angular 2 Quickstart 49:15 - Levels of Proficiency for AllPicks The Warriors (Ward) Tiny Desk Concerts (Lukas) SNARKY PUPPY (Lukas) Chris Welsh: Microsoft is adding the Linux command line to Windows 10 (John) RAML (John) Listening (Joe)  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 154: Angular Animations with Gil Fink This episode of Adventures in Angular features panelists Ward Bell, Joe Eames, and Charles Max Wood. Special Guest Gil Fink is on the podcast this week to discuss Angular Animations. Tune in to find out more about this topic! [00:01:05] Introduction to Gil Gil is the CEO of Sparxys, which is a small consulting company that he owns in Israel. He has been working for Microsoft for nine years in web development. He wrote the book Pro Single Page Application Development. Currently, he is also speaking in conferences and consulting for companies in Israel. [00:02:06] Introduction to Angular Animation Angular Animation is a model that has been used since Angular 2.0. In the full version it received it’s own model and expanded from Angular core. It is based on Web Animation API and gives a specific language to write Animations declaratively using Typescript in the components. It is also easy to write. Animations are not used to make web pages a “swirling vortex of text.” It instead is something that is used to capture the attention of the user to let them know what is new or where they should pay attention. It gives the user a better overall experience. For example, how to show a user they have a validation error: use a red blinking border. It does not have to be sophisticated or complicated, but can be if that is what is wanted. [00:05:48] Web Animation API Animation mobile in Angular has been available for roughly two years. There is a function called animate which gives the ability for an application to be animated. Web Animation API runs animation for you but is not simple. [00:07:35] What kinds of things do you see people doing with Animations? A common thing for developers is to make Animations make transitions between pages in SPA. Animations also can be used for appearing, or fading in or out elements. More transitions can be made for panel, where they slide from one side to the other, which grabs the attention of the user. SVG and Canvas also are used for Animations by developers. [00:10:33] Starting with Animations Most developers are in a hurry to write their first animations. First, they have to understand animations because understanding concepts are helpful. Reading examples of what CSS 3 and Web Development API are can be a helpful tool. Gil suggests MDM and Mozilla to gain a better understanding. After grasping these concepts, read about how to use the Angular Animation model and how it was created. The Angular Animation model is actually not needed to create Animation in websites – you can use CSS 3 animation and Web Development API. [00:14:15] How do I add Angular Animations to my Angular app? Grab a browser Animation model, which is part of Animation.Create a trigger. This is something that triggers the effect or Animation.Create a state, move from one state to another state using the API.Once you have a trigger, write inside the web component in the templates.Take the trigger, which is a function, and pass the function in component declaration to the Animations property. [00:18:09] When and where should you be using Animations? There needs to be a balance when using Animations. Gil’s rule is not to use experts to understand where to put them. Not everything should be filled with Animations. He prefers to start without them and then add according to specs or expert guidelines. Animations can be distracting and should be there to help the user. [00:21:43] Ideas on How to Use Animations in Applications For example, you can use Animations for models. If a model appears at once, it might shock the user. Instead, make sure that they appear smoothly. It should indicate something is either happening or has happened. If everything happens at once, it may not be as effective for the user. [00:25:25] At what point in the process do you decide this component needs Animation? Gil works with experts in the companies that he works for that have guidelines for the components he creates. Because of this, he creates what they want him to create. [00:28:44] Is there a way of testing these animations are happening? Yes, you can use tools like Protractor, Selenium, and Test IO. Test IO gives the option to record a screen. These tools won’t help understand animations because they can’t test animations. They can check for existents of a class name. You can use a manual tester for quality assurance or have a person check for you. To really see if an effect is working you have to just see it working. Picks              Joe: Go see an eclipse Charles: Secrets of the Millionaire Mind by T.Harv Eker You are the Placebo by Dr. Joe Dispenzo Gil: Web Animations Deep Dive with Angular JavaScript IsraelRick and Morty Links www.gilfink.netwww.sparxys.comSpecial Guest: Gil Fink. 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 153: Conferences and Speaking On this episode of Adventures and Angular the panelists are Alyssa Nicoll, Joe Eames, John Papa, Charles Max Wood. They discuss attending and speaking at conferences. Tune in to listen to their opinions![00:01:23] Benefits of Conferences Joe believes that attending somewhere between two and four conferences is good for a developer’s career. The minimum should be attending one conference a year. Some companies believe that people are wasting time because they are taking time away from work. They are of the mindset that they could learn the same information from a video. But John looks at it as developers learning how to communicate. If developers use their time well, they can potentially solve problems and find ideas they have never heard of and can learn how to implement them at work.John believes the benefits to the developer verses the company are different. Developers could meet a potential employer who would pay you more than your current employer. For companies, if people want to leave, forcing them to stay may not be the best thing to do. Forcing someone to stay could lead to low productivity, which is not the best thing for the company. The more educated the employee the happier they will be, and happy employees stick around.Charles believes that the reason you go is for things you can’t do at home. These are interactions, new thought processes, and mindshare. Companies that don’t give their employees chances to go to conferences are missing out on reasons why they hired them in the first place.[00:09:00] Why Attend Conferences?If the goal of attending conferences is to try to be better than everybody else, there are better goals. Go to conferences for yourself and your own education. Go to be the best developer that you can be.Before you get to a conference ask - What are the problems you’re trying to solve at work? How do you keep up? How could a conference help me? How are people feeling about the technology? If you cannot find out information online, it makes it a huge asset.Charles once heard a financial expert say you should get three to five times out of anything you do as you put in. Be sure to make the conference worth it.[00:13:40] – New Trend at Conferences There has been a noticeable trend at conferences for smaller groups to not watch sessions. They do not go to workshops, listen to speakers, or seemingly network with other developers. Instead, they just go to the parties with their friends. This could be a reason employers feel it is a waste of time and money for employees to attend conferences. Alyssa still thinks that people will take away something even by simply being around like-minded individuals.[00:15:50] Companies Perspective on ConferencesCompanies will want people who have experience with speaking at conferences. They will want those people who have influence in the community they have been speaking to. But sometimes, once the company hires them, they do not want them to speak at any more conferences. They get the job because of the extra things they do, but now they want people to focus on the job and don’t want to risk people finding another job.People need to have a conversation about the values they and their new company have to see if they match. To do this they need make sure to ask questions to see if something they value, such as conferences, will be allowed to continue once they are employed. Some companies may not want them to go to or speak at conferences. Any company’s core value is to do business and make money. If they are not doing that then they cannot employ people. They may think that letting people attend conferences is holding up their production.People need to be sure to think about the concerns the company has when negotiating. For example, there was an employee that wanted to speak at conferences, but was so valuable to his company that he could not leave. That led him to train someone who could handle things while he was gone. People have to earn trust from their employer. Some people do not think about how to do this; instead they give away swag from the company or tell secrets while speaking at conferences. This is a way to lose trust and potentially be fired.[00:27:18] Alternative PerspectivesSome companies will send and pay for people to go to conferences; no questions asked. They will be happy that their employees were invited to represent their company. There may be rules about what they are allowed to speak about.One thing to do as an employee is to always clarify if the contract is the same before going to speak at a conference. Make sure to continuously ask, “does this still fit for me?”[00:30:45] Developers and Conferences As a developer, attending conferences is good for your career. Should attend two a year. There are no negatives. Could never talk to another person, and still have benefits from sitting in the room.[00:31:54] Becoming a SpeakerWhat do you want? All developers want different things. Some want to write great software, have a job, contribute, learn, but do not want to build a reputation. Some feel like they can make a difference and get excited about speaking. There’s not a right or wrong as long as you get what you want out of your career. Speaking is valuable and a good way to give back to the community.  [00:36:20] How do you get into speaking?  Start speaking at meet ups. Talk for five-minute intervals. Afterwards ask people to give feedback and do not take it personally. It will help to make you a better speaker. It is easier to know what you need to improve.Meetup.com helps you to find places to speak. Contact the organizer of a meet up and ask to speak. Two to three times a year hire a speaking coach. Look at this as a perspective of a professional who can give you advice to get better. It is easier to have feedback rather than self-evaluate. This also teaches how to get better at communicating with people. Picks: Joe:Valerie KittelAlyssa:NG Houston  John:Do not speak at the audience; bring them on the same journey you went through when you learned that thing you're speaking about. Charles:Angular Dev Summit 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 152: Multirepo vs Monorepo with Jeff Whelpley and Kushal DaveOn today's episode of Adventures in Angular, we have panelists Ward Bell, Joe Eames and Charles Max Wood. We have special guests, Jeff Whelpley and Kushal Dave. The discussion ranges from the organization of code bases to the benefits of using Monorepo vs Multirepo. Tune in![00:01:45] – Introduction to Jeff Whelpley and Kushal DaveKushal is CTO at Scroll, a start-up. Before that, he was at Foursquare, Chartbeat, Google, and IBM. He has worked in a lot of monorepo code base. Although he actually has experience working on a lot of Multirepo situations.Jeff is the CTO of a small startup in Boston called GetHuman that helps people with customer service problems. He has been on Adventures in Angular a couple of times before. He has also been in a couple of other podcasts before, as well as in the open-source community.[00:03:20] – Introduction to the issueTypically, when you’re working in just one or two people team, you don’t really have that many issues centered on dev process, coordinating changes between each other, and trying to figure out the best optimal way to organize your code. Most of the time, you understand the entire code base because you’re working with everything. It gets to be a much different problem once you get to have a larger team. In essence, everything is starting slow down because of different overhead related to the process that was needed in order to make sure got quality changes. You basically have to spend a lot of time and thought around your developer process, how you structure your code, how you physically setup, and organize your entire code base.[00:06:20] – How to organize your code bases?When Kushal worked at Google, everything is in a single giant repository. There are one or two exceptions for client code and some infrastructure things. It allowed people to feel that they could change any of the code and it made it easy to keep everybody in sync with the state of the code. There is some sort of workflow and process things that you have to change in order to get that right. Probably, the biggest one is trying to keep the repo from working in long running branches because things start to diverge. That was the model of Foursquare too.[00:08:15] – How do you run all of the CI across everything?The answer changes to different sizes. At Scroll and for most of the time that Kushal was at Foursquare, it was efficient to run all the builds on every commit. If you just have one mega build that just runs continuously, that’s good enough up until 30 or 40 developers. Once you hit that size, there’s a variety of build tools out there that you can use and understand the structure of your code base. Once you’ve used one of these build tools, declaratively indicate which artifacts depends on which libraries, and what the full dependency thing is, you can build only the relevant CI’s. You can decide whether this change only touches this binary or this test.Chuck also like the approach of having everything in master. If it was experimental, it would still go into master and their CI would effectively run the different builds with the different feature flags. If what you did broke something that somebody else was working on in a process, you could just adjust it midstream.[00:16:00] – Gatekeeper processThe gatekeeper process protects the whole code base but at the same time, it’s in the layer of bureaucracy.We’ve been reviewing every piece of code before it’s allowed to land in master. Everybody on our team commits multiple times a day to master. All the changes, as much as possible are really small, especially the feature flag check. In that world, there is this bureaucracy. Hopefully, it’s not holding you up too much. The flipside of that is when you’ll feel really confident that you didn’t break anybody who depends on you and you’re going to have to revisit this change a month from now.For the past 9 months or so, Jeff tried a bunch of different configurations. He tried monorepo and other configurations from the other end of the spectrum - many small packages. As he was interviewing people with their different setups, they’ve all encountered the same types of problems. Regardless if you’re using monorepo or not, as long as you’re trying to keep your changes small and specific, and implemented quickly, it can alleviate any other pains.[00:22:10] – Guard railsThe guard rails are just the reviewers. For us, every change that’s getting reviewed means that in some extent, there’s a human check on that. I’m not sure if you can but I certainly know that Reviewable and Fabricate both offer sort of wide range of configuration options. I can imagine the world in which you can programmatically keep people from landing changes that didn’t have that level.In Github, there are guard rails. That actually helps the reviewers. It’s reassuring to have some technology that this person is associated with this set of boundaries. If you want to step outside of the boundaries, they’re going to have to get some other person who understands the code that’s outside of the line to join in approving that. If their organization is big, this is something that they might have to think about.Jeff advises to really be careful about what you’re doing. Is this a change where you are just bumping version numbers or is this something that you have to change a business logic?[00:28:15] – Allowing different people to upgrade dependenciesThe only way Kushal has ever seen it done is a brutal all-nighter by somebody who has to sit there and get everything working. But one of the things that Google does is they develop a lot of patterns about how to refactor code to make things easier.One solution that Jeff sees is the complete opposite of the spectrum from monorepo. Dr. Gleb Bahmutov is a huge fan of open-source smaller repos - a lot of the mentality of keeping things small, separate and distinct. He’s decided that he’s going to stick in the many repo universe and just create tooling to solve some of these problems. For versioning, he runs this server that detects that a new version has been published. It will automatically try to update it and run all the tests. But according to Kushal, if you have different repos, you can move differently in terms of dependencies but if you’re now out of sync, you may suddenly have incompatible dependencies across what you’re doing. It’s a question of when you want to deal with the problem.Chuck talks about the ways you can get out of sync. With the multirepo, you can get out of sync not just on the dependencies and the build process, but also on the API’s. If you have a module that you’re working on over here and whatever are consuming it on the other side as a driver may not be updated yet so it doesn’t talk properly. Jeff also noticed that with Angular DI, if you aren’t actually using the same version, you run into issues because it has to be the exact same thing at every level or else the injection token is different.[00:36:50] – Develop within Monorepo or develop in a separate repoChuck thinks that it depends. If there are a lot of dependencies and shortcuts that he can take by relying on the monorepo, he will do it on the monorepo like if it auto loads the correct libraries automatically. And then, they don’t have to do a whole lot of setup. If it’s small, independent, and it’s going to move quickly, then, a separate repo may be the right answer.Kushal adds that there are a lot of benefits in doing it in the monorepo. With feature flags, you have the benefit of reviewing it. It also allows you and others to keep up with everyone in terms of breaking API changes, other than having some brutal merge.Jeff will do it in a separate repo. If this an experimental thing, it disturbs people less. It alleviates the notifications that go on. That is why Kushal’s team also built a lot of custom Slack cooks in order to get some notifications tailored to the parts that they only care about.[00:44:50] – How do you work it out so that things aren’t so tightly coupled?There are no circular dependencies between your packages even transitively. As your monorepo grows you may eventually have some tooling that requires that for your build system. Can this layer have this type of functionality? Or does it need to be moved into a new package? It also means it improves your architecture.Kushal’s team is working on Java. This object that users and organizations create can know about each other’s’ objects but the users can never depend back into organizations or vice versa. You can think of the layered model of networking. We have the pure data model objects are not allowed to know anything about the service layer that interacts with the database. The database can know about those model objects. The web tier can obviously know about both the model objects and the service tier because it utilizes both of those.[00:47:30] – How are those relationships defined?They are defined in build files. If you look at Pants or Blaze or Buck, all those build systems have explicit dependency configurations so you can sort of keeping any of those invariants from being broken.  But Kushal’s team just have a Wiki page that lists out the rules. They also have a test that looks for any cycles in any package dependencies.Jeff’s team created a CLI tool that walks down all subdirectories from where they’re running it. It finds all the package JSON in all your subdirectories and it creates the dependency graphs. They haven’t fully moved to a monorepo but they did start to consolidate. They have a couple of larger repos. This tool will see the dependency graph for all the NPM modules and also see the dependencies between the repos based off of the NPM module dependencies.[00:50:20] – Multimonorepo It’s not perfect to have one larger repo that has basically all of the none-deployable codes. Jeff and his team have a separate set of repos for the actual deployable code. They haven’tBecome a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

AiA 151: WebVR with Aysegul YonetThe panel for this episode of Adventures in Angular is Alyssa Nicoll, Joe Eames, Lukas Ruebbelke, and Charles Max Wood. Special guest Aysegul Yonet is here to discuss WebVR and visualizations. Tune in to learn more![00:02:36] Can you really do VR with Angular?Yes. VR is a different kind of API.[00:03:07] Can you give a brief explanation of how Web VR works?Web VR is currently an experimental API. It creates 3D experiences that interact using the gamepad API. Angular and Web VR work together by writing more declarative experiences.[00:04:05] What do you mean by it being experimental?Things are changing quickly. Not all browsers are implemented. It has to be enabled in Chrome, it can be enabled in Firefox, but not all other browsers implement it. A 2.0 Web VR version is being created, which will be similar to the version that is out now.[00:05:05] VR in a Predictable Manner Not enabled in some of the browsers but can check it and leave a message. Once you have an available browser, there is a consistent interaction.[00:06:30] What kind of hardware is required to run the VR experience?VR is now very accessible to everyone because of Web VR. Google Cardboard is one of the cheapest ways. It is around $20. Samsung VR headset is free. Also can purchase cheap hand controls. Developers do not have to go through app stores to release a product, which makes it cheap for them as well.[00:08:30] What are three cases that you see Web VR that could be disruptive?One case is in the education field. Google Expedition is creating an app for teachers to create experiences for students to see different places such as museums. A second case is in the medical world. Web VR can be an amazing pain killer. It has been used in Leukemia patients. For example, kids don’t want to take medication but using VR they can fight the disease itself. A third case is the Smithsonian Museum in DC. Artwork was scanned through VR and 3D experiences created through that.[00:14:35] Where would you recommend we start to try out VR?A-Frame is the easiest to use for beginners. You don’t need to know how to use 3D. It has Angular components. There is also Play, where you can take any experience you want and work off of that. Sketchfab is an app where you can use 3D models. There is also a Google app that takes 360-degree 3D pictures and turns them into experiences.[00:16:44] Would those 3D pictures have sound or just an image?Yes, it does have sound as well.[00:17:52] Does A-Frame have components that you feed data to?It is just like any kind of Angular component. It seems foreign to web developers because you are creating a scene. But A-Frame makes it easy for you: just have to add the objects itself. You have components for a scene.[00:19:14] How do you program the interactions with objects in Angular/Web VR app?Interactions are not the easiest to program. Trying to solve the problem itself. You can take data through the Gamepad API. You can also use Itracking where you look at an object and select it.[00:20:14] How long have you been doing this?Not long - she was “dying to work with WebVR.” She had a chance to work with Play and had fun.[00:21:00] Could I built a desktop app with Electron? Will it work in Chromium? Yes.[00:21:20] Will it work in the embedded Safari or Chrome Views that you get on Android or the iPhone?Not sure. But it can be loaded unto a website and downloaded onto your phone.[00:23:00] Fairly approachable if you have a SmartPhone.MergeVR has a Goggle and Cube. It can create VR experiences for kids. The product is affordable: only $60 for Goggles and the Cube is $20.[00:24:20] How do you test it?Hard to test because it is visual based. There is a Chrome plug-in that helps. The mapping is very mathematical, which is an easy part to test.              [00:25:30] Is there anybody in the WebVR space that you admire?A-Frame team has done a great job. The 3JS creator Mr.Doob has been developing for a long time, before the community there is now. Companies have been using his stuff for years. Brandon Jones, who is implementing WebVR on the Chrome team.[00:34:47] How is VR development different from web development? Other than the interaction, writing the code isn’t all that different. The tool used was created for websites with 3D capabilities. Usability is different. There is an adjustment curve with VR: people navigate VR with a mouse better than with a headset.Picks Lukas:Fantastical AppKetogenic DietKeto Cheesecake Charles:2 Keto Dudes Podcast Keto Clarity by Jimmy Moore Livin’ La Vida Low Carb PodcastKeto Pad ThaiJoe:Rogue One Never build a houseAysegulCardboard Camera App Voices of VR Podcast You Are Not So Smart Podcast Merge Cube LinksTwitter GitHubSpecial Guest: Aysegul Yonet. 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 150: What’s New with Ionic with Mike HartingtonIn this episode of Adventures in Angular the panel is Ward Bell, Alyssa Nicoll, Joe Eames, and Charles Max Wood. The panel talks to special guest Mike Hartington about Ionic. Tune in to learn more![00:02:02] Introduction to Mike HartingtonMike is a developer for the Ionic framework. He helps people succeed on Mobile.[00:02:40] What have you been working on lately?Ionic is currently going through an investigative phase. They are moving things to a vanilla JavaScript state and web component based architecture.[00:03:02] What do you mean by web component based architecture? Throughout all different frameworks (such as Angular, React, Ember) and libraries have a similar concept of a reusable thing. It is a custom element they can ship, which becomes limiting. It only works in their specific framework because the API capability isn’t there. Ionic wants to make something that works in all frameworks.[00:04:27] When you’re talking about web components, you’re talking about the idea of components?No, talking about the web standard itself.[00:05:25] What does this mean for people who are used to the way Ionic works with Angular?When implementing these experiments in new releases, it shouldn’t change for people who are currently using Ionic and Angular; everything pretty much stays the same. There is a slightly smaller payload, but that’s it.[00:06:32] As essentially as Angular developers, we will actually be interacting with an adapter?More or less. There would have a single Ionic Angular package. Everything it needs to have the web components talk to Angular would already be including as soon as you started the entire app.[00:07:16] If I became another kind of developer, we will be able to get the same experience because there will be a way to interact with other web components?Yes, that’s the vision. It was the idea when we first started Ionic. It is easier to implement now than when Ionic first started.[00:09:20] Do you think it is limiting to our creativity as developers? Can still create something new within Ionic and have something more custom to your needs.[00:12:26] If I have something that adapts to something else, is that going to impact performance?It shouldn’t. The code would not be heavy; it would be vanilla JavaScript. It would run outside of your framework. It could run faster because they are default APIs. It allows for an extra layer and everything Angular can do will still work with a web component.[00:15:15] Efficiency and simplicity of web components implementation frees you from having to carry the payload of a general application component framework. Is that where you’re going?Generally. The building time of an app is APIs Makes sense for application development but not controls.[00:16:25] Does this translate all the way up to desktop browsers?Becomes more useful because web components uses browsers own APIs. Overall payload ends up being smaller. Smaller network area users can take advantage and it can be faster if a large desktop application is used.[00:17:35] Is there a direction Ionic has?Ionic understands hybrid technology is going to be around. Some people want distribution through an app and some just want a website. Ionic is catering to both parties. At the end, browser will implement APIs that native devices have.[00:19:00] Do you see a move away from the phone gap approach towards PWAs or do you not know how it will play? Just released the numbers from a developer survey we sent out. There is a healthy mix between people who want a native binary and progressive web apps.[00:19:35] Will Ionic continue doing progressive web apps and splitting the difference?Ionic will continue pushing for progressive web apps.[00:21:00] Ionic and Augmented RealityHe doesn’t know. Has seen a few people that has a HoloLens. In the future, Ionic could possibly use augmented reality.[00:26:54] Intro to Mike at Dev SummitWill speak about Ionic components across multitude of frameworks. How to take advantage of tools that Ionic has to use to create own custom components that work across all frameworks.Picks Alyssa:Sketch Joe:DunkirkEverybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Ward:E-biking through SwitzerlandRöstiThe Founder  Charles:The Millionaire Mind by T. Harv Eke Mike:Diy Nils Spider-Man Homecoming      Special Guest: Mike Hartington. 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 149: Angular, Web Bluetooth, and IoT with Uri ShakedIn this episode, Shai Reznik, Ward Bell, Lukas Ruebbelke, and Charles Max Wood talk to Uri Shaked about using Angular with Web Bluetooth and IoT.[00:02:27] – Introduction to Uri ShakedUri is an Angular GDE from Israel. His Angular Story episode is here.[00:03:21] – Introduction to Hardware with AngularAngular allows you to build web applications that scale quickly. For hardware devices, you need some kind of interface. Instead of a button, you have a mobile app or web application. This is one place where Angular comes into play. Building control panels, etc.You can do this with pure JavaScript or native mobile apps as well.[00:05:20] – Does it run on the IoT device? or on the web?It can do both. You can run Angular on a webserver on a Raspberry Pi or you can use Web Bluetooth to connect to the IoT device.[00:06:45] – What are the advantages of using web technologies?There's no hardware setup. And using Angular Material or Ionic, the UI looks right without spending a ton of time.RxJS allows you to gather sensor data from accelerometers, heart rate monitors, etc. connected via bluetooth.[00:09:20] – The physical webAn IoT device that broadcasts its own URL. You can then interface with the device simply by scanning for and browsing to the device. One example is walking into a room, scanning, and then controlling the lights without installing an app.[00:10:34] – SecuritySecurity is optional on Bluetooth Low Energy. Bluetooth devices used to pair using pin codes and they got set to 0000 or 1234 by default. So now BLE devices don't require it. Some devices add security on top of bluetooth or use the pairing mechanism.Security is an ongoing concern with IoT in general. The devices that Uri has played with don't implement security.Uri actually had an audience member hack into the smart bulb he was using during a demo.[00:15:08] – How do you manage your connection to the device through Angular?Uri uses async/await to manage the promises based functions that allow you to connect to the device. He wraps all of this in a service.The bluetooth terminology used for the functions that manage the device are also called services. Don't get them confused.[00:16:48] – What's the most useful thing you can do with this?Connecting to an EEG headset that measures brainwaves. Uri wants to allow headset owners to perform EEG experiments in the browser. Otherwise, they have to set up a bluetooth dongle and install python and some libraries to make it work. He'd like to make it simple enough to browse to a webpage and click "Connect."He'd like to show the user pictures and then guess which one you're looking at.[00:19:58] – What is the most useless thing you've build with this?Uri 3D-printed a robot and installed an accelerometer into it and connected it to a WebGL based system to show the orientation of the robot.[00:22:32] – How do you get started?You need a browser and a bluetooth device. A smart lightbulb or a robot. You can use your smartphone to simulate a bluetooth device. Uri wrote an Android app that simulates a smart light bulb. Then you can connect the app to your computer's browser and control the smart bulb app from your computer.[00:25:00] – Ward has a proposal for UriConnect lights in your t-shirt to an arduino device and control it from your phone. Web Bluetooth is much simpler than native APIs for Android or iOS.[00:29:45] – Commercial applicationsPhysical web applications and connecting to remote tools and sensors.Smart counters for your electric meter.Jen Looper's blog post on web bluetooth and beacons.The Louvre uses beacons.[00:33:00] – The physical webUri ran a beacon that broadcast his personal site. He took his trash out and one of his neighbors kept getting a notification about his website on his phone.PicksLukas RuebbelkeAntifragileChef's Table on NetflixShai Reznik59 SecondsVolunteering - Ari Lerner teaching prisoners to codeWard BellThe "other" Uri ShakedSmart Coffee MachineYouTube video on telling if someone is lyingUri ShakedWard's yet-to-be-made shirtAngularUP ConferenceWebAssemblyCharles Max WoodData Skeptic podcastLinks@urishakedurish.orgSpecial Guest: Uri Shaked. 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.