Adventures in Angular

Panel: Joe EamesAlyssa NicollShai ReznikSpecial Guest:Maxim KoretskyiIn the episode of Adventures in Angular the panel welcome Maxim Koretskyi to talk about Change Detection in Angular. Maxim explains that he enjoys reverse engineering and working with Angular. Maxim talks about working with Angular and React to figure out how the Change Detection works on both platforms. Furthermore,  Maxim mentions that all his findings and on his blog on Medium.In particular, we dive pretty deep on:

• Why Change Detection and what is most interesting about it?
• Debugging
• Reversing engineering in React and how Change Detection works
• The difference in how Change Detection work in Angular and React
• Diving into the source code for Angular 2.
• The component is angular?
• Directives
• Life Cycle hooks
• Change detection runs for each view notes
• View notes are a directive
• Loops and subsequences
• Example View at 24:00
• Intercepting the mouse click
• Microtasks
• How does Angular know that something has changed?
• Compliers
• Dynamic components

•and much more!Links: 

• https://blog.angularindepth.com/@maximus.koretskyi
• https://medium.com/@maximus.koretskyi
• NG  Zone

Picks:  Shay Reznik

• Interview with Igor
• Show Time - I am Dying Up Here!
• Angular Connect

Alyssa

• Warld Domination

Joe

• Castle Raven Loft
• Scott Adam - Win Bigly

Maxim

• Angular Indepth
• Curiosity
•  

Special Guest: Maxim Koretskyi.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

Panel: Joe EamesAlyssa NicollCharles Max WoodWard BellAaron FrostIn the episode of Adventures in Angular, the panel’s discussion topic is about upgrading Angular. The panel covers preparation and the difficulties of getting started with the upgrade service. Notably, basic users do not understand the process of the updated with simple applications. Also, playing with the idea to rewrite your applications in Angular directly, or do we just upgrade?In particular, we dive pretty deep on:

• NG upgrading - preparation with a module loader.
• It is a mess to get started
• Look at you Angular JSJ, and ask what am I gaining by doing this?
• Can you write it in a different Angular directly?
• How long till am I off of Angular JS or Backbone?
• Application is written in Angular JS
• Legacy documentation for updates
• Annotating and bundling
• Angular solves the performance stuff
• Having someone in charge of it will have a smooth transition
• Convenient function with upgrading
• Upgrading big applications vs. Rewriting.
• Typescript
• Migration
• Upgrading components
• and much more!

Links: 

• NG Conf. 2018

Picks:Ward

• NG Atlanta
• Neutron Star Collision

Alyssa

• NG Atlanta 

Joe

• Migrations
• NG CONF. 

Aaron

• Neutron Star Collision
•  

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

Panel: Joe EamesAlyssa NicollCharles Max WoodWard BellSpecial Guests: Aaron FrostIn the episode of Adventures in Angular, the panel speaks with Aaron Frost. Aaron is a return guest and works at SaltStack. In this episode, the panel and Aaron ask questions about the upcoming NG Conf. 2018. The panel discusses the many exciting upcoming topics discussions,  events, and speakers.Importantly, Aaron and Joe give a preview of the theme of the event. Aaron mentions, for this year, NG Conf. is going to be about what the community wants to hear about. This is based on recent surveys taken by developers and new coders. These particular details extend into to specific speakers and the level of expertise for discussion.In particular, we dive pretty deep on:•NG Conf.  - Grand America  - April 18-20, 2018

• Kid Conference
• 2 whole days of workshops
• Same intro as last year
• Schedule of workshops and event speakers
• Parties and food
• Activities
• Theme  - around “Ready Player One” - 80s
• Who is coming and who is speaking
• Number 1 thing to come away with -  NGRX
• #3 - Actually Animation?
• Non-Angular topics? AI, Electro.
• Ticket Sales  - Waitlist raffle,

•and much more!Links: •SaltStack •NG Conf. 2018 •github.com/aaronfrost/ama•github/bryanforbes•Grand America Booking 

• Ready Player One 

Picks: Ward•BackpackingAlyssa•NG Atlanta  Joe•Steve Harvey -  Jump 

• One Man Star Wars Trilogy

Charles•The Banished of Muirwood

• Just code

Aaron•Can’t Make This Stuff Up •White Velvet Cake

• Prayers for all recent disaster

Special Guest: Aaron Frost.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

Panel: Joe EamesShai ReznikAlyssa NicollCharles Max WoodSpecial Guests: Bryan ForbesIn the episode of Adventures in Angular, the panel speaks with Bryan Forbes. Bryan has been working for Sight Pen a consultancy company that works with JavaScript and many others platforms. Bryan mentions that SitePen is well known for their Dojo toolkit. Bryan talks about testing Angular with the intern tool.Bryan and the panel dive into the testing of all sorts old and new tools and compared them to the Intern Toolkit.  Bryan talks about the different kinds functions that are needed to compile and implement testing. The discussion covers tools like Testacular, karma, Protractor, and Leadfoot, and Intern, as testing kits for Angular.In particular, we dive pretty deep on:

• What intern a testing tool and how it is used.
• Protractor and how this is different as a testing tool
• Cross browser testing
• Testacular turning in to Karma
• Unit testing end to end.
• Using typescript
• Promise shim
• How to bring Intern into your Angular App
• Assertion libraries
• Intern working with Karma
• Intern is client-side product, not a SAAS product
• Protractor
• Webpak plugin to integrate Intern
• End-to-End testing
• Leadfoot testing
• and much more!

Links: 

• SitePen
• Bryan Forbes
• Leadfoot
• Testacular
• Karma
• Protractor
• Bryan’s blog
• @bryanforbes
• GitHub/Bryan Forbes
•  

Picks:Shai

• Angular Connect - EG Game Show

Alyssa

• Destiny II

Joe

• The Behavior Gap

Charles

• Profit First 
• MoviePass.com

Bryan

• Using Intern With Angular 
• Read!

Special Guest: Bryan Forbes.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

Panel: Ward BellJoe EamesShai ReznikAlyssa NicollCharles Max WoodSpecial Guests: Paul Spears and John BaurPaul and John both work at Oasis Digital Solutions in St. Louis. Paul is the lead curriculum author for the Angular Bootcamp course.  Both, Paul and John teach Angular to companies, public, private, and offer consulting to their customers.Paul and John speak about specific ways they approach teaching. Both teachers have a wide range of experience in teaching Angular. Paul and John speak about the most current best practices of teaching and learning Angular.In particular, we dive pretty deep on:

• Teach newcomers Angular, the proper approach.
• Starting fresh with the Bootcamp as an already experienced developer.
• You should know the basics of JS, HTML, CSS, etc.
• Enterprise background?
• Using dot net with Angular
• How do you bring people along with single page apps, as they have different backgrounds
• CLI and tooling to help get people moving along with Angular
• Where do people get hung up?
• EG Module
• Dumping everything in one module or Lazy Routing
• and much more!

Links: AngularBootCamp.com@bps3@johnrbuarOasis Digital SolutionsPicks:Shai

• Angular In-Depth
• Angular Performance Checklist
• Angular Basics 1

Alyssa

• Active Power Mode

Joe

• Better Off Ted

Charles

• Low Carb Cheese Cake

Paul

• Angular Performance Playground 
• Stencil JS 

John

• Terraforming Mars

Special Guests: John Baur and Paul Spears.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

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 pack
• Using Node Server
• Encounter problems with the CLI
• Manually making sure production line of code do not change
• and many more

Links

• Web Pack
• CLI
• Heroku

Picks:WardThe Annual Procrastination Conference Angular in Memory Web APIFences AlyssaJoe

• Plural Sight Course  - Migrating from Angular JS to Angular
• Sara Cooper 

Charles

• Angular Dev Summit
• Zapier
• Angular Materical NG Conf. 

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become 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 Pages
• Jekyll
• yarn
• Core JS
• Zone JS
• TypeScript
• Visual Studio Code
• Angular CLI
• SystemJS
• Webpack
• Fuse-box
• Angular Universal
• ts-node
• urish.org (Uri's website)
• firebase hosting
• ng2-fused
• preboot
• angular-iot

 Special Guest: Uri Shaked.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become 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/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.

03:26 - Style Guides

• John Papa's Angular 1 Style Guide
• John Papa's Angular 2 Style Guide Draft

08:57 - Naming Conventions11:51 - The Growth of the Angular 1 Style Guide14:41 - Style Guide Dislikes21:26 - Multiple Recommendations

• CTRL

23: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/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become 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 Israel
• Rick and Morty

Links

• www.gilfink.net
• www.sparxys.com

Special Guest: Gil Fink.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.