Podcasts about ui router

JSJ 269 Reusable React and JavaScript Components with Cory House On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in! [00:01:35] – Overview We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done. Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue.  [00:04:50] – Browser support issue The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components. Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.    [00:14:20] – Standards are dead No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library. Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about. [00:17:05] – Libraries making reusable components There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well. As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there [00:21:20] – Why opt for reusable components Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse. As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.   [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder. We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough. Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later. [00:36:00] – Reusable components The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously. We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue. [00:42:45] – Component development on teams Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need. [00:47:45] – Mobile to web crossover Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application. [00:50:00] – Challenge Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?" Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember. Picks Cory House Creating Reusable React Components on Pluralsight Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss Joe Eames UI-Router Persistence Aimee Knight Ask HN: People who completed a boot camp 3+ years ago, what are you doing now? NgAtlanta Charles Max Wood Upwork.com JSJ 269 Reusable React and JavaScript Components with Cory House On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in! [00:01:35] – Overview We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done. Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue.  [00:04:50] – Browser support issue The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components. Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.    [00:14:20] – Standards are dead No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library. Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about. [00:17:05] – Libraries making reusable components There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well. As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there [00:21:20] – Why opt for reusable components Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse. As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.   [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder. We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough. Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later. [00:36:00] – Reusable components The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously. We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue. [00:42:45] – Component development on teams Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need. [00:47:45] – Mobile to web crossover Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application. [00:50:00] – Challenge Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?" Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember. Picks Cory House Creating Reusable React Components on Pluralsight Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss Joe Eames UI-Router Persistence Aimee Knight Ask HN: People who completed a boot camp 3+ years ago, what are you doing now? NgAtlanta Charles Max Wood Upwork.com

JSJ 269 Reusable React and JavaScript Components with Cory House On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in! [00:01:35] – Overview We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done. Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue.  [00:04:50] – Browser support issue The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components. Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.    [00:14:20] – Standards are dead No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library. Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about. [00:17:05] – Libraries making reusable components There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well. As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there [00:21:20] – Why opt for reusable components Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse. As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.   [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder. We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough. Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later. [00:36:00] – Reusable components The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously. We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue. [00:42:45] – Component development on teams Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need. [00:47:45] – Mobile to web crossover Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application. [00:50:00] – Challenge Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?" Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember. Picks Cory House Creating Reusable React Components on Pluralsight Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss Joe Eames UI-Router Persistence Aimee Knight Ask HN: People who completed a boot camp 3+ years ago, what are you doing now? NgAtlanta Charles Max Wood Upwork.com JSJ 269 Reusable React and JavaScript Components with Cory House On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in! [00:01:35] – Overview We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done. Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue.  [00:04:50] – Browser support issue The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components. Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.    [00:14:20] – Standards are dead No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library. Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about. [00:17:05] – Libraries making reusable components There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well. As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there [00:21:20] – Why opt for reusable components Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse. As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.   [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder. We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough. Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later. [00:36:00] – Reusable components The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously. We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue. [00:42:45] – Component development on teams Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need. [00:47:45] – Mobile to web crossover Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application. [00:50:00] – Challenge Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?" Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember. Picks Cory House Creating Reusable React Components on Pluralsight Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss Joe Eames UI-Router Persistence Aimee Knight Ask HN: People who completed a boot camp 3+ years ago, what are you doing now? NgAtlanta Charles Max Wood Upwork.com

JSJ 269 Reusable React and JavaScript Components with Cory House On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in! [00:01:35] – Overview We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done. Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue.  [00:04:50] – Browser support issue The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components. Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.    [00:14:20] – Standards are dead No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library. Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about. [00:17:05] – Libraries making reusable components There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well. As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there [00:21:20] – Why opt for reusable components Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse. As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.   [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder. We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough. Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later. [00:36:00] – Reusable components The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously. We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue. [00:42:45] – Component development on teams Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need. [00:47:45] – Mobile to web crossover Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application. [00:50:00] – Challenge Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?" Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember. Picks Cory House Creating Reusable React Components on Pluralsight Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss Joe Eames UI-Router Persistence Aimee Knight Ask HN: People who completed a boot camp 3+ years ago, what are you doing now? NgAtlanta Charles Max Wood Upwork.com JSJ 269 Reusable React and JavaScript Components with Cory House On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in! [00:01:35] – Overview We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done. Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue.  [00:04:50] – Browser support issue The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components. Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.    [00:14:20] – Standards are dead No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library. Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about. [00:17:05] – Libraries making reusable components There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well. As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there [00:21:20] – Why opt for reusable components Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse. As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.   [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder. We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough. Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later. [00:36:00] – Reusable components The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously. We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue. [00:42:45] – Component development on teams Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need. [00:47:45] – Mobile to web crossover Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application. [00:50:00] – Challenge Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?" Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember. Picks Cory House Creating Reusable React Components on Pluralsight Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss Joe Eames UI-Router Persistence Aimee Knight Ask HN: People who completed a boot camp 3+ years ago, what are you doing now? NgAtlanta Charles Max Wood Upwork.com

3:00 - Introducing Victor Savkin Twitter Website 3:30 - Making migration gradual 4:45 - NgUpgrade 6:20 - What is Router/Upgrade? How is it used? 9:15 - Iterative and Incremental upgrading 11:35 - UI Router 13:20 - Making a gameplan for migrating Blog post 16:00 - UI Router versus Angular Router 20:05 - Angular Upgrade Static 21:40 - Why should you upgrade your Angular modules? 25:30 - Reviewing the steps 26:30 - Step 3: Migrate individual components and services to Angular 2 28:50 - Leaf components 29:50 - Hashtag routing 31:00 - Step 4: Divide the routes between the Angular 1 and the Angular 2 routers 35:00 - Step 5: Removing Angular 1 from your setup 36:10 - When should you do a progressive migration? 39:05 - Predictions for the future of upgrading 40:40 - Performance implications of upgrading 48:00 - Deployment options 51:05 - Narwhal Technologies Picks: Rogue One (John) Top Coders Angular 2 cross-country workshops (Joe and John) Ng Conf (Joe) Toby Chrome plug-in (Lukas) The Cook, The Thief, His Wife, and Her Lover (Ward) Ng Cruise (Alyssa) Egghead.io (Alyssa) Newsfeed Eradicator (Charles) Echo Dot (Charles) Ethics in the Real World by Peter Singer (Victor)

3:00 - Introducing Victor Savkin Twitter Website 3:30 - Making migration gradual 4:45 - NgUpgrade 6:20 - What is Router/Upgrade? How is it used? 9:15 - Iterative and Incremental upgrading 11:35 - UI Router 13:20 - Making a gameplan for migrating Blog post 16:00 - UI Router versus Angular Router 20:05 - Angular Upgrade Static 21:40 - Why should you upgrade your Angular modules? 25:30 - Reviewing the steps 26:30 - Step 3: Migrate individual components and services to Angular 2 28:50 - Leaf components 29:50 - Hashtag routing 31:00 - Step 4: Divide the routes between the Angular 1 and the Angular 2 routers 35:00 - Step 5: Removing Angular 1 from your setup 36:10 - When should you do a progressive migration? 39:05 - Predictions for the future of upgrading 40:40 - Performance implications of upgrading 48:00 - Deployment options 51:05 - Narwhal Technologies Picks: Rogue One (John) Top Coders Angular 2 cross-country workshops (Joe and John) Ng Conf (Joe) Toby Chrome plug-in (Lukas) The Cook, The Thief, His Wife, and Her Lover (Ward) Ng Cruise (Alyssa) Egghead.io (Alyssa) Newsfeed Eradicator (Charles) Echo Dot (Charles) Ethics in the Real World by Peter Singer (Victor)

3:00 - Introducing Victor Savkin Twitter Website 3:30 - Making migration gradual 4:45 - NgUpgrade 6:20 - What is Router/Upgrade? How is it used? 9:15 - Iterative and Incremental upgrading 11:35 - UI Router 13:20 - Making a gameplan for migrating Blog post 16:00 - UI Router versus Angular Router 20:05 - Angular Upgrade Static 21:40 - Why should you upgrade your Angular modules? 25:30 - Reviewing the steps 26:30 - Step 3: Migrate individual components and services to Angular 2 28:50 - Leaf components 29:50 - Hashtag routing 31:00 - Step 4: Divide the routes between the Angular 1 and the Angular 2 routers 35:00 - Step 5: Removing Angular 1 from your setup 36:10 - When should you do a progressive migration? 39:05 - Predictions for the future of upgrading 40:40 - Performance implications of upgrading 48:00 - Deployment options 51:05 - Narwhal Technologies Picks: Rogue One (John) Top Coders Angular 2 cross-country workshops (Joe and John) Ng Conf (Joe) Toby Chrome plug-in (Lukas) The Cook, The Thief, His Wife, and Her Lover (Ward) Ng Cruise (Alyssa) Egghead.io (Alyssa) Newsfeed Eradicator (Charles) Echo Dot (Charles) Ethics in the Real World by Peter Singer (Victor)

--- Support this podcast: https://anchor.fm/angularair/support

We talk to Chris Thielen about the history of the Angular UI router, what the team is working on for the upcoming 1.0 release, and how they plan to support the router in Angular 2 and even React. The post TechCast #103 – Christopher Thielen on the Angular UI Router appeared first on Chariot Solutions.

Why Ionic 2 is going to rock your world Panelists: Olivier Combe, PatrickJS, Josh Moont (fromAngularConnect) Guests: Adam Bradley, Brandy Carney, Tim Lancina, Mike Hartington#main-content Intro Ionic 2 Beta How is it going? Any numbers you can give us for adoption rates so far? https://www.npmjs.com/package/ionic-angular Just switched from ionic-framework npm to ionic-angular https://www.npmjs.com/package/ionic Any notable apps published with Ionic 2? Navigation Create own router How does it work on the web? Work with deep linking? Work with UI Router or Component Router in the future? Jeff note: mention working with universal Cool stuff Ionic team has been working on: Ionic Creator Started off with subset of functionality. How has it gottenbetter over the past 4 months? Works much better Cleaned up a lot of bugs Added more components and customizations Way better now than 4 months ago and more polished,stabilized Who is the target audience for this? Two target, drastically different Developers to speed up boilerplate code dev and focus oncoding hard stuff Designers/Marketers: Starting up an app to create aclickable prototype to hand off to devs  In the future, can you create simple apps and publishwithout opening an editor? Ionic Playground Really awesome, but when will it be available for 2.0? Recent changes and Roadmap Agnosticism Initiative Why change name of package from ionic-framework toionic-angular?  Will there bean ionic-react? Have you looked at Touchstone? Angular 1 bindings? How does Web Workers and Serverside Rendering fit in?  Why change webpack to browserify? Has build complexity with webpack caused problems? What other types of issues have people run into? Ionic Market - brandy How is the adoption? Over 70k unique sessions/mo Ionic View - Tim What is the diff with TestFlight? Do you plan on supporting Windows Phone? What is the status of CodePush-like deployments? How does that work? Will Apple potentially crack down on this eventually?  Themes / SASS Sweet spot for Ionic apps? Apps that require heavy use of the camera? Memory intensive apps? How do you compare yourself with NativeScript? (Olivier)  Tips& Picks   Jeff Whelpley (not a troll FYI, lots of Ionic love in this podcast) ReactNative Radio episode 6 - React Native vs Hybrid https://devchat.tv/react-native-radio/06-developing-with-react-native-vs-hybrid Josh Moont AngularConnect - just announced our workshops including anIonic workshop with Sani Yusuf called Building Mobile Apps With Ionic 2 - see www.angularconnect.comfor more info Olivier Combe Upgrading Your Application to Angular 2 with ng-upgrade: http://blog.rangle.io/upgrade-your-application-to-angular-2-with-ng-upgrade/ Universal Windows App + Angular 2 : https://github.com/preboot/angular2-universal-windows-app Angular 2 RC milestone: https://github.com/angular/angular/milestones Brandy Windows phone support https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#windows-mode Mike ionicworldwide.herokuapp.com Adam Help contribute to Ionic Timionic-native --- Support this podcast: https://anchor.fm/angularair/support

Angular UI-Router - Of all the libraries for building big applications, ui-router is one of the most used of them all. Join us as we talk with two of the maintainers to this invaluable Angular router. Guests: Chris Thielen and Nate Abele Panelists: Olivier Combe, Aimee Knight, Scott Moss, Carmen Popoviciu, PatrictJS, and Jeff Whelpley Picks/Tips: Chris - Microsoft typescript playground, Webstorm EAP + tslint Nate - Tips: Don’t do destructive operations in enter/exit hooks (UI Router), Value objects / Object.freeze(). Picks: Ramda, Help me add epic instrumentals to my Spotify Work Playlist, Feedback on Angular 2 support in UI Router Olivier - Angular 1 and Angular 2 Co-existence, Looking for co-contributors on ocLazyLoad & angular-localforage Kent - Tips: Write adapters for your dependencies. Picks: MDN Aimee - Angular Remote Conf - Use coupon code "angularair" for 20% off. Works for both group and individual tickets! Tip: Read the RFC! Looking at OAuth2 right now Patrick - Tip: Ask Questions, Picks: Angular 2 Survey Results Jeff - Medium, GetHuman Ideas Angular Air is a video podcast all about Angular hosted by egghead.io instructor Kent C. Dodds. Please visit the Angular Air website (http://angular-air.com) to see upcoming and past episodes. Also be sure to follow Angular Air on Twitter and Google+ to stay up to date with future episodes. Also, all episodes are on the YouTube channel as well. --- Support this podcast: https://anchor.fm/angularair/support

Check out RailsClips on Kickstarter!! 01:41 - Craig McKeachie Introduction Twitter Blog The JavaScript Framework Guide by Craig McKeachie 02:07 - Routing UI-Router: Why many developers don’t use AngularJS’s built-in router 03:48 - Essential Characteristics of a Router 04:53 - Emphasis on the URL 10:03 - UI Router > Custom Directives, Includes, or ngSwitch Ember interview with Tom Dale, a Robust Framework Nested Views / Child Routes 12:06 - Nested Routes How to make Angularjs nested routes? 15:09 - Boxes: “Boxes in boxes in boxes” ng-view 19:44 - Navigation and Code Maintenance 25:28 - Routers in Other Frameworks and the Angular 1.4 Router The new Router for AngularJS by Rob Eisenberg at ng-europe 2014 Rob Eisenberg: Angular 2.0 Router Scenarios   27:28 - Page Lifecycle Support 37:44 - State Object URL Routing ng-conf News The Adventures in Angular Crew will be doing a LIVE panel at ng-conf on Friday, March 6th, 2015 during lunchtime at noon! Picks ng-conf (John) Angular U (John) ng-vegas (John) The Way of Kings (The Stormlight Archive, Book 1) by Brandon Sanderson (Joe) Craig McKeache's Blog Post - UI-Router: Why many developers don’t use AngularJS’s built-in router (Ward) Ira Glass on Storytelling, part 1 of 4 (Ward) RailsCasts Kickstarter (Chuck) Developers’ Box Club (Chuck) Ruby Remote Conf (Chuck) A Pirate's Adventure ~ Treasures of the Seven Seas (Craig) The Ginormous Unstoppable Angular Resource List of Angular Resources (Craig)

Check out RailsClips on Kickstarter!! 01:41 - Craig McKeachie Introduction Twitter Blog The JavaScript Framework Guide by Craig McKeachie 02:07 - Routing UI-Router: Why many developers don’t use AngularJS’s built-in router 03:48 - Essential Characteristics of a Router 04:53 - Emphasis on the URL 10:03 - UI Router > Custom Directives, Includes, or ngSwitch Ember interview with Tom Dale, a Robust Framework Nested Views / Child Routes 12:06 - Nested Routes How to make Angularjs nested routes? 15:09 - Boxes: “Boxes in boxes in boxes” ng-view 19:44 - Navigation and Code Maintenance 25:28 - Routers in Other Frameworks and the Angular 1.4 Router The new Router for AngularJS by Rob Eisenberg at ng-europe 2014 Rob Eisenberg: Angular 2.0 Router Scenarios   27:28 - Page Lifecycle Support 37:44 - State Object URL Routing ng-conf News The Adventures in Angular Crew will be doing a LIVE panel at ng-conf on Friday, March 6th, 2015 during lunchtime at noon! Picks ng-conf (John) Angular U (John) ng-vegas (John) The Way of Kings (The Stormlight Archive, Book 1) by Brandon Sanderson (Joe) Craig McKeache's Blog Post - UI-Router: Why many developers don’t use AngularJS’s built-in router (Ward) Ira Glass on Storytelling, part 1 of 4 (Ward) RailsCasts Kickstarter (Chuck) Developers’ Box Club (Chuck) Ruby Remote Conf (Chuck) A Pirate's Adventure ~ Treasures of the Seven Seas (Craig) The Ginormous Unstoppable Angular Resource List of Angular Resources (Craig)

Check out RailsClips on Kickstarter!! 01:41 - Craig McKeachie Introduction Twitter Blog The JavaScript Framework Guide by Craig McKeachie 02:07 - Routing UI-Router: Why many developers don’t use AngularJS’s built-in router 03:48 - Essential Characteristics of a Router 04:53 - Emphasis on the URL 10:03 - UI Router > Custom Directives, Includes, or ngSwitch Ember interview with Tom Dale, a Robust Framework Nested Views / Child Routes 12:06 - Nested Routes How to make Angularjs nested routes? 15:09 - Boxes: “Boxes in boxes in boxes” ng-view 19:44 - Navigation and Code Maintenance 25:28 - Routers in Other Frameworks and the Angular 1.4 Router The new Router for AngularJS by Rob Eisenberg at ng-europe 2014 Rob Eisenberg: Angular 2.0 Router Scenarios   27:28 - Page Lifecycle Support 37:44 - State Object URL Routing ng-conf News The Adventures in Angular Crew will be doing a LIVE panel at ng-conf on Friday, March 6th, 2015 during lunchtime at noon! Picks ng-conf (John) Angular U (John) ng-vegas (John) The Way of Kings (The Stormlight Archive, Book 1) by Brandon Sanderson (Joe) Craig McKeache's Blog Post - UI-Router: Why many developers don’t use AngularJS’s built-in router (Ward) Ira Glass on Storytelling, part 1 of 4 (Ward) RailsCasts Kickstarter (Chuck) Developers’ Box Club (Chuck) Ruby Remote Conf (Chuck) A Pirate's Adventure ~ Treasures of the Seven Seas (Craig) The Ginormous Unstoppable Angular Resource List of Angular Resources (Craig)