Ryan Florence

 “It’s so rare that something actually comes along that really changes how we think about building stuff” - Michael Jackson   Episode InfoShow Notes and TimelineMichael Jackson and Ryan Florence React.js trainingLinks and ResourcesOnline Training CoursesTrainingMentioned in the episodeFollowRelated contentVideo Episode Info  Episode: CW 015 Published: April 8th, 2015 Tags: javascript, reactjs,nodejs,isomorphic Duration: 1:16:34 Updated: 2015-04-11  Show Notes and Timeline  2:40 - What’s special about React.js?   “For me personally, it changed the way that I code as much as jQuery did back in 2008.” - Michael Jackson   “OMG, This is really going to change the way that I work and how much I enjoy my job on a day to day basis.” - Michael Jackson   5:00 - React.js doesn’t care about how you represent your data, models can be simple objects and arrays   “What excites me about React.js is… it doesn’t care about your data model, you just use plain JavaScript objects… For my models I use: array, Object, Number, …” - Ryan Florence   “The new paradigm with React.js is we aren’t observing, we aren’t having a bunch of events, we are just throwing data at functions and then they return descriptions of UI” - Ryan Florence   6:40 - Javascript becomes our templating language   “It’s hard to explain until you start doing it how big of a shift this makes in your user interface development, to not worry about your app over time; you’re not mutating the state of objects over time in your UI components” - Ryan Florence   “We get to use the solutions that JavaScript already provides like modules and scope… we don’t have to wait for the framework’s template language to implement a solution for that” - Ryan Florence    8:25 - React.js, Angular, and Ember are pushing the language forward (ES6) 10:56 - Is React.js differnet from other SPA frameworks? 11:30 - React.js could be a good rendering tool for many frameworks 12:10 - Integrating React.js into existing code is easy without a full rewrite 13:30 - React.js be added to mature apps, not just greenfield apps 14:50 - Angular 2.0 and Ember 2.0 look a lot like and sound a lot like React.js. It is influencing so many other frameworks. 15:30 - Who can use React.js? What types of projects? 19:00 - Server side rendering - Isomorphic javascript 22:30 - React.js doesn’t care where you render - client, server, canvas, etc. 24:00 - Is React.js hard to learn? 25:00 - React.js allows you to code yourself out of problems 26:00 - Smaller API’s are easier to learn 28:10 - What brought Michael and Ryan to using React.js?  For me, one of the most awkward parts about #Emberjs is switching back and forth between Handlebars templates and component code. Any ideas?— Michael Jackson (@mjackson) May 13, 2014  28:45 - Instructure had invested in Ember but were having struggles shipping and learning   “At Instructure, we bet on Ember… we were messing with it for almost a year and kind of weren’t shipping anything…” - Ryan Florence   30:00 - After an hour of using React.js, Ryan wanted to use it everywhere   “After an hour of using React.js, I had my face in my hands and said… I want to use this everywhere” - Ryan Florence   30:45 - A few hours later, Ryan had a router proof of concept up and running   “After two hours I actually had something working, and that probably impressed me the most about React.js” - Ryan Florence   “I was never able to just pick up something as quickly as I was able to pick up React.js and build a router” - Michael Jackson   “Two guys who had no idea what they were doing (with React.js) were able to make something (ReactRouter) that worked and was useful for other people” - Michael Jackson   32:30 - Ryan started throwing his toughest problems at React.js and it handled them great   “Then I just threw all of my toughest problems that I had ever run into as a frontend developer at React.js” - Ryan Florence    33:00 - Everyone at Instructure wanted to switch to React.js after being exposed to it   “At Instructure we had this hack week, I encouraged a couple of my coworkers to use React.js for their projects… every single one of them came back and asked: When are putting this into our stack?” - Ryan Florence   33:20 - Reducing the context switch when developing, JSX 37:26 - React Router and Relay, working with React.js team   “This is something that I really feel that the React.js authors have seriously nailed on the head, they’ll say they care about the community, and then they will show it by listening, participating, and working with us” - Michael Jackson   40:00 - Data fetching improvements 41:00 - Forward thinking attitude using ES6 42:01 - Relay 45:10 - Components 48:00 - Michael Jackson and Ryan Florence’s React.js Training offerings 50:10 - Become a React.js expert 51:00 - React.js topics covered 52:26 - Prerequisites for learning React.js, just javascript 54:30 - Training format 56:13 - React Router 58:30 - JSX is an optional convenient way to write nested function calls 1:00:00 - Getting designers involved with React.js  @ebryn @ryanflorence @mjackson At Stampsy, JSX enabled our designer to author, refactor and tweak components at crazy speed.— Dan Abramov (@dan_abramov) September 28, 2014  1:02:00 - Thinking in React.js by Pete Hunt 1:03:38 - React Native 1:05:00 - React Native as a game changer 1:07:00 - Developers can work on native and web 1:08:00 - React Native productivity of instant refreshing for new code 1:10:20 - The wonderful and genuine React.js community   “I am just so impressed by the React.js community… everybody is helping and sharing, all trying to move our industry forward” - Jeff Barczewski   “The people I have found in the React.js community have been genuine. Their desire to help you understand is genuine. Their desire to learn is genuine. It’s been inspiring for me as well.” - Michael Jackson   1:11:38 - Closing  Michael Jackson and Ryan Florence React.js training Michael and Ryan have launched some React.js training starting this April. CodeWinds listeners can get a $300 discount to their San Francisco training this April 16-17, 2015. Use the link: http://codewinds.com/reactsf Links and Resources Online Training Courses CodeWinds React.js Fundamentals  The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles Training  http://codewinds.com/reactsf - $300 discount for Michael Jackson &amp; Ryan Florence React.js training in San Francisco - April 16-17, 2015 https://reactjs-training.com/ - Michael Jackson and Ryan Florence training events - Seattle, San Francisco, Boulder, Boston, New York, Paris http://codewinds.com/topics - Provide your input on topics, projects, difficulties, technology that you would like covered in future CodeWinds content (tutorials, podcasts, video training courses and classes). Subscribe to the CodeWinds Leading Edge member list to be the first to hear about the upcoming CodeWinds React.js video training course and be invited to become charter members.  Mentioned in the episode  React Rally - A community React conference August 24 - 25, 2015 in Salt Lake City, Utah Removing User Interface Complexity, or Why React is Awesome - James Long Twitter on the importance of server rendering Flipboard renders to canvas The tweet that started it all for Michael ReactRouter - Michael and Ryan’s isomorphic client and server routing solution for React.js Facebook’s React.js Conf talk about Relay/GraphQL - video from React.js Conference 2015 Dan Abramov’s tweet about designers + React Pete Hunt’s post about “Thinking in React” Former UIKit dev on React Native Building the Facebook Newsfeed with Relay Mach HTTP client, server, and proxy which runs on Node.js and in the browser  Follow  Michael Jackson - twitter, github Ryan Florence - twitter, github Jeff Barczewski - twitter, github CodeWinds - twitter, github  Related content  The React.js Conference experience - Jeff’s article on his experience at the first React.js Conference (2015) CodeWinds podcast episode 4 - React.js with Pete Hunt  Video Keynote on React.js and React Native from React.js Conf 2015

<blockquote> <p>“It’s so rare that something actually comes along that really changes how we think about building stuff” - Michael Jackson</p> </blockquote> <p></p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#show_notes_and_timeline" rel="nofollow" target="_blank">Show Notes and Timeline</a></li><li><a href="#michael_jackson_and_ryan_florence_react_js_training" rel="nofollow" target="_blank">Michael Jackson and Ryan Florence React.js training</a></li><li><a href="#links_and_resources" rel="nofollow" target="_blank">Links and Resources</a><ol><li><a href="#online_training_courses" rel="nofollow" target="_blank">Online Training Courses</a></li><li><a href="#training" rel="nofollow" target="_blank">Training</a></li><li><a href="#mentioned_in_the_episode" rel="nofollow" target="_blank">Mentioned in the episode</a></li><li><a href="#follow" rel="nofollow" target="_blank">Follow</a></li></ol></li><li><a href="#related_content" rel="nofollow" target="_blank">Related content</a></li><li><a href="#video" rel="nofollow" target="_blank">Video</a></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 015</li> <li>Published: April 8th, 2015</li> <li>Tags: javascript, reactjs,nodejs,isomorphic</li> <li>Duration: 1:16:34</li> <li>Updated: 2015-04-11</li> </ul> <a></a><h2>Show Notes and Timeline</h2> <ul> <li>2:40 - What’s special about React.js?</li> </ul> <blockquote> <p>“For me personally, it changed the way that I code as much as jQuery did back in 2008.” - Michael Jackson</p> </blockquote> <blockquote> <p>“OMG, This is really going to change the way that I work and how much I enjoy my job on a day to day basis.” - Michael Jackson</p> </blockquote> <ul> <li>5:00 - React.js doesn’t care about how you represent your data, models can be simple objects and arrays</li> </ul> <blockquote> <p>“What excites me about React.js is… it doesn’t care about your data model, you just use plain JavaScript objects… For my models I use: array, Object, Number, …” - Ryan Florence</p> </blockquote> <blockquote> <p>“The new paradigm with React.js is we aren’t observing, we aren’t having a bunch of events, we are just throwing data at functions and then they return descriptions of UI” - Ryan Florence</p> </blockquote> <ul> <li>6:40 - Javascript becomes our templating language</li> </ul> <blockquote> <p>“It’s hard to explain until you start doing it how big of a shift this makes in your user interface development, to not worry about your app over time; you’re not mutating the state of objects over time in your UI components” - Ryan Florence</p> </blockquote> <blockquote> <p>“We get to use the solutions that JavaScript already provides like modules and scope… we don’t have to wait for the framework’s template language to implement a solution for that” - Ryan Florence</p> </blockquote> <p></p> <ul> <li>8:25 - React.js, Angular, and Ember are pushing the language forward (ES6)</li> <li>10:56 - Is React.js differnet from other SPA frameworks?</li> <li>11:30 - React.js could be a good rendering tool for many frameworks</li> <li>12:10 - Integrating React.js into existing code is easy without a full rewrite</li> <li>13:30 - React.js be added to mature apps, not just greenfield apps</li> <li>14:50 - Angular 2.0 and Ember 2.0 look a lot like and sound a lot like React.js. It is influencing so many other frameworks.</li> <li>15:30 - Who can use React.js? What types of projects?</li> <li>19:00 - Server side rendering - Isomorphic javascript</li> <li>22:30 - React.js doesn’t care where you render - client, server, canvas, etc.</li> <li>24:00 - Is React.js hard to learn?</li> <li>25:00 - React.js allows you to code yourself out of problems</li> <li>26:00 - Smaller API’s are easier to learn</li> <li>28:10 - What brought Michael and Ryan to using React.js?</li> </ul> <blockquote><p>For me, one of the most awkward parts about <a href="https://twitter.com/hashtag/Emberjs?src=hash" rel="nofollow" target="_blank">#Emberjs</a> is switching back and forth between Handlebars templates and component code. Any ideas?</p>— Michael Jackson (@mjackson) <a href="https://twitter.com/mjackson/status/466286956989542400" rel="nofollow" target="_blank">May 13, 2014</a></blockquote> <ul> <li>28:45 - Instructure had invested in Ember but were having struggles shipping and learning</li> </ul> <blockquote> <p>“At Instructure, we bet on Ember… we were messing with it for almost a year and kind of weren’t shipping anything…” - Ryan Florence</p> </blockquote> <ul> <li>30:00 - After an hour of using React.js, Ryan wanted to use it everywhere</li> </ul> <blockquote> <p>“After an hour of using React.js, I had my face in my hands and said… I want to use this everywhere” - Ryan Florence</p> </blockquote> <ul> <li>30:45 - A few hours later, Ryan had a router proof of concept up and running</li> </ul> <blockquote> <p>“After two hours I actually had something working, and that probably impressed me the most about React.js” - Ryan Florence</p> </blockquote> <blockquote> <p>“I was never able to just pick up something as quickly as I was able to pick up React.js and build a router” - Michael Jackson</p> </blockquote> <blockquote> <p>“Two guys who had no idea what they were doing (with React.js) were able to make something (ReactRouter) that worked and was useful for other people” - Michael Jackson</p> </blockquote> <ul> <li>32:30 - Ryan started throwing his toughest problems at React.js and it handled them great</li> </ul> <blockquote> <p>“Then I just threw all of my toughest problems that I had ever run into as a frontend developer at React.js” - Ryan Florence</p> </blockquote> <p></p> <ul> <li>33:00 - Everyone at Instructure wanted to switch to React.js after being exposed to it</li> </ul> <blockquote> <p>“At Instructure we had this hack week, I encouraged a couple of my coworkers to use React.js for their projects… every single one of them came back and asked: When are putting this into our stack?” - Ryan Florence</p> </blockquote> <ul> <li>33:20 - Reducing the context switch when developing, JSX</li> <li>37:26 - React Router and Relay, working with React.js team</li> </ul> <blockquote> <p>“This is something that I really feel that the React.js authors have seriously nailed on the head, they’ll say they care about the community, and then they will show it by listening, participating, and working with us” - Michael Jackson</p> </blockquote> <ul> <li>40:00 - Data fetching improvements</li> <li>41:00 - Forward thinking attitude using ES6</li> <li>42:01 - Relay</li> <li>45:10 - Components</li> <li>48:00 - Michael Jackson and Ryan Florence’s React.js Training offerings</li> <li>50:10 - Become a React.js expert</li> <li>51:00 - React.js topics covered</li> <li>52:26 - Prerequisites for learning React.js, just javascript</li> <li>54:30 - Training format</li> <li>56:13 - React Router</li> <li>58:30 - JSX is an optional convenient way to write nested function calls</li> <li>1:00:00 - Getting designers involved with React.js</li> </ul> <blockquote><p><a href="https://twitter.com/ebryn" rel="nofollow" target="_blank">@ebryn</a> <a href="https://twitter.com/ryanflorence" rel="nofollow" target="_blank">@ryanflorence</a> <a href="https://twitter.com/mjackson" rel="nofollow" target="_blank">@mjackson</a> At Stampsy, JSX enabled our designer to author, refactor and tweak components at crazy speed.</p>— Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/516311214138621952" rel="nofollow" target="_blank">September 28, 2014</a></blockquote> <ul> <li>1:02:00 - Thinking in React.js by Pete Hunt</li> <li>1:03:38 - React Native</li> <li>1:05:00 - React Native as a game changer</li> <li>1:07:00 - Developers can work on native and web</li> <li>1:08:00 - React Native productivity of instant refreshing for new code</li> <li>1:10:20 - The wonderful and genuine React.js community</li> </ul> <blockquote> <p>“I am just so impressed by the React.js community… everybody is helping and sharing, all trying to move our industry forward” - Jeff Barczewski</p> </blockquote> <blockquote> <p>“The people I have found in the React.js community have been genuine. Their desire to help you understand is genuine. Their desire to learn is genuine. It’s been inspiring for me as well.” - Michael Jackson</p> </blockquote> <ul> <li>1:11:38 - Closing</li> </ul> <a></a><h2>Michael Jackson and Ryan Florence React.js training</h2> <p>Michael and Ryan have launched some <a href="https://reactjs-training.com/" rel="nofollow" target="_blank">React.js training</a> starting this April. CodeWinds listeners can get a $300 discount to their San Francisco training this April 16-17, 2015. Use the link: <a href="http://codewinds.com/reactsf" rel="nofollow" target="_blank">http://codewinds.com/reactsf</a></p> <a></a><h2>Links and Resources</h2> <a></a><h3>Online Training Courses</h3> <h4><a href="http://codewinds.com/react" rel="nofollow" target="_blank">CodeWinds React.js Fundamentals</a></h4> <p><a href="http://codewinds.com/react" rel="nofollow" target="_blank"></a> The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles</p> <a></a><h3>Training</h3> <ul> <li><a href="http://codewinds.com/reactsf" rel="nofollow" target="_blank">http://codewinds.com/reactsf</a> - $300 discount for Michael Jackson &amp; Ryan Florence React.js training in San Francisco - April 16-17, 2015</li> <li><a href="https://reactjs-training.com/" rel="nofollow" target="_blank">https://reactjs-training.com/</a> - Michael Jackson and Ryan Florence training events - Seattle, San Francisco, Boulder, Boston, New York, Paris</li> <li><a href="http://codewinds.com/topics" rel="nofollow" target="_blank">http://codewinds.com/topics</a> - Provide your input on topics, projects, difficulties, technology that you would like covered in future CodeWinds content (tutorials, podcasts, video training courses and classes).</li> <li>Subscribe to the <a href="http://codewinds.com/#modal-subscribe" rel="nofollow" target="_blank">CodeWinds Leading Edge member list</a> to be the first to hear about the upcoming CodeWinds React.js video training course and be invited to become charter members.</li> </ul> <a></a><h3>Mentioned in the episode</h3> <ul> <li><a href="http://www.reactrally.com/" rel="nofollow" target="_blank">React Rally</a> - A community React conference August 24 - 25, 2015 in Salt Lake City, Utah</li> <li><a href="http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome" rel="nofollow" target="_blank">Removing User Interface Complexity, or Why React is Awesome - James Long</a></li> <li><a href="https://blog.twitter.com/2012/improving-performance-on-twittercom" rel="nofollow" target="_blank">Twitter on the importance of server rendering</a></li> <li><a href="http://engineering.flipboard.com/2015/02/mobile-web/" rel="nofollow" target="_blank">Flipboard renders to canvas</a></li> <li><a href="https://twitter.com/mjackson/status/466286956989542400" rel="nofollow" target="_blank">The tweet that started it all for Michael</a></li> <li><a href="https://github.com/rackt/react-router" rel="nofollow" target="_blank">ReactRouter</a> - Michael and Ryan’s isomorphic client and server routing solution for React.js</li> <li><a href="https://www.youtube.com/watch?v=9sc8Pyc51uU" rel="nofollow" target="_blank">Facebook’s React.js Conf talk about Relay/GraphQL</a> - video from React.js Conference 2015</li> <li><a href="https://twitter.com/dan_abramov/status/516311214138621952" rel="nofollow" target="_blank">Dan Abramov’s tweet about designers + React</a></li> <li><a href="http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html" rel="nofollow" target="_blank">Pete Hunt’s post about “Thinking in React”</a></li> <li><a href="https://twitter.com/andy_matuschak/status/560511204867575808" rel="nofollow" target="_blank">Former UIKit dev on React Native</a></li> <li><a href="https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html" rel="nofollow" target="_blank">Building the Facebook Newsfeed with Relay</a></li> <li><a href="https://github.com/mjackson/mach" rel="nofollow" target="_blank">Mach HTTP client, server, and proxy</a> which runs on Node.js and in the browser</li> </ul> <a></a><h3>Follow</h3> <ul> <li>Michael Jackson - <a href="http://twitter.com/mjackson" rel="nofollow" target="_blank">twitter</a>, <a href="https://github.com/mjackson" rel="nofollow" target="_blank">github</a></li> <li>Ryan Florence - <a href="http://twitter.com/ryanflorence" rel="nofollow" target="_blank">twitter</a>, <a href="https://github.com/rpflorence" rel="nofollow" target="_blank">github</a></li> <li>Jeff Barczewski - <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a>, <a href="https://github.com/jeffbski" rel="nofollow" target="_blank">github</a></li> <li>CodeWinds - <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a>, <a href="https://github.com/codewinds" rel="nofollow" target="_blank">github</a></li> </ul> <a></a><h2>Related content</h2> <ul> <li><a href="http://codewinds.com/blog/2015-02-04-reactjs-conf.html" rel="nofollow" target="_blank">The React.js Conference experience</a> - Jeff’s article on his experience at the first React.js Conference (2015)</li> <li><a href="http://codewinds.com/podcast/004.html" rel="nofollow" target="_blank">CodeWinds podcast episode 4 - React.js with Pete Hunt</a></li> </ul> <a></a><h2>Video</h2> <p>Keynote on React.js and React Native from React.js Conf 2015</p>

015 Michael Jackson and Ryan Florence explain that React.js really changes how we think about building web and mobile apps

Episode InfoTranscriptSummaryBackstoryRegretsI’m back and focussed on CodeWindsReact.js and other course plansProvide your inputThanks for your supportMichael Jackson and Ryan Florence React.js training discountLinks Episode Info  Episode: CW 014 Published: April 6th, 2015 Tags: javascript, reactjs,nodejs Duration: 8:55  Transcript Summary Today I will fill you in on the large project that I was working on, its launch, and my CodeWinds focus and content planning for the coming year. The links and show notes for this podcast are available http://codewinds.com/14 as in episode 14. Backstory First, I want to start with an apology, I left you, my community, hanging without any explanation for too long. So I wanted to give you a little of the back story and update you on where CodeWinds is going. When I launched CodeWinds in 2013, my goal was to bring you the latest web developer news and training which I would deliver through my blog, podcast, and video courses. Well just after I started working on content, a local enterprise reached out with an ultra important need to rapidly build a scalable resilient platform for a large client. I didn’t even know the specifics of their client until the launch a year later. Well this enterprise was MasterCard. Our client turned out to be none other than Apple, and we  were building the MasterCard ApplePay system. Wow. This was such an awesome opportunity to apply my knowledge and skills to such an important project. When I joined the team, I intended to continue delivering CodeWinds content in my spare time, however the project demanded more of my focus than I anticipated, especially as we approached the launch. We poured our hearts into making sure that our platform was battle ready. And what happened on launch day? … well everything just worked.  It was one of those priceless moments when everything comes together, like a symphony of technology and collaboration. The launch was described by some the senior staff as being possibly the most successful MasterCard launch of all time. It was complex, involving so many partners, yet it came together beautifully. I was blessed to be a part of this amazing team. Regrets  Yet in all the success we had with this project, I failed you my CodeWinds community. I focussed so completely on the project that my content creation ground to a halt. I should have communicated with you, so you wouldn’t be left hanging and wondering what had happened. For that I am truly sorry, and ask for your forgiveness. I’m back and focussed on CodeWinds Fast forward to today, what’s in store for my future and that of CodeWinds. Well I am happy to say that I’m back. After much soul searching, I departed from the MasterCard team to work on CodeWinds fulltime. My desire is to bring you the best leading edge full stack web developer content. React.js and other course plans In the past few months, I have been doing a deep dive into React.js and its family. I’m so excited by the development and innovation going on in the React.js community.  “I believe the ideas and technology developing from the React.js community will profoundly influence how we build web and mobile apps.”  I’m currently planning a course on React.js and then will follow it with other topics like ES6, Hapi, Node, building resilient systems, and using HTML5. I’ll offer this material in a variety of ways, but the primary mechanism will be online courses with training videos and exercises that you can follow at your own pace or in conjunction with those in a class. These will be real world projects similar to that which you would build at your companies.  I don’t like the simple hello world style examples which are so far removed from our real projects that it is hard to see how you really would do things in practice. So these will be real projects solving real problems including proper testing and error handling. I’ll deliver these video lessons in bite sized chunks that build on each other, so you can go directly to a specific topic or learn from beginning to end. I’ll continue to blog and produce this podcast with related materials to complement all of these areas. Provide your input To be successful in this endeavor, I really depend on your input for the technologies and training you would like me to cover, especially the key topics or questions that you struggle with when building complex web applications. I just want to make sure I am working on the most pertinent topics for you. So if you could just spare a few moments, I would really appreciate your input, head over to http://codewinds.com/topics which will redirect you to a Google Doc. Check out the major categories, questions, topics, and provide your own. If you see existing ideas that resonate and interest you, please add a +1 next to them so I can gauge interest and priorities. If you have ideas for the types of apps we might build, please add that as well. I’m open to all your ideas and needs, just add them to the doc. Thanks for your support I want to thank you for staying with me through this prolonged start and I am excited about what we’ll be able to accomplish together in the future. I hope you are subscribed to my leading edge member list because you won’t want to miss the next episode of the CodeWinds podcast on React.js with Michael Jackson and Ryan Florence. We had a fantastic discussion about React.js and I think you’ll start to see why I am excited about everything coming out of the React.js community. Michael Jackson and Ryan Florence React.js training discount Michael and Ryan have launched some React.js training starting this April and for CodeWinds listeners you can get a $300 discount to their San Francisco training this April 16-17, 2015. Use the link: http://codewinds.com/reactsf The links and show notes for this episode are available at http://codewinds.com/14 If you would like to keep up on the latest in web developer news and training, follow me on codewinds.com where you’ll find this podcast, tutorials, and video training covering javascript, React.js, and Node.js. Links  http://codewinds.com/reactsf - $300 discount for Michael Jackson &amp; Ryan Florence React.js training in San Francisco - April 16-17, 2015 https://reactjs-training.com/ - Other training events with Michael and Ryan - Seattle, San Francisco, Boulder, Boston, New York, Paris http://codewinds.com/topics  - Provide your input on topics, projects, difficulties, technology that you would like covered with CodeWinds content

<ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#transcript" rel="nofollow" target="_blank">Transcript</a><ol><li><a href="#summary" rel="nofollow" target="_blank">Summary</a></li><li><a href="#backstory" rel="nofollow" target="_blank">Backstory</a></li><li><a href="#regrets" rel="nofollow" target="_blank">Regrets</a></li><li><a href="#i_m_back_and_focussed_on_codewinds" rel="nofollow" target="_blank">I’m back and focussed on CodeWinds</a></li><li><a href="#react_js_and_other_course_plans" rel="nofollow" target="_blank">React.js and other course plans</a></li><li><a href="#provide_your_input" rel="nofollow" target="_blank">Provide your input</a></li><li><a href="#thanks_for_your_support" rel="nofollow" target="_blank">Thanks for your support</a></li><li><a href="#michael_jackson_and_ryan_florence_react_js_training_discount" rel="nofollow" target="_blank">Michael Jackson and Ryan Florence React.js training discount</a></li></ol></li><li><a href="#links" rel="nofollow" target="_blank">Links</a></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 014</li> <li>Published: April 6th, 2015</li> <li>Tags: javascript, reactjs,nodejs</li> <li>Duration: 8:55</li> </ul> <a></a><h2>Transcript</h2> <a></a><h3>Summary</h3> <p>Today I will fill you in on the large project that I was working on, its launch, and my CodeWinds focus and content planning for the coming year.</p> <p>The links and show notes for this podcast are available <a href="http://codewinds.com/14" rel="nofollow" target="_blank">http://codewinds.com/14</a> as in episode 14.</p> <a></a><h3>Backstory</h3> <p>First, I want to start with an apology, I left you, my community, hanging without any explanation for too long. So I wanted to give you a little of the back story and update you on where CodeWinds is going.</p> <p>When I launched CodeWinds in 2013, my goal was to bring you the latest web developer news and training which I would deliver through my blog, podcast, and video courses. Well just after I started working on content, a local enterprise reached out with an ultra important need to rapidly build a scalable resilient platform for a large client. I didn’t even know the specifics of their client until the launch a year later. Well this enterprise was MasterCard. Our client turned out to be none other than Apple, and we  were building the MasterCard ApplePay system. Wow.</p> <p>This was such an awesome opportunity to apply my knowledge and skills to such an important project. When I joined the team, I intended to continue delivering CodeWinds content in my spare time, however the project demanded more of my focus than I anticipated, especially as we approached the launch. We poured our hearts into making sure that our platform was battle ready. And what happened on launch day? … well everything just worked.</p> <p> It was one of those priceless moments when everything comes together, like a symphony of technology and collaboration. The launch was described by some the senior staff as being possibly the most successful MasterCard launch of all time. It was complex, involving so many partners, yet it came together beautifully. I was blessed to be a part of this amazing team.</p> <a></a><h3>Regrets</h3> <p> Yet in all the success we had with this project, I failed you my CodeWinds community. I focussed so completely on the project that my content creation ground to a halt. I should have communicated with you, so you wouldn’t be left hanging and wondering what had happened. For that I am truly sorry, and ask for your forgiveness.</p> <a></a><h3>I’m back and focussed on CodeWinds</h3> <p>Fast forward to today, what’s in store for my future and that of CodeWinds. Well I am happy to say that I’m back. After much soul searching, I departed from the MasterCard team to work on CodeWinds fulltime. My desire is to bring you the best leading edge full stack web developer content.</p> <a></a><h3>React.js and other course plans</h3> <p>In the past few months, I have been doing a deep dive into React.js and its family. I’m so excited by the development and innovation going on in the React.js community.</p> <blockquote> <p>“I believe the ideas and technology developing from the React.js community will profoundly influence how we build web and mobile apps.”</p> </blockquote> <p>I’m currently planning a course on React.js and then will follow it with other topics like ES6, Hapi, Node, building resilient systems, and using HTML5.</p> <p>I’ll offer this material in a variety of ways, but the primary mechanism will be online courses with training videos and exercises that you can follow at your own pace or in conjunction with those in a class. These will be real world projects similar to that which you would build at your companies.</p> <p> I don’t like the simple hello world style examples which are so far removed from our real projects that it is hard to see how you really would do things in practice. So these will be real projects solving real problems including proper testing and error handling. I’ll deliver these video lessons in bite sized chunks that build on each other, so you can go directly to a specific topic or learn from beginning to end. I’ll continue to blog and produce this podcast with related materials to complement all of these areas.</p> <a></a><h3>Provide your input</h3> <p>To be successful in this endeavor, I really depend on your input for the technologies and training you would like me to cover, especially the key topics or questions that you struggle with when building complex web applications. I just want to make sure I am working on the most pertinent topics for you. So if you could just spare a few moments, I would really appreciate your input, head over to <a href="http://codewinds.com/topics" rel="nofollow" target="_blank">http://codewinds.com/topics</a> which will redirect you to a Google Doc.</p> <p>Check out the major categories, questions, topics, and provide your own. If you see existing ideas that resonate and interest you, please add a +1 next to them so I can gauge interest and priorities. If you have ideas for the types of apps we might build, please add that as well. I’m open to all your ideas and needs, just add them to the doc.</p> <a></a><h3>Thanks for your support</h3> <p>I want to thank you for staying with me through this prolonged start and I am excited about what we’ll be able to accomplish together in the future.</p> <p>I hope you are subscribed to my leading edge member list because you won’t want to miss the next episode of the CodeWinds podcast on React.js with Michael Jackson and Ryan Florence. We had a fantastic discussion about React.js and I think you’ll start to see why I am excited about everything coming out of the React.js community.</p> <a></a><h3>Michael Jackson and Ryan Florence React.js training discount</h3> <p>Michael and Ryan have launched some React.js training starting this April and for CodeWinds listeners you can get a $300 discount to their San Francisco training this April 16-17, 2015. Use the link: <a href="http://codewinds.com/reactsf" rel="nofollow" target="_blank">http://codewinds.com/reactsf</a></p> <p>The links and show notes for this episode are available at <a href="http://codewinds.com/14" rel="nofollow" target="_blank">http://codewinds.com/14</a></p> <p>If you would like to keep up on the latest in web developer news and training, follow me on <a href="http://codewinds.com" rel="nofollow" target="_blank">codewinds.com</a> where you’ll find this podcast, tutorials, and video training covering javascript, React.js, and Node.js.</p> <a></a><h2>Links</h2> <ul> <li><a href="http://codewinds.com/reactsf" rel="nofollow" target="_blank">http://codewinds.com/reactsf</a> - $300 discount for Michael Jackson &amp; Ryan Florence React.js training in San Francisco - April 16-17, 2015</li> <li><a href="https://reactjs-training.com/" rel="nofollow" target="_blank">https://reactjs-training.com/</a> - Other training events with Michael and Ryan - Seattle, San Francisco, Boulder, Boston, New York, Paris</li> <li><a href="http://codewinds.com/topics" rel="nofollow" target="_blank">http://codewinds.com/topics</a>  - Provide your input on topics, projects, difficulties, technology that you would like covered with CodeWinds content</li></ul>

014 Successful launch and I'm back, CodeWinds content plans for 2015, provide your input

Episode InfoEpisode NotesLinksVideos Episode Info  Episode: CW 013 Published: September 22nd, 2014 Tags: nodejs, js,jsconf Duration: 42:54  Episode Notes  01:42 - Nodevember Node.js and JavaScript Conference coming November 15-16, Nashville, TN 04:40 - Day of Activities at JSConf 2014 05:07 - NodeBots, NodeCopters, NodeRockets, NodeBoats 11:43 - Golf Tournament sponsored by NodeSource 13:04 - Kayaking, Scavenger Hunt, Segway tour of Amelia Island 13:46 - Guy Bedford - Package Management for ES6 Modules (SystemJS, jspm.io) 19:43 - Jordan Matthiesen - Modern mobile app tool-chains 23:08 - Ryan Florence - Embularactymerbone 27:30 - Forrest Norvell - Learning ES6 as a Community 30:35 - Spike Brehm - Building Isomorphic Apps 33:00 - Bodil Stokke - Reactive Game Development for the Discerning Hipster 34:00 - Kassandra Perch - Modular Application Architecture in Javascript 34:40 - Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art 36:24 - Brian Brennan - Being Human 38:30 - JS Family pic via drone 38:50 - Final thoughts about JSConf 2014  Links  Nodevember Node.js/JavaScript Conference - Nov 15-16, 2014 - Nashville TN JSConf 2014 JSConf 2014 Schedule - List of all talks Kevin Old - website, twitter, linkedin Jeff Barczewski, Founder, CodeWinds - website, twitter, linkedin CodeWinds - website, twitter  Videos  JSConf 2014 videos on YouTube Guy Bedford - Package Management for ES6 Modules video CodeWinds Episode# 8 w/Guy Bedford - Audio Interview discussing SystemJS and jspm.io Jordan Matthiesen - Modern mobile app tool-chains video Ryan Florence - Embularactymerbone video CodeWinds Episode #7 w/Forrest Norvell - Video and Audio Interview Forrest Norvell - Learning ES6 as a Community video Spike Brehm - Building Isomorphic Apps video CodeWinds Episode# 9 w/Spike Brehm - Audio Interview Bodil Stokke - Reactive Game Development for the Discerning Hipster video Kassandra Perch - Modular Application Architecture in Javascript video CodeWinds Episode# 11 w/Kassandra Perch Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art video Brian Brennan - Being Human video

<ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#videos" rel="nofollow" target="_blank">Videos</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 013</li> <li>Published: September 22nd, 2014</li> <li>Tags: nodejs, js,jsconf</li> <li>Duration: 42:54</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>01:42 - <a href="http://nodevember.org/" rel="nofollow" target="_blank">Nodevember Node.js and JavaScript Conference</a> coming November 15-16, Nashville, TN</li> <li>04:40 - Day of Activities at JSConf 2014</li> <li>05:07 - NodeBots, NodeCopters, NodeRockets, NodeBoats</li> <li>11:43 - Golf Tournament sponsored by NodeSource</li> <li>13:04 - Kayaking, Scavenger Hunt, Segway tour of Amelia Island</li> <li>13:46 - Guy Bedford - Package Management for ES6 Modules (SystemJS, <a href="http://jspm.io" rel="nofollow" target="_blank">jspm.io</a>)</li> <li>19:43 - Jordan Matthiesen - Modern mobile app tool-chains</li> <li>23:08 - Ryan Florence - Embularactymerbone</li> <li>27:30 - Forrest Norvell - Learning ES6 as a Community</li> <li>30:35 - Spike Brehm - Building Isomorphic Apps</li> <li>33:00 - Bodil Stokke - Reactive Game Development for the Discerning Hipster</li> <li>34:00 - Kassandra Perch - Modular Application Architecture in Javascript</li> <li>34:40 - Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art</li> <li>36:24 - Brian Brennan - Being Human</li> <li>38:30 - JS Family pic via drone</li> <li>38:50 - Final thoughts about JSConf 2014</li> </ul> <a></a><h3>Links</h3> <ul> <li><a href="http://nodevember.org/" rel="nofollow" target="_blank">Nodevember Node.js/JavaScript Conference</a> - Nov 15-16, 2014 - Nashville TN</li> <li><a href="http://2014.jsconf.us/" rel="nofollow" target="_blank">JSConf 2014</a></li> <li><a href="http://2014.jsconf.us/schedule.html" rel="nofollow" target="_blank">JSConf 2014 Schedule</a> - List of all talks</li> <li>Kevin Old - <a href="http://kevinold.com/" rel="nofollow" target="_blank">website</a>, <a href="http://www.twitter.com/kevinold" rel="nofollow" target="_blank">twitter</a>, <a href="http://www.linkedin.com/in/kevinold" rel="nofollow" target="_blank">linkedin</a></li> <li>Jeff Barczewski, Founder, CodeWinds - <a href="http://jeff.barczewski.com/" rel="nofollow" target="_blank">website</a>, <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a>, <a href="http://www.linkedin.com/in/jeffbski" rel="nofollow" target="_blank">linkedin</a></li> <li>CodeWinds - <a href="http://codewinds.com/" rel="nofollow" target="_blank">website</a>, <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Videos</h3> <ul> <li><a href="https://www.youtube.com/playlist?list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN" rel="nofollow" target="_blank">JSConf 2014 videos on YouTube</a></li> <li><a href="https://www.youtube.com/watch?v=szJjsduHBQQ" rel="nofollow" target="_blank">Guy Bedford - Package Management for ES6 Modules video</a></li> <li><a href="http://codewinds.com/8" rel="nofollow" target="_blank">CodeWinds Episode# 8 w/Guy Bedford</a> - Audio Interview discussing SystemJS and <a href="http://jspm.io" rel="nofollow" target="_blank">jspm.io</a></li> <li><a href="https://www.youtube.com/watch?v=adLlCFbz49w" rel="nofollow" target="_blank">Jordan Matthiesen - Modern mobile app tool-chains video</a></li> <li><a href="https://www.youtube.com/watch?v=CBhDdWY1uv8" rel="nofollow" target="_blank">Ryan Florence - Embularactymerbone video</a></li> <li><a href="http://codewinds.com/7" rel="nofollow" target="_blank">CodeWinds Episode #7 w/Forrest Norvell</a> - Video and Audio Interview</li> <li><a href="https://www.youtube.com/watch?v=MjrP-P6Pv4I" rel="nofollow" target="_blank">Forrest Norvell - Learning ES6 as a Community video</a></li> <li><a href="https://www.youtube.com/watch?v=CH6icJbLhlI" rel="nofollow" target="_blank">Spike Brehm - Building Isomorphic Apps video</a></li> <li><a href="http://codewinds.com/9" rel="nofollow" target="_blank">CodeWinds Episode# 9 w/Spike Brehm</a> - Audio Interview</li> <li><a href="https://www.youtube.com/watch?v=x8mmAu7ZR9Y" rel="nofollow" target="_blank">Bodil Stokke - Reactive Game Development for the Discerning Hipster video</a></li> <li><a href="https://www.youtube.com/watch?v=cTcdtfUjflI" rel="nofollow" target="_blank">Kassandra Perch - Modular Application Architecture in Javascript video</a></li> <li><a href="http://codewinds.com/11" rel="nofollow" target="_blank">CodeWinds Episode# 11 w/Kassandra Perch</a></li> <li><a href="https://www.youtube.com/watch?v=NHs5t1l3qzo" rel="nofollow" target="_blank">Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art video</a></li> <li><a href="https://www.youtube.com/watch?v=LlO2_GecWo8" rel="nofollow" target="_blank">Brian Brennan - Being Human video</a></li></ul>

013 Reflections of JSConf 2014 - Part 2

Episode InfoEpisode NotesLinksVideos Episode Info  Episode: CW 012 Published: September 6th, 2014 Tags: nodejs, js,jsconf Duration: 57:34  Episode Notes  01:23 - Nodevember Node.js and JavaScript Conference coming November 15-16, Nashville, TN 03:15 - JSConf 2014 Venue, Amelia Island, FL, Arriving 09:00 - CSSConf, Welcome reception 13:03 - Wednesday, first day of JSConf talks 15:00 - Neil Green - custom DSL’s in JavaScript 15:53 - Ron Evans, CylonJS - controlling hardware with JS, NodeBots, drones 22:00 - Tessel - Hardware which runs JS 24:45 - Spark Core kit 26:30 - Travell Perkins - Battle Hardened Node.js for the Enterprise 27:35 - Nico Bevacqua - Front End Ops Tooling, Grunt, Gulp, npm, browserify 36:13 - Mark DiMarco - User Interface Alorithms 40:25 - Nick Bray - Native Code on the Web 41:15 - Ryan Paul - Composing frontend Web applications with MontagsJS 45:45 - G. C. Marty - Play DVDs in JS for the sake of interoperability 47:40 - James Long - Unshackling JavaScript with Macros, SweetJS, Implemnting some ES6 features with macros 50:30 - Marco Rogers - Finding patterns across front-end frameworks 53:00 - David Calhoun - Realtime satellite tracking in the browser 54:10 - Jenn Schiffer - What’s the harm in sorting: sanitizing inputs for more optimized JavaScript  Links  Nodevember Node.js/JavaScript Conference - Nov 15-16, 2014 - Nashville TN JSConf 2014 JSConf 2014 Schedule - List of all talks CSSConf 2014 Tessel - Tessel is a microcontroller that runs JavaScript Spark - Spark OS is a complete open source operating system for cloud-connected things Kevin Old - website, twitter, linkedin Jeff Barczewski, Founder, CodeWinds - website, twitter, linkedin CodeWinds - website, twitter  Videos  JSConf 2014 videos on YouTube Neil Green - Custom DSL’s in JavaScript video Ron Evans - CylonJS: The JavaScript Evolution of Open Source Robotics video Travel Perkins - Battle Harnened Node.js for the Enterprise video Nico Bevacqua - Front End Ops Tooling video CodeWinds Podcast Episode# 10 w/Nico Bevacqua - Audio Interview Mark DiMarco - User interface algorithms video Nick Bray - Native code on the web video Ryan Paul - Composing frontend Web applications with MontagsJS video G. C. Marty - Play DVDs in JS for the sake of interoperability video Marco Rogers - Finding patterns across front-end frameworks video David Calhoun - Realtime satellite tracking in the browser video Jenn Schiffer - What’s the harm in sorting: sanitizing inputs for more optimized JavaScript video

<ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#videos" rel="nofollow" target="_blank">Videos</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 012</li> <li>Published: September 6th, 2014</li> <li>Tags: nodejs, js,jsconf</li> <li>Duration: 57:34</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>01:23 - <a href="http://nodevember.org/" rel="nofollow" target="_blank">Nodevember Node.js and JavaScript Conference</a> coming November 15-16, Nashville, TN</li> <li>03:15 - JSConf 2014 Venue, Amelia Island, FL, Arriving</li> <li>09:00 - CSSConf, Welcome reception</li> <li>13:03 - Wednesday, first day of JSConf talks</li> <li>15:00 - Neil Green - custom DSL’s in JavaScript</li> <li>15:53 - Ron Evans, CylonJS - controlling hardware with JS, NodeBots, drones</li> <li>22:00 - Tessel - Hardware which runs JS</li> <li>24:45 - Spark Core kit</li> <li>26:30 - Travell Perkins - Battle Hardened Node.js for the Enterprise</li> <li>27:35 - Nico Bevacqua - Front End Ops Tooling, Grunt, Gulp, npm, browserify</li> <li>36:13 - Mark DiMarco - User Interface Alorithms</li> <li>40:25 - Nick Bray - Native Code on the Web</li> <li>41:15 - Ryan Paul - Composing frontend Web applications with MontagsJS</li> <li>45:45 - G. C. Marty - Play DVDs in JS for the sake of interoperability</li> <li>47:40 - James Long - Unshackling JavaScript with Macros, SweetJS, Implemnting some ES6 features with macros</li> <li>50:30 - Marco Rogers - Finding patterns across front-end frameworks</li> <li>53:00 - David Calhoun - Realtime satellite tracking in the browser</li> <li>54:10 - Jenn Schiffer - What’s the harm in sorting: sanitizing inputs for more optimized JavaScript</li> </ul> <a></a><h3>Links</h3> <ul> <li><a href="http://nodevember.org/" rel="nofollow" target="_blank">Nodevember Node.js/JavaScript Conference</a> - Nov 15-16, 2014 - Nashville TN</li> <li><a href="http://2014.jsconf.us/" rel="nofollow" target="_blank">JSConf 2014</a></li> <li><a href="http://2014.jsconf.us/schedule.html" rel="nofollow" target="_blank">JSConf 2014 Schedule</a> - List of all talks</li> <li><a href="http://2014.cssconf.com/" rel="nofollow" target="_blank">CSSConf 2014</a></li> <li><a href="https://tessel.io/" rel="nofollow" target="_blank">Tessel</a> - Tessel is a microcontroller that runs JavaScript</li> <li><a href="https://www.spark.io/" rel="nofollow" target="_blank">Spark</a> - Spark OS is a complete open source operating system for cloud-connected things</li> <li>Kevin Old - <a href="http://kevinold.com/" rel="nofollow" target="_blank">website</a>, <a href="http://www.twitter.com/kevinold" rel="nofollow" target="_blank">twitter</a>, <a href="http://www.linkedin.com/in/kevinold" rel="nofollow" target="_blank">linkedin</a></li> <li>Jeff Barczewski, Founder, CodeWinds - <a href="http://jeff.barczewski.com/" rel="nofollow" target="_blank">website</a>, <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a>, <a href="http://www.linkedin.com/in/jeffbski" rel="nofollow" target="_blank">linkedin</a></li> <li>CodeWinds - <a href="http://codewinds.com/" rel="nofollow" target="_blank">website</a>, <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Videos</h3> <ul> <li><a href="https://www.youtube.com/playlist?list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN" rel="nofollow" target="_blank">JSConf 2014 videos on YouTube</a></li> <li><a href="https://www.youtube.com/watch?v=lm4jEcnWeKI" rel="nofollow" target="_blank">Neil Green - Custom DSL’s in JavaScript video</a></li> <li><a href="https://www.youtube.com/watch?v=bnFWskconEg" rel="nofollow" target="_blank">Ron Evans - CylonJS: The JavaScript Evolution of Open Source Robotics video</a></li> <li><a href="https://www.youtube.com/watch?v=6QAzmJ4lm3I" rel="nofollow" target="_blank">Travel Perkins - Battle Harnened Node.js for the Enterprise video</a></li> <li><a href="https://www.youtube.com/watch?v=Y0DCZdAruvo" rel="nofollow" target="_blank">Nico Bevacqua - Front End Ops Tooling video</a></li> <li><a href="http://codewinds.com/10" rel="nofollow" target="_blank">CodeWinds Podcast Episode# 10 w/Nico Bevacqua</a> - Audio Interview</li> <li><a href="https://www.youtube.com/watch?v=90NsjKvz9Ns" rel="nofollow" target="_blank">Mark DiMarco - User interface algorithms video</a></li> <li><a href="https://www.youtube.com/watch?v=-xNZYr40QOk" rel="nofollow" target="_blank">Nick Bray - Native code on the web video</a></li> <li><a href="https://www.youtube.com/watch?v=8-Vyus9TPZ0" rel="nofollow" target="_blank">Ryan Paul - Composing frontend Web applications with MontagsJS video</a></li> <li><a href="https://www.youtube.com/watch?v=lb-8euLqfRg" rel="nofollow" target="_blank">G. C. Marty - Play DVDs in JS for the sake of interoperability video</a></li> <li><a href="https://www.youtube.com/watch?v=Bp3Jy177NvU" rel="nofollow" target="_blank">Marco Rogers - Finding patterns across front-end frameworks video</a></li> <li><a href="https://www.youtube.com/watch?v=vtvHOn9mIB4" rel="nofollow" target="_blank">David Calhoun - Realtime satellite tracking in the browser video</a></li> <li><a href="https://www.youtube.com/watch?v=pj4U_W0OFoE" rel="nofollow" target="_blank">Jenn Schiffer - What’s the harm in sorting: sanitizing inputs for more optimized JavaScript video</a></li></ul>

012 Reflections of JSConf 2014 - Part 1

Kassandra Perch

Perch

Episode InfoEpisode NotesLinksVideo / Slides Episode Info  Episode: CW 011 Published: August 20th, 2014 Tags: nodejs, js,jsconf Duration: 11:37  Episode Notes  04:08 - Being judicious about choosing frameworks 05:10 - Frameworks which combine other components 05:38 - Examples of modular frameworks 06:21 - Insights from teaching at Girl Develop It! 07:00 - Students learn in different ways 08:10 - Format for classes, gradually building 09:50 - Challenges in learning JavaScript  Links  Kassandra Perch’s blog - EUNKNOWN Girl Develop It! - Austin, TX chapter Kassandra Perch’s twitter Jeff Barczewski, Founder, CodeWinds twitter CodeWinds twitter  Video / Slides Watch Kassandra Perch’s JSConf talk on YouTube

<ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#video_slides" rel="nofollow" target="_blank">Video / Slides</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 011</li> <li>Published: August 20th, 2014</li> <li>Tags: nodejs, js,jsconf</li> <li>Duration: 11:37</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>04:08 - Being judicious about choosing frameworks</li> <li>05:10 - Frameworks which combine other components</li> <li>05:38 - Examples of modular frameworks</li> <li>06:21 - Insights from teaching at Girl Develop It!</li> <li>07:00 - Students learn in different ways</li> <li>08:10 - Format for classes, gradually building</li> <li>09:50 - Challenges in learning JavaScript</li> </ul> <a></a><h3>Links</h3> <ul> <li><a href="http://kperch.github.io/" rel="nofollow" target="_blank">Kassandra Perch’s blog - EUNKNOWN</a></li> <li><a href="http://www.meetup.com/Girl-Develop-It-Austin/" rel="nofollow" target="_blank">Girl Develop It! - Austin, TX chapter</a></li> <li><a href="http://twitter.com/nodebotanist" rel="nofollow" target="_blank">Kassandra Perch’s twitter</a></li> <li>Jeff Barczewski, Founder, CodeWinds <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a></li> <li>CodeWinds <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Video / Slides</h3> <p><a href="https://www.youtube.com/watch?v=cTcdtfUjflI&amp;list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN&amp;index=15" rel="nofollow" target="_blank">Watch Kassandra Perch’s JSConf talk on YouTube</a></p>

011 Kassandra Perch - Modular JavaScript application architectures and insights from teaching

Nico Bevacqua

Nico Bevacqua, the author of JavaScript Application Design which is in early access at Manning, explains more about JS continuous development, integration, and deployment. We discuss build tools, module systems, component architectures, MVC, and finally the experience of writing a traditionally published book. Episode InfoEpisode NotesJavaScript Application Design - ManningLinksVideo / Slides  Episode Info  Episode: CW 010 Published: August 8th, 2014 Tags: nodejs, js,jsconf Duration: 29:10  Episode Notes  01:35 - Why build first? 03:25 - Continuous development 05:00 - Continuous Integration - Travis-CI 05:20 - Continuous Deployment - Heroku, Amazon EC2 06:20 - Build tools - grunt, gulp, npm - determining the best choice 11:35 - JS Modules - AMD, CommonJS (CJS), ES6 Modules, RequireJS, Browserify, AngularJS DI 15:00 - HTTP/2 efficient parallel streaming potentially reducing need for bundling 16:30 - Browserify limitations and CommonJS 18:30 - App design, modularity, package managers (component, bower, npm) 20:20 - Current state of building components - Bower, Component, Polymer, Web Components, AngularJS, ReactJS 22:24 - MVC Frameworks - AngularJS, ReactJS and the Virtual DOM 23:35 - Experience writing JavaScript Application Design published by Manning 27:35 - Following Nico  JavaScript Application Design - Manning Published by Manning, currently available as early access edition - Purchase at Manning Links  Browserify - packaging NPM modules for the browser Nico Bevacqua’s Pony Foo blog Code samples from JavaScript Application Design Build first resources Build first site Nico Bevacqua twitter Jeff Barczewski, Founder, CodeWinds twitter CodeWinds twitter  Video / Slides Watch Nico Bevacqua’s JSConf talk on YouTube Slides from Nico Bevacqua JSConf 2014: Front End Ops Tooling - Slideshare

<p>Nico Bevacqua, the author of JavaScript Application Design which is in early access at Manning, explains more about JS continuous development, integration, and deployment. We discuss build tools, module systems, component architectures, MVC, and finally the experience of writing a traditionally published book.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#javascript_application_design_-_manning" rel="nofollow" target="_blank">JavaScript Application Design - Manning</a></li><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#video_slides" rel="nofollow" target="_blank">Video / Slides</a></li></ol></li></ol> <p><a href="http://bevacqua.io/bf/book" rel="nofollow" target="_blank"></a></p> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 010</li> <li>Published: August 8th, 2014</li> <li>Tags: nodejs, js,jsconf</li> <li>Duration: 29:10</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>01:35 - Why build first?</li> <li>03:25 - Continuous development</li> <li>05:00 - Continuous Integration - Travis-CI</li> <li>05:20 - Continuous Deployment - Heroku, Amazon EC2</li> <li>06:20 - Build tools - grunt, gulp, npm - determining the best choice</li> <li>11:35 - JS Modules - AMD, CommonJS (CJS), ES6 Modules, RequireJS, Browserify, AngularJS DI</li> <li>15:00 - HTTP/2 efficient parallel streaming potentially reducing need for bundling</li> <li>16:30 - Browserify limitations and CommonJS</li> <li>18:30 - App design, modularity, package managers (component, bower, npm)</li> <li>20:20 - Current state of building components - Bower, Component, Polymer, Web Components, AngularJS, ReactJS</li> <li>22:24 - MVC Frameworks - AngularJS, ReactJS and the Virtual DOM</li> <li>23:35 - Experience writing JavaScript Application Design published by Manning</li> <li>27:35 - Following Nico</li> </ul> <a></a><h3>JavaScript Application Design - Manning</h3> <p>Published by Manning, currently available as early access edition - <a href="http://bevacqua.io/bf/book" rel="nofollow" target="_blank">Purchase at Manning</a></p> <a></a><h3>Links</h3> <ul> <li><a href="http://browserify.org/" rel="nofollow" target="_blank">Browserify - packaging NPM modules for the browser</a></li> <li>Nico Bevacqua’s <a href="http://blog.ponyfoo.com/" rel="nofollow" target="_blank">Pony Foo blog</a></li> <li><a href="https://github.com/buildfirst/buildfirst" rel="nofollow" target="_blank">Code samples from JavaScript Application Design</a></li> <li><a href="http://bevacqua.io/buildfirst/resources" rel="nofollow" target="_blank">Build first resources</a></li> <li><a href="http://bevacqua.io/buildfirst" rel="nofollow" target="_blank">Build first site</a></li> <li>Nico Bevacqua <a href="http://twitter.com/nzgb" rel="nofollow" target="_blank">twitter</a></li> <li>Jeff Barczewski, Founder, CodeWinds <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a></li> <li>CodeWinds <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Video / Slides</h3> <p><a href="https://www.youtube.com/watch?v=Y0DCZdAruvo" rel="nofollow" target="_blank">Watch Nico Bevacqua’s JSConf talk on YouTube</a></p> <p><a href="https://speakerdeck.com/bevacqua/front-end-ops-tooling" rel="nofollow" target="_blank">Slides from Nico Bevacqua JSConf 2014: Front End Ops Tooling - Slideshare</a></p>

010 Nico Bevacqua - JS build tooling, development workflow, and his new book JavaScript Application Design

Spike Brehm

Spike explains the different categories of Isomorphic apps and how this is accomplished. He mentions various tools for facilitating sharing across browser, server, and devices. He shares how Airbnb, Yahoo, Flickr, Facebook, Instagram are using some of these technologies today. Finally, he provides resources to help others learn and get started. Episode InfoEpisode NotesLinksVideo / Slides Episode Info  Episode: CW 009 Published: July 16th, 2014 Tags: nodejs, js,jsconf Duration: 13:48  Episode Notes  01:50 - Isomorphic definition 03:15 - Tools for sharing code across browser and server 04:00 - Browserify for using Node.js packages in browser 05:20 - Categories of Isomorphic code 06:20 - Superagent - HTTP client 07:08 - Airbnb’s Rendr - render Backbone apps on client and server 07:30 - Compelling reasons for building isomorphic apps 08:00 - Flickr main page isomorphic, modown project 08:39 - Meteor framework 09:25 - Getting started with Isomorphic JavaScript 10:10 - ReactJS - client and server rendering, can attach event handlers to server rendered page 10:40 - Facebook and Instagram using ReactJS for Isomorphic apps 11:30 - Following Spike Brehm and Isomorphic JavaScript  Links  Spike Brehm’s Isomorphic Resources Airbnb blog - Isomorphic JavaScript: The Future of Web Apps Isomorphic Tutorial Isomorphic JavaScript website Nodejitsu - Scaling Isomorphic Javascript Code Browserify - packaging NPM modules for the browser Superagent - HTTP client for browser and Node.js Airbnb’s Rendr - Rendering Backbone apps on the client and server Yahoo’s Modown project Meteor framework ReactJS framework for building user interfaces Spike Brehm Twitter Jeff Barczewski, Founder, CodeWinds twitter CodeWinds twitter  Video / Slides Watch Spike Brehm’s JSConf talk on YouTube Slides from Spike Brehm JSConf 2014: Building Isomorphic Apps - Slideshare

<p>Spike explains the different categories of Isomorphic apps and how this is accomplished. He mentions various tools for facilitating sharing across browser, server, and devices. He shares how Airbnb, Yahoo, Flickr, Facebook, Instagram are using some of these technologies today. Finally, he provides resources to help others learn and get started.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#video_slides" rel="nofollow" target="_blank">Video / Slides</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 009</li> <li>Published: July 16th, 2014</li> <li>Tags: nodejs, js,jsconf</li> <li>Duration: 13:48</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>01:50 - Isomorphic definition</li> <li>03:15 - Tools for sharing code across browser and server</li> <li>04:00 - Browserify for using Node.js packages in browser</li> <li>05:20 - Categories of Isomorphic code</li> <li>06:20 - Superagent - HTTP client</li> <li>07:08 - Airbnb’s Rendr - render Backbone apps on client and server</li> <li>07:30 - Compelling reasons for building isomorphic apps</li> <li>08:00 - Flickr main page isomorphic, modown project</li> <li>08:39 - Meteor framework</li> <li>09:25 - Getting started with Isomorphic JavaScript</li> <li>10:10 - ReactJS - client and server rendering, can attach event handlers to server rendered page</li> <li>10:40 - Facebook and Instagram using ReactJS for Isomorphic apps</li> <li>11:30 - Following Spike Brehm and Isomorphic JavaScript</li> </ul> <a></a><h3>Links</h3> <ul> <li><a href="http://spike.technology/" rel="nofollow" target="_blank">Spike Brehm’s Isomorphic Resources</a></li> <li><a href="http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/" rel="nofollow" target="_blank">Airbnb blog - Isomorphic JavaScript: The Future of Web Apps</a></li> <li><a href="https://github.com/spikebrehm/isomorphic-tutorial" rel="nofollow" target="_blank">Isomorphic Tutorial</a></li> <li><a href="http://isomorphic.net/" rel="nofollow" target="_blank">Isomorphic JavaScript website</a></li> <li><a href="http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/" rel="nofollow" target="_blank">Nodejitsu - Scaling Isomorphic Javascript Code</a></li> <li><a href="http://browserify.org/" rel="nofollow" target="_blank">Browserify - packaging NPM modules for the browser</a></li> <li><a href="https://github.com/visionmedia/superagent" rel="nofollow" target="_blank">Superagent - HTTP client for browser and Node.js</a></li> <li><a href="https://github.com/rendrjs/rendr" rel="nofollow" target="_blank">Airbnb’s Rendr - Rendering Backbone apps on the client and server</a></li> <li><a href="http://www.slideshare.net/caridy/yuiconfintroducing-modown-project" rel="nofollow" target="_blank">Yahoo’s Modown project</a></li> <li><a href="https://www.meteor.com/" rel="nofollow" target="_blank">Meteor framework</a></li> <li><a href="http://facebook.github.io/react/" rel="nofollow" target="_blank">ReactJS framework for building user interfaces</a></li> <li><a href="http://twitter.com/spikebrehm" rel="nofollow" target="_blank">Spike Brehm Twitter</a></li> <li>Jeff Barczewski, Founder, CodeWinds <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a></li> <li>CodeWinds <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Video / Slides</h3> <p><a href="http://youtu.be/CH6icJbLhlI?list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN" rel="nofollow" target="_blank">Watch Spike Brehm’s JSConf talk on YouTube</a></p> <p><a href="http://www.slideshare.net/spikebrehm/jsconf-us-2014-building-isomorphic-apps" rel="nofollow" target="_blank">Slides from Spike Brehm JSConf 2014: Building Isomorphic Apps - Slideshare</a></p>

009 Spike Brehm - Sharing javascript in browser and server - building isomorphic apps

Guy Bedford

JavaScript module loading has traditionally been difficult due to diverse module formats and difficult configuration. With so many competing standards it is hard to get everything to work well together. Guy has come forward with a solution which simplifies loading and management of JS packages. This is a full workflow solution including both dynamic loading and capability to build bundles for production. Episode InfoEpisode NotesSimple example of SystemJS in browserLinksVideosOther podcasts Episode Info  Episode: CW 008 Published: July 2nd, 2014 Tags: nodejs, js,es6,commonjs,amd,es6,packages,modules,jsconf Duration: 22:12  Episode Notes  03:00 - es6-module-loader 04:25 - CommonJS, AMD, ES6 modules. Browserify 05:10 - SystemJS - loads ES6 modules, AMD, CommonJS and global scripts. Designed in spec itself, IE8+, suitable for production, runs in browser and Node.js, promises API 08:00 - SystemJS workflow - dynamic loading and build capability 10:00 - Using SystemJS with build tools 10:30 - SystemJS community 11:30 - Auto file type detection (CJS, AMD, UMD, …) or can specify 12:45 - Optional configuration. Made to be as easy as possible to get going 14:30 - jspm - JavaScript Package Manager - CDN for SystemJS, require by name. 15:30 - Core ideas - making requiring really simple and making package management really simple 16:00 - Design of loader and manager 17:28 - Ready for review and full workflow. An invitation to the community 18:26 - GitHub locations for projects, examples 20:34 - How to follow up, closing remarks  Simple example of SystemJS in browser &lt;script src="system.js"&gt;&lt;/&lt;span class="hljs-name"&gt;script&gt;&lt;script&gt;  System.import('app/app')  .catch(function(e) {    // we add this since promises suppress all errors    setTimeout(function() {      throw e;    });  });&lt;/&lt;span class="hljs-name"&gt;script&gt; Links  es6-module-loader - ES6 module loader polyfill SystemJS - Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts. SystemJS-Build-Tool - Build tool for SystemJS which can bundle for production jspm - Package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader. Load any module format (ES6, AMD, CommonJS and globals) directly from endpoints such as npm and github with flat versioned dependency management. For production, use the jspm CLI tool to download packages locally, lock down versions and build into a bundle. In development, load modules directly from CDN for frictionless experimentation, switching into production on the same code with a single configuration change. Supports SPDY with server push. jspm-es6-demo - jspm ES6 module loading workflow demo - write ES6 modules, load external from CDN, install locally using CDN versions, bundle into single file for production jspm Google Group - Discussion forum for JSPM Guy Bedford’s Twitter Guy Bedford’s GitHub repositories Jeff Barczewski, Founder, CodeWinds twitter CodeWinds twitter  Videos  Fluent Conf 2014 - Guy Bedford on ES6 modules, jspm, SystemJS Mountain West JS 2014 - Guy Bedford on the genesis of jspm, SystemJS JSConf 2014 videos - Videos from the JSConf 2014 sessions (videos are in progress of being posted)  Other podcasts  JSJabber 115

<p>JavaScript module loading has traditionally been difficult due to diverse module formats and difficult configuration. With so many competing standards it is hard to get everything to work well together.</p> <p>Guy has come forward with a solution which simplifies loading and management of JS packages. This is a full workflow solution including both dynamic loading and capability to build bundles for production.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#simple_example_of_systemjs_in_browser" rel="nofollow" target="_blank">Simple example of SystemJS in browser</a></li><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#videos" rel="nofollow" target="_blank">Videos</a></li><li><a href="#other_podcasts" rel="nofollow" target="_blank">Other podcasts</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 008</li> <li>Published: July 2nd, 2014</li> <li>Tags: nodejs, js,es6,commonjs,amd,es6,packages,modules,jsconf</li> <li>Duration: 22:12</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>03:00 - <a href="https://github.com/ModuleLoader/es6-module-loader" rel="nofollow" target="_blank">es6-module-loader</a></li> <li>04:25 - CommonJS, AMD, ES6 modules. Browserify</li> <li>05:10 - <a href="https://github.com/systemjs/systemjs" rel="nofollow" target="_blank">SystemJS</a> - loads ES6 modules, AMD, CommonJS and global scripts. Designed in spec itself, IE8+, suitable for production, runs in browser and Node.js, promises API</li> <li>08:00 - SystemJS workflow - dynamic loading and build capability</li> <li>10:00 - Using SystemJS with build tools</li> <li>10:30 - SystemJS community</li> <li>11:30 - Auto file type detection (CJS, AMD, UMD, …) or can specify</li> <li>12:45 - Optional configuration. Made to be as easy as possible to get going</li> <li>14:30 - <a href="http://jspm.io/" rel="nofollow" target="_blank">jspm</a> - JavaScript Package Manager - CDN for SystemJS, require by name.</li> <li>15:30 - Core ideas - making requiring really simple and making package management really simple</li> <li>16:00 - Design of loader and manager</li> <li>17:28 - Ready for review and full workflow. An invitation to the community</li> <li>18:26 - GitHub locations for projects, examples</li> <li>20:34 - How to follow up, closing remarks</li> </ul> <a></a><h3>Simple example of SystemJS in browser</h3> <code>&lt;script src="system.js"&gt;&lt;/&lt;span class="hljs-name"&gt;script&gt;<br>&lt;script&gt;<br>  System.import('app/app')<br>  .catch(function(e) {<br>    // we add this since promises suppress all errors<br>    setTimeout(function() {<br>      throw e;<br>    });<br>  });<br>&lt;/&lt;span class="hljs-name"&gt;script&gt;</code> <a></a><h3>Links</h3> <ul> <li><a href="https://github.com/ModuleLoader/es6-module-loader" rel="nofollow" target="_blank">es6-module-loader</a> - ES6 module loader polyfill</li> <li><a href="https://github.com/systemjs/systemjs" rel="nofollow" target="_blank">SystemJS</a> - Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.</li> <li><a href="https://github.com/systemjs/builder" rel="nofollow" target="_blank">SystemJS-Build-Tool</a> - Build tool for SystemJS which can bundle for production</li> <li><a href="http://jspm.io/" rel="nofollow" target="_blank">jspm</a> - Package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader. Load any module format (ES6, AMD, CommonJS and globals) directly from endpoints such as npm and github with flat versioned dependency management. For production, use the <a href="https://github.com/jspm/jspm-cli" rel="nofollow" target="_blank">jspm CLI</a> tool to download packages locally, lock down versions and build into a bundle. In development, load modules directly from CDN for frictionless experimentation, switching into production on the same code with a single configuration change. Supports SPDY with server push.</li> <li><a href="https://github.com/jspm/demo-es6" rel="nofollow" target="_blank">jspm-es6-demo</a> - jspm ES6 module loading workflow demo - write ES6 modules, load external from CDN, install locally using CDN versions, bundle into single file for production</li> <li><a href="https://groups.google.com/forum/#!forum/jspm-io" rel="nofollow" target="_blank">jspm Google Group</a> - Discussion forum for JSPM</li> <li><a href="http://twitter.com/guybedford" rel="nofollow" target="_blank">Guy Bedford’s Twitter</a></li> <li><a href="https://github.com/guybedford" rel="nofollow" target="_blank">Guy Bedford’s GitHub repositories</a></li> <li>Jeff Barczewski, Founder, CodeWinds <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a></li> <li>CodeWinds <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Videos</h3> <ul> <li><a href="http://es6rocks.com/2014/06/practical-workflows-es6-modules/" rel="nofollow" target="_blank">Fluent Conf 2014</a> - Guy Bedford on ES6 modules, jspm, SystemJS</li> <li><a href="http://www.confreaks.com/videos/3231-mwjs-browser-package-management" rel="nofollow" target="_blank">Mountain West JS 2014</a> - Guy Bedford on the genesis of jspm, SystemJS</li> <li><a href="https://www.youtube.com/playlist?list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN" rel="nofollow" target="_blank">JSConf 2014 videos</a> - Videos from the JSConf 2014 sessions (videos are in progress of being posted)</li> </ul> <a></a><h3>Other podcasts</h3> <ul> <li><a href="http://javascriptjabber.com/115-jsj-the-es6-module-loader-polyfill-systemjs-and-jspm-with-guy-bedford/" rel="nofollow" target="_blank">JSJabber 115</a></li></ul>

008 Guy Bedford - jspm & SystemJS - Unity and simplicity in loading CommonJS, AMD, and ES6 JS packages

Forrest Norvell

Watch video on YouTubeEpisode InfoEpisode NotesLinksVideosEpisode Info  Episode: CW 007 Published: June 24th, 2014 Tags: nodejs, js,es6,jsconf Duration: 38:33  Episode Notes  01:36 - Forrest explains his new position at npm Inc. 02:20 - Discussion of Forrest’s JSConf 2014 talk 03:30 - Rise of community standards, Douglas Crockford’s the Good Parts, John Resig jQuery, Promises A+ standard 05:50 - Standards committees, an inside look 08:00 - ES4, ES5, Harmony, ES7 (champion for each feature) 10:00 - test262 - conformance test suite 11:58 - Our community has the power to figure out what features in ES6 are useful. Sort out the parts that are genuinely useful. Figure out the good parts now. 14:48 - Module proposal benefited from critical discussions from the community 16:00 - Tools for using ES6 features now 17:26 - Development community needs to get on top of things and teach how we use the features with emphasis on the compelling parts. 18:50 - Forrest no longer recommends Crockford’s Good Parts to new developers because half is scar tissue and dogma, instead Dave Herman’s Effective JavaScript which gives them a mental toolkit to determine their own style 20:55 - Don’t concentrate on what’s cool, but concentrate on what’s stable and effective. As an educator be conservative. 21:29 - Warnings from Java, Perl history 24:00 - Typescript and Coffeescript bring things to the table but they could fragment the community 24:40 - ES timeline 26:30 - Features need enough examination to ensure they are finished 28:00 - Keeping some things in user land to see what community comes up with. Developers as leaders in this transition. 29:00 - npm growth, npm Inc dev ops, addressing pain points in npm CLI 34:30 - All software languages have something that is terrible. Community is something that makes Node.js special. 35:45 - Node.js in the enterprise is happening very rapidly. A very interesting time to be in the middle of this evolution.  Links  Forrest Norvell, npm product maker at npm Inc. twitter npm Inc. - npm, Inc. supports the JavaScript community by providing the registry where developers publish and share packaged open-source modules. traceur - Traceur is a JavaScript.next-to-JavaScript-of-today compiler. Compile ES6 code into JS which can be used by today’s browsers. es6-shim - Provides compatibility shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6 (Harmony). es6-module-transpiler - ES6 Module Transpiler is a JavaScript library for converting JavaScript files written using the ES6 draft specification module syntax to existing library-based module systems such as AMD, CommonJS, or simply globals. sweet.js - Macros for javascript which can be used to add in ES6 features. es6ify - browserify v2 transform to compile JavaScript.next (ES6) to JavaScript.current (ES5) on the fly. ES6 compatibility table - ES6 compatibility table, comparing browser versions, Node.js. Links to ES6 feature descriptions. Spider Monkey - Firefox JS engine written in C++. Currently Spider Monkey is leading in the number of ES6 features that are implemented. (56/66 according to Kangax) Effective JavaScript - David Herman’s book Jeff Barczewski, Founder, CodeWinds twitter CodeWinds twitter  Videos  JSConf 2014 Talk

<p><a href="http://youtu.be/kvEnDdFAUyI" rel="nofollow" target="_blank">Watch video on YouTube</a></p><ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#links" rel="nofollow" target="_blank">Links</a></li><li><a href="#videos" rel="nofollow" target="_blank">Videos</a></li></ol></li></ol><a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 007</li> <li>Published: June 24th, 2014</li> <li>Tags: nodejs, js,es6,jsconf</li> <li>Duration: 38:33</li> </ul> <a></a><h2>Episode Notes</h2> <ul> <li>01:36 - Forrest explains his new position at <a href="http://www.npmjs.com/" rel="nofollow" target="_blank">npm Inc.</a></li> <li>02:20 - Discussion of Forrest’s JSConf 2014 talk</li> <li>03:30 - Rise of community standards, Douglas Crockford’s the Good Parts, John Resig jQuery, Promises A+ standard</li> <li>05:50 - Standards committees, an inside look</li> <li>08:00 - ES4, ES5, Harmony, ES7 (champion for each feature)</li> <li>10:00 - <a href="http://test262.ecmascript.org/" rel="nofollow" target="_blank">test262</a> - conformance test suite</li> <li>11:58 - Our community has the power to figure out what features in ES6 are useful. Sort out the parts that are genuinely useful. Figure out the good parts now.</li> <li>14:48 - Module proposal benefited from critical discussions from the community</li> <li>16:00 - Tools for using ES6 features now</li> <li>17:26 - Development community needs to get on top of things and teach how we use the features with emphasis on the compelling parts.</li> <li>18:50 - Forrest no longer recommends Crockford’s Good Parts to new developers because half is scar tissue and dogma, instead Dave Herman’s <a href="http://effectivejs.com/" rel="nofollow" target="_blank">Effective JavaScript</a> which gives them a mental toolkit to determine their own style</li> <li>20:55 - Don’t concentrate on what’s cool, but concentrate on what’s stable and effective. As an educator be conservative.</li> <li>21:29 - Warnings from Java, Perl history</li> <li>24:00 - Typescript and Coffeescript bring things to the table but they could fragment the community</li> <li>24:40 - ES timeline</li> <li>26:30 - Features need enough examination to ensure they are finished</li> <li>28:00 - Keeping some things in user land to see what community comes up with. Developers as leaders in this transition.</li> <li>29:00 - npm growth, npm Inc dev ops, addressing pain points in npm CLI</li> <li>34:30 - All software languages have something that is terrible. Community is something that makes Node.js special.</li> <li>35:45 - Node.js in the enterprise is happening very rapidly. A very interesting time to be in the middle of this evolution.</li> </ul> <a></a><h3>Links</h3> <ul> <li>Forrest Norvell, npm product maker at npm Inc. <a href="https://twitter.com/othiym23" rel="nofollow" target="_blank">twitter</a></li> <li><a href="http://www.npmjs.com/" rel="nofollow" target="_blank">npm Inc.</a> - npm, Inc. supports the JavaScript community by providing the registry where developers publish and share packaged open-source modules.</li> <li><a href="https://github.com/google/traceur-compiler" rel="nofollow" target="_blank">traceur</a> - Traceur is a JavaScript.next-to-JavaScript-of-today compiler. Compile ES6 code into JS which can be used by today’s browsers.</li> <li><a href="https://github.com/paulmillr/es6-shim/" rel="nofollow" target="_blank">es6-shim</a> - Provides compatibility shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6 (Harmony).</li> <li><a href="http://square.github.io/es6-module-transpiler/" rel="nofollow" target="_blank">es6-module-transpiler</a> - ES6 Module Transpiler is a JavaScript library for converting JavaScript files written using the ES6 draft specification module syntax to existing library-based module systems such as AMD, CommonJS, or simply globals.</li> <li><a href="http://sweetjs.org/" rel="nofollow" target="_blank">sweet.js</a> - Macros for javascript which can be used to add in ES6 features.</li> <li><a href="https://github.com/thlorenz/es6ify" rel="nofollow" target="_blank">es6ify</a> - browserify v2 transform to compile JavaScript.next (ES6) to JavaScript.current (ES5) on the fly.</li> <li><a href="http://kangax.github.io/compat-table/es6/" rel="nofollow" target="_blank">ES6 compatibility table</a> - ES6 compatibility table, comparing browser versions, Node.js. Links to ES6 feature descriptions.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" rel="nofollow" target="_blank">Spider Monkey</a> - Firefox JS engine written in C++. Currently Spider Monkey is leading in the number of ES6 features that are implemented. (56/66 according to Kangax)</li> <li><a href="http://effectivejs.com/" rel="nofollow" target="_blank">Effective JavaScript</a> - David Herman’s book</li> <li>Jeff Barczewski, Founder, CodeWinds <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a></li> <li>CodeWinds <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li> </ul> <a></a><h3>Videos</h3> <ul> <li><a href="https://www.youtube.com/watch?v=MjrP-P6Pv4I&amp;index=21&amp;list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN" rel="nofollow" target="_blank">JSConf 2014 Talk</a></li></ul>

007 Forrest Norvell on ES6 and our community's role at JSConf 2014

Daniel Shaw

Watch video on YouTubeEpisode InfoEpisode NotesNodeSource Team (mentioned in interview)Social Media LinksEpisode Info  Episode: CW 006 Published: June 18th, 2014 Tags: nodejs, jsconf Duration: 23:54  Episode Notes NodeSource is a professional Node.js software company. NodeSource provides enterprise-grade software products and educational and professional consulting services to empower companies to be effective and productive with Node.js.  https://nodesource.com/ - NodeSource website with team background https://nodesource.com/products - NodeSource products npm Plus - NodeSource is the premier, certified reseller of on-premise, private npm instances. NodeSource has partnered with npm Inc. to deliver a secure, on-premise, private npm solution alongside managed services such as: Bespoke npm Training 24x7x365 Support Custom Integrations (LDAP, SSO, etc.)   N|Ship - NodeSource’s official Node.js deployment solution to make app deployments easy, secure and automated.   http://2014.jsconf.us/ - JSConf 2014 - May 27-31, 2014 at Amelia Island, FL  NodeSource Team (mentioned in interview)![DanShaw][] ![JoeMccann][] ![RodVagg][] ![ChrisWilliams][] ![TrevorNorris][]Social Media Links NodeSource Team (partial list)  NodeSource twitter Daniel Shaw, Co-founder twitter Joe McCann, Co-founder twitter Rod Vagg, Director of Engineering twitter Chris Williams, Director of Professional Services twitter Trevor Norris, Node.js Maintainer twitter  CodeWinds  Jeff Barczewski, Founder twitter CodeWinds twitter

<p><a href="http://youtu.be/l7h69mJCzrI" rel="nofollow" target="_blank">Watch video on YouTube</a></p><ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#nodesource_team_mentioned_in_interview_" rel="nofollow" target="_blank">NodeSource Team (mentioned in interview)</a></li><li><a href="#social_media_links" rel="nofollow" target="_blank">Social Media Links</a></li></ol></li></ol><a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 006</li> <li>Published: June 18th, 2014</li> <li>Tags: nodejs, jsconf</li> <li>Duration: 23:54</li> </ul> <a></a><h2>Episode Notes</h2> <p>NodeSource is a professional Node.js software company. NodeSource provides enterprise-grade software products and educational and professional consulting services to empower companies to be effective and productive with Node.js.</p> <ul> <li><a href="https://nodesource.com/" rel="nofollow" target="_blank">https://nodesource.com/</a> - NodeSource website with team background</li> <li><a href="https://nodesource.com/products" rel="nofollow" target="_blank">https://nodesource.com/products</a> - NodeSource products<ul> <li>npm Plus - NodeSource is the premier, certified reseller of on-premise, private npm instances. NodeSource has partnered with npm Inc. to deliver a secure, on-premise, private npm solution alongside managed services such as:<ul> <li>Bespoke npm Training</li> <li>24x7x365 Support</li> <li>Custom Integrations (LDAP, SSO, etc.)</li> </ul> </li> <li>N|Ship - NodeSource’s official Node.js deployment solution to make app deployments easy, secure and automated.</li> </ul> </li> <li><a href="http://2014.jsconf.us/" rel="nofollow" target="_blank">http://2014.jsconf.us/</a> - JSConf 2014 - May 27-31, 2014 at Amelia Island, FL</li> </ul> <a></a><h3>NodeSource Team (mentioned in interview)</h3>![DanShaw][] ![JoeMccann][] ![RodVagg][] ![ChrisWilliams][] ![TrevorNorris][]<br><a></a><h3>Social Media Links</h3> <h4>NodeSource Team (partial list)</h4> <ul> <li>NodeSource <a href="https://twitter.com/nodesource" rel="nofollow" target="_blank">twitter</a></li> <li>Daniel Shaw, Co-founder <a href="https://twitter.com/dshaw" rel="nofollow" target="_blank">twitter</a></li> <li>Joe McCann, Co-founder <a href="https://twitter.com/joemccann" rel="nofollow" target="_blank">twitter</a></li> <li>Rod Vagg, Director of Engineering <a href="https://twitter.com/rvagg" rel="nofollow" target="_blank">twitter</a></li> <li>Chris Williams, Director of Professional Services <a href="https://twitter.com/voodootikigod" rel="nofollow" target="_blank">twitter</a></li> <li>Trevor Norris, Node.js Maintainer <a href="https://twitter.com/trevnorris" rel="nofollow" target="_blank">twitter</a></li> </ul> <h4>CodeWinds</h4> <ul> <li>Jeff Barczewski, Founder <a href="https://twitter.com/jeffbski" rel="nofollow" target="_blank">twitter</a></li> <li>CodeWinds <a href="https://twitter.com/codewinds" rel="nofollow" target="_blank">twitter</a></li></ul>

006 Daniel Shaw (@dshaw) introduces NodeSource at JSConf 2014

Keep up with the latest web developer technologies and news covering javascript, React.js, Node.js, HTML5. Learn the current best practices in web and mobile app development.

Saul Maddox

Saul Maddox, a software engineer for PROS, joins me in this episode of CodeWinds to discuss his Hapi-Ninja boilerplate which helps developers get up and running with the Hapi Node.js web framework. We discuss in detail the stack he has chosen and the reasons for selecting each:  Hapijs Node.js web framework Swig templates Gulp javascript streaming task runner Plugins he has included for assets and routes  Saul explains the file structure of Hapi-Ninja mentioning how to configure and get up and running with Hapi quickly and easily. Episode InfoEpisode NotesEpisode timelineGetting started with Hapi-NinjaLinks from ShowFollowing Saul Maddox Episode Info  Episode: CW 005 Published: April 7th, 2014 Tags: js, nodejs,web,framework,boilerplate Duration: 34:17  Episode Notes Episode timeline  02:06 - Introduction to the Hapi-Ninja boilerplate 05:44 - Details of Hapi-Ninja stack 06:00 - Hapi Node.js web framework 08:34 - Swig javascript templates 11:17 - Gulp Node.js streaming task runner 13:52 - Getting started with Hapi-Ninja boilerplate 14:44 - Using a watcher like node-supervisor to auto reload 15:47 - Hapi-Ninja file structure 18:38 - Configuration 18:55 - Hapi-Assets plugin for minimizing and concatenating assets 21:42 - Hapi-Named-Routes plugin 23:31 - Hapi-Cache Buster plugin for easier browser reloading in development 25:26 - Easy switching from full frontend app (PhoneGap) to a frontend and server using same folder structure 27:02 - Hapi-Ninja code is commented heavily to help new users learn 27:41 - Upgrading from Hapi 2.x to 3.x 28:37 - Contributing 30:08 - Other projects 30:25 - Ever Stain project - legacy website for being remembered 32:16 - Following Saul  Getting started with Hapi-Ninja  Install Nodejs Clone repo from GitHub Change working directory into the new path Install dependencies from npm  # after installing Node.jsgit clone https://github.com/poeticninja/hapi-ninja.gitcd hapi-ninjanpm install Links from Show  Hapi-Ninja boilerplate GitHub Repo Hapijs Node.js web framework Swig templates Gulp javascript streaming task runner Hapi-Named-Routes plugin for using named routes Hapi-Assets plugin for automatically minimizing and concatenating assets Hapi-Cache-Buster plugin which helps with serving fresh content in development Ever Stain legacy website coming soon by Saul Maddox. How will you be remembered?  Following Saul Maddox  Saul Maddox GitHub Saul Maddox Twitter

<p>Saul Maddox, a software engineer for <a href="http://pros.com" rel="nofollow" target="_blank">PROS</a>, joins me in this episode of CodeWinds to discuss his Hapi-Ninja boilerplate which helps developers get up and running with the Hapi Node.js web framework.</p> <p>We discuss in detail the stack he has chosen and the reasons for selecting each:</p> <ul> <li><a href="http://hapijs.com" rel="nofollow" target="_blank">Hapijs</a> Node.js web framework</li> <li><a href="http://paularmstrong.github.io/swig/docs/#browser" rel="nofollow" target="_blank">Swig</a> templates</li> <li><a href="http://gulpjs.com/" rel="nofollow" target="_blank">Gulp</a> javascript streaming task runner</li> <li>Plugins he has included for assets and routes</li> </ul> <p>Saul explains the file structure of Hapi-Ninja mentioning how to configure and get up and running with Hapi quickly and easily.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#episode_timeline" rel="nofollow" target="_blank">Episode timeline</a></li></ol></li><li><a href="#getting_started_with_hapi-ninja" rel="nofollow" target="_blank">Getting started with Hapi-Ninja</a></li><li><a href="#links_from_show" rel="nofollow" target="_blank">Links from Show</a><ol><li><a href="#following_saul_maddox" rel="nofollow" target="_blank">Following Saul Maddox</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 005</li> <li>Published: April 7th, 2014</li> <li>Tags: js, nodejs,web,framework,boilerplate</li> <li>Duration: 34:17</li> </ul> <a></a><h2>Episode Notes</h2> <a></a><h3>Episode timeline</h3> <ul> <li>02:06 - Introduction to the Hapi-Ninja boilerplate</li> <li>05:44 - Details of Hapi-Ninja stack</li> <li>06:00 - Hapi Node.js web framework</li> <li>08:34 - Swig javascript templates</li> <li>11:17 - Gulp Node.js streaming task runner</li> <li>13:52 - Getting started with Hapi-Ninja boilerplate</li> <li>14:44 - Using a watcher like node-supervisor to auto reload</li> <li>15:47 - Hapi-Ninja file structure</li> <li>18:38 - Configuration</li> <li>18:55 - Hapi-Assets plugin for minimizing and concatenating assets</li> <li>21:42 - Hapi-Named-Routes plugin</li> <li>23:31 - Hapi-Cache Buster plugin for easier browser reloading in development</li> <li>25:26 - Easy switching from full frontend app (PhoneGap) to a frontend and server using same folder structure</li> <li>27:02 - Hapi-Ninja code is commented heavily to help new users learn</li> <li>27:41 - Upgrading from Hapi 2.x to 3.x</li> <li>28:37 - Contributing</li> <li>30:08 - Other projects</li> <li>30:25 - Ever Stain project - legacy website for being remembered</li> <li>32:16 - Following Saul</li> </ul> <a></a><h2>Getting started with Hapi-Ninja</h2> <ul> <li>Install <a href="http://nodejs.org" rel="nofollow" target="_blank">Nodejs</a></li> <li>Clone repo from GitHub</li> <li>Change working directory into the new path</li> <li>Install dependencies from npm</li> </ul> <code># after installing Node.js<br>git clone <a href="https://github.com/poeticninja/hapi-ninja.git" rel="nofollow" target="_blank">https://github.com/poeticninja/hapi-ninja.git</a><br>cd hapi-ninja<br>npm install</code> <a></a><h2>Links from Show</h2> <ul> <li><a href="https://github.com/poeticninja/hapi-ninja" rel="nofollow" target="_blank">Hapi-Ninja</a> boilerplate GitHub Repo</li> <li><a href="http://hapijs.com" rel="nofollow" target="_blank">Hapijs</a> Node.js web framework</li> <li><a href="http://paularmstrong.github.io/swig/docs/#browser" rel="nofollow" target="_blank">Swig</a> templates</li> <li><a href="http://gulpjs.com/" rel="nofollow" target="_blank">Gulp</a> javascript streaming task runner</li> <li><a href="https://github.com/poeticninja/hapi-named-routes" rel="nofollow" target="_blank">Hapi-Named-Routes</a> plugin for using named routes</li> <li><a href="https://npmjs.org/package/hapi-assets" rel="nofollow" target="_blank">Hapi-Assets</a> plugin for automatically minimizing and concatenating assets</li> <li><a href="https://npmjs.org/package/hapi-cache-buster" rel="nofollow" target="_blank">Hapi-Cache-Buster</a> plugin which helps with serving fresh content in development</li> <li><a href="http://everstain.com/" rel="nofollow" target="_blank">Ever Stain</a> legacy website coming soon by Saul Maddox. How will you be remembered?</li> </ul> <a></a><h3>Following Saul Maddox</h3> <ul> <li><a href="https://github.com/poeticninja" rel="nofollow" target="_blank">Saul Maddox GitHub</a></li> <li><a href="https://twitter.com/poeticninja" rel="nofollow" target="_blank">Saul Maddox Twitter</a></li></ul>

005 Saul Maddox, Software Engineer at PROS, shares insights about his Hapi-Ninja boilerplate and its technology (Node.js, Hapijs web framework, Swig, Gulp)

Pete Hunt

In this episode, Jeff interviews Pete Hunt, a software engineer with Facebook about Facebook’s hot new open source js UI framework, React. React is a fresh look at how to build UI’s, attempting to improve on the limitations of the past. React gets some of its inspiration from how game engines acehieve awesome performance in their rendering pipeline. React can be used in the browser and on the server with node.js so you can have single page apps that are fully indexable by the search engines and have instant load characteristics. React has pluggable backends so it can be used to target the DOM, HTML, canvas, SVG, and other formats. The ideas and concepts behind React are very compelling, I encourage you to give it a look. Episode InfoEpisode NotesInterview timelineNotable users of ReactResourcesLinks from ShowOnline Training CoursesTutorialsOther Episode Info  Episode: CW 004 Published: March 17th, 2014 Tags: js, nodejs,UI,framework Duration: 42:17 Updated: 2014-05-01 Added links to great articles by Reto Schläpfer  Episode Notes Interview timeline  2:08 - What is React and why might people want to use it? 3:08 - The symbiotic relationship of ClojureScript and React 4:54 - The history of React and why it was created 9:43 - Updating web page with React without using data binding, a better approach inspired by game engines 13:11 - Using the virtual DOM to change the browser DOM 13:57 - Programming with React, render target HTML, canvas, other. Javascript is reference implementation of React. Node.js, ClojureScript, other environments. 16:45 - Working with designers. Contrasted with Ember and AngularJS. React encourages building a component architecture. 21:45 - JSX Compiler bridging HTML and React javascript 23:50 - Autobuilding JSX and in browser tools for React 24:50 - Tips and tricks to working with React, suggestions for getting started with React 27:17 - Rendering HTML on the server with Node.js. Pluggable React rendering backends (DOM, HTML, canvas, mixed mode static HTML + background JS binding). Better single page app performance 29:20 - React evolved through survival of the fittest at Facebook 30:15 - Ideas for having state on server and client, possibilities for using React over web sockets. 32:05 - React-multiuser - distributed shared mutable state using Firebase 33:03 - Better debugging with React using the state transitions, rewinding the state to replay the events 34:08 - Differences from Web Components 34:25 - Notable companies using React - Khan Academy, Oscars (Neartime.com), Largest bank in Russia, Facebook, Instagram 35:16 - Could a React backend plugin be created to target PDF? 36:30 - Future of React, what’s next? 39:38 - Contributing and getting help  Notable users of React  Instagram.com is 100% built on React, both public site and internal tools. Facebook.com’s commenting interface, business management tools, Lookback video editor, page insights, and most, if not all, new JS development. Khan Academy uses React for most new JS development. Shirtstarter is 100% built on React. Sberbank, Russia’s number one bank, is built with React. The New York Times’s 2014 Red Carpet Project is built with React.  Resources Links from Show  Main Reactjs.org site Github Repo for Reactjs Source Pete Hunt’s Twitter Khan Academy question editor GitHub repo written in React irc: #reactjs on freenode  Online Training Courses  CodeWinds React.js Fundamentals - The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles  “Highly recommended!” - Kevin Old, Senior Software Engineer “Look no further, the React.js Fundamentals course is the only course you will need to become an expert in React.js” - Wyatt Preul, Software Architect, nearForm “Overall I would give this React.js course a 4-star thumbs up!”- Kevin Bridges - Senior Technical Consultant at Applied Software Tutorials  Videos and podcasts covering React Getting Started with Reactjs Tutorial for React Thinking in React React examples page JSX javascript XML syntax for React  Other The articles below by Reto Schläpfer are excellent in explaining why you might consider Reactjs vs traditional MVC frameworks.  Why you might not need MVC with React.js - Reto Schläpfer React.js vs traditional MVC (Backbone, Angular) - Reto Schläpfer Joel Burget’s blog article and slides about Khan Academy switching from Backbone Views to React Reactjs Google Group Stack Overflow questions on Reactjs 

<p>In this episode, Jeff interviews Pete Hunt, a software engineer with Facebook about Facebook’s hot new open source js UI framework, React. React is a fresh look at how to build UI’s, attempting to improve on the limitations of the past. React gets some of its inspiration from how game engines acehieve awesome performance in their rendering pipeline.</p> <p>React can be used in the browser and on the server with node.js so you can have single page apps that are fully indexable by the search engines and have instant load characteristics. React has pluggable backends so it can be used to target the DOM, HTML, canvas, SVG, and other formats.</p> <p>The ideas and concepts behind React are very compelling, I encourage you to give it a look.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#interview_timeline" rel="nofollow" target="_blank">Interview timeline</a></li></ol></li><li><a href="#notable_users_of_react" rel="nofollow" target="_blank">Notable users of React</a></li><li><a href="#resources" rel="nofollow" target="_blank">Resources</a><ol><li><a href="#links_from_show" rel="nofollow" target="_blank">Links from Show</a></li><li><a href="#online_training_courses" rel="nofollow" target="_blank">Online Training Courses</a></li><li><a href="#tutorials" rel="nofollow" target="_blank">Tutorials</a></li><li><a href="#other" rel="nofollow" target="_blank">Other</a></li></ol></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 004</li> <li>Published: March 17th, 2014</li> <li>Tags: js, nodejs,UI,framework</li> <li>Duration: 42:17</li> <li>Updated: 2014-05-01 Added links to great articles by Reto Schläpfer</li> </ul> <a></a><h2>Episode Notes</h2> <a></a><h3>Interview timeline</h3> <ul> <li>2:08 - What is React and why might people want to use it?</li> <li>3:08 - The symbiotic relationship of ClojureScript and React</li> <li>4:54 - The history of React and why it was created</li> <li>9:43 - Updating web page with React without using data binding, a better approach inspired by game engines</li> <li>13:11 - Using the virtual DOM to change the browser DOM</li> <li>13:57 - Programming with React, render target HTML, canvas, other. Javascript is reference implementation of React. Node.js, ClojureScript, other environments.</li> <li>16:45 - Working with designers. Contrasted with Ember and AngularJS. React encourages building a component architecture.</li> <li>21:45 - JSX Compiler bridging HTML and React javascript</li> <li>23:50 - Autobuilding JSX and in browser tools for React</li> <li>24:50 - Tips and tricks to working with React, suggestions for getting started with React</li> <li>27:17 - Rendering HTML on the server with Node.js. Pluggable React rendering backends (DOM, HTML, canvas, mixed mode static HTML + background JS binding). Better single page app performance</li> <li>29:20 - React evolved through survival of the fittest at Facebook</li> <li>30:15 - Ideas for having state on server and client, possibilities for using React over web sockets.</li> <li>32:05 - React-multiuser - distributed shared mutable state using Firebase</li> <li>33:03 - Better debugging with React using the state transitions, rewinding the state to replay the events</li> <li>34:08 - Differences from Web Components</li> <li>34:25 - Notable companies using React - Khan Academy, Oscars (<a href="http://Neartime.com" rel="nofollow" target="_blank">Neartime.com</a>), Largest bank in Russia, Facebook, Instagram</li> <li>35:16 - Could a React backend plugin be created to target PDF?</li> <li>36:30 - Future of React, what’s next?</li> <li>39:38 - Contributing and getting help</li> </ul> <a></a><h2>Notable users of React</h2> <ul> <li><a href="http://Instagram.com" rel="nofollow" target="_blank">Instagram.com</a> is 100% built on React, both public site and internal tools.</li> <li><a href="http://Facebook.com" rel="nofollow" target="_blank">Facebook.com</a>’s commenting interface, business management tools, Lookback video editor, page insights, and most, if not all, new JS development.</li> <li>Khan Academy uses React for most new JS development.</li> <li>Shirtstarter is 100% built on React.</li> <li>Sberbank, Russia’s number one bank, is built with React.</li> <li>The New York Times’s 2014 Red Carpet Project is built with React.</li> </ul> <a></a><h2>Resources</h2> <a></a><h3>Links from Show</h3> <ul> <li><a href="http://reactjs.org/" rel="nofollow" target="_blank">Main Reactjs.org site</a></li> <li><a href="https://github.com/facebook/react" rel="nofollow" target="_blank">Github Repo for Reactjs Source</a></li> <li><a href="https://twitter.com/floydophone" rel="nofollow" target="_blank">Pete Hunt’s Twitter</a></li> <li><a href="https://github.com/khan/perseus" rel="nofollow" target="_blank">Khan Academy question editor GitHub repo written in React</a></li> <li><a>irc: #reactjs on freenode</a></li> </ul> <a></a><h3>Online Training Courses</h3> <ul> <li><a href="http://codewinds.com/react" rel="nofollow" target="_blank"></a><a href="http://codewinds.com/react" rel="nofollow" target="_blank">CodeWinds React.js Fundamentals</a> - The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles</li> </ul> <blockquote>“Highly recommended!” <br/>- Kevin Old, Senior Software Engineer</blockquote> <blockquote>“Look no further, the React.js Fundamentals course is the only course you will need to become an expert in React.js” <br/>- Wyatt Preul, Software Architect, nearForm</blockquote> <blockquote>“Overall I would give this React.js course a 4-star thumbs up!”- Kevin Bridges - Senior Technical Consultant at Applied Software</blockquote> <a></a><h3>Tutorials</h3> <ul> <li><a href="http://facebook.github.io/react/docs/videos.html" rel="nofollow" target="_blank">Videos and podcasts covering React</a></li> <li><a href="http://facebook.github.io/react/docs/getting-started.html" rel="nofollow" target="_blank">Getting Started with Reactjs</a></li> <li><a href="http://facebook.github.io/react/docs/tutorial.html" rel="nofollow" target="_blank">Tutorial for React</a></li> <li><a href="http://facebook.github.io/react/docs/thinking-in-react.html" rel="nofollow" target="_blank">Thinking in React</a></li> <li><a href="http://facebook.github.io/react/docs/examples.html" rel="nofollow" target="_blank">React examples page</a></li> <li><a href="http://facebook.github.io/react/docs/jsx-in-depth.html" rel="nofollow" target="_blank">JSX javascript XML syntax for React</a></li> </ul> <a></a><h3>Other</h3> <p>The articles below by Reto Schläpfer are excellent in explaining why you might consider Reactjs vs traditional MVC frameworks.</p> <ul> <li><a href="http://www.code-experience.com/why-you-might-not-need-mvc-with-reactjs/" rel="nofollow" target="_blank">Why you might not need MVC with React.js - Reto Schläpfer</a></li> <li><a href="http://www.code-experience.com/react-js-vs-traditional-mvc-backbone-ember-angular/" rel="nofollow" target="_blank">React.js vs traditional MVC (Backbone, Angular) - Reto Schläpfer</a></li> <li><a href="http://joelburget.com/backbone-to-react/" rel="nofollow" target="_blank">Joel Burget’s blog article and slides about Khan Academy switching from Backbone Views to React</a></li> <li><a href="http://groups.google.com/group/reactjs" rel="nofollow" target="_blank">Reactjs Google Group</a></li> <li><a href="http://stackoverflow.com/questions/tagged/reactjs" rel="nofollow" target="_blank">Stack Overflow questions on Reactjs</a></li> </ul>

004 Pete Hunt, Software Engineer for Facebook, discussing Facebook's open source js UI framework, React

SQLBits, a lightweight SQL builder for Node.js built by William Wicks, is a great compromise between using native SQL and going to a full ORM (object relational mapping tool). It is small and focused on doing one job, to help you create parameterized queries. One of its unique and killer features is that it can help you create any combination of filter queries from a single complex query based on the parameters used. My goal with this podcast is to introduce you to SQLBits and provide some insight as to why it could be a valuable tool in your Node.js toolbox. Episode InfoEpisode NotesBackground - SQL Builder vs ORMSQLBits - Node.js SQL builderSQLBits InstallSimple exampleAdditional criteriaJoinsFilters driven by defined parametersInsertsUpdatesDeletesQuick ReferenceResourcesSummary Episode Info  Episode: CW 003 Published: February 17th, 2014 Tags: nodejs, database Duration: 17:17  Episode Notes Background - SQL Builder vs ORM What is a SQL builder and how does that compare to an ORM (Object Relational Mapper)? A SQL builder like SQLBits is designed to help you to build safe parameterized SQL with a minimal abstraction layer that still allows you to write optimized SQL queries. Using parameters is important in create SQL to prevent SQL injection attacks where users enter malicious data into forms to gain access to your database. SQL builders help you to use parameters and avoid these attacks. Having used Hibernate for Java and Active Record with Rails (a couple of popular Object Relational Mappers, I’ve seen what a ORM’s can do and they are nice when they do what you want, but all to often once you get into more advanced uses, they tend to get in your way and you are fighting with the tool to try to get it to generate the SQL you want. So a SQL builder which allows you to create just the right queries but helps you deal with parameterization and tokens, provides a great balance. It stays out of your way and just helps with the bookkeeping. The sql it generates and the parameter array can be used directly with your database module like the pg Postgres client. SQLBits - Node.js SQL builder I reviewed a bunch of Node.js SQL builders listed in NPM and I was not happy with any of them until I found SQLBits. Too many of them seemed complicated or too integrated bordering on ORM capabilities. I wanted something that was simple and just server a single purpose to help me build good parameterized queries. I didn’t want it to run my queries or perform schema manipulation. I don’t want a complete new DSL (domain specific language) or API that I need to learn. SQL is already a DSL that does that just fine, but it can get tricky to manage as queries get complex. SQLBits is a simple tool which helps you generate SQL but stays out of your way. You can create custom tuned SQL which pulls back only what is needed over the wire and have it manage the parameters and tokens. SQLBits Install npm install sqlbits --save  # install and add to package.json Simple example var bits = require('sqlbits');var SQL = bits.SQL;var $ = bits.$;var AND = bits.AND;var params = { max_price: 10.00, clearance: true };var query =  SQL('select name, desc from widgets')   .WHERE('price &lt; ', $(params.max_price), AND,          'clearance = ', $(params.clearance))   .ORDERBY('name asc');// sql: select name, desc from widgets WHERE(price &lt; $1 AND clearance = $2) ORDER BY name ascconsole.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 10, true ] Additional criteria You can add in additional filter criteria with:  AND - bits.AND OR - bits.OR BETWEEN - bits.BETWEEN (discussed in depth later) .IN(array) $ - bits.$ - used to specify that something is a parameter $(params.foo)  Joins With relational data, you will often need to join tables together, and to maintain good performance these joins may need to be optimized. SQLBits allows you to perform any joins you need (left, right, inner, outer) just like you would normally with raw SQL. var bits = require('sqlbits');var SQL = bits.SQL;var query =  SQL('select w.name, c.type from widgets w ' +      'join category c on w.categoryID = c.categoryID')    .ORDERBY('w.name asc');// ORvar query =  SQL('select w.name, c.type from widgets w')    ._('join category c on w.categoryID = c.categoryID')    .ORDERBY('w.name asc');// sql: select w.name, c.type from widgets w join category c on w.categoryID = c.categoryID ORDER BY w.name ascconsole.log('sql: ', query.sql); The ._() is another way to concatenate sql together. Filters driven by defined parameters If you have ever had to create SQL with filter clauses that was driven by user input, you should really appreciate this next feature. Let’s say for instance that you have a report or catalog that you want to allow the user to provide filter criteria to limit by.  If the user doesn’t enter any criteria then return the whole list unfiltered. If they add a minimum price use that in the filter If they add a maximum price limit the rows with that criteria If they include a clearance boolean, use that in the criteria  Even in this simple example, there are many combinations of possible filters depending on whether the user enters any of the filter data points. If you were building this SQL by hand, typically you would create a series of if statements to conditionally include the filter, and you would build up an array of params which you have to manually keep track of. However with SQLBits this is child’s play. You only have to create one complex query that includes all the possible filter criteria, and SQLBits will eliminate the parts where the parameters involved are undefined. Also by using the BETWEEN command, SQLBits handles all four scenarios automatically:  min and max are defined: price BETWEEN $1 AND $2 only min is defined: price &gt;= $1 only max is defined: price &lt;= $1 neither min or max is defined: the criteria is eliminated  var bits = require('sqlbits');var SQL = bits.SQL;var $ = bits.$;var AND = bits.AND;var BETWEEN = bits.BETWEEN;function queryByParam(params) {  var query =    SQL('select name, desc from widgets')      .WHERE('price', BETWEEN(params.min, params.max), AND,             'clearance = ', $(params.clearance))      .ORDERBY('name asc');  return query;}var query = queryByParam({ min: 2.00, max: 10.00, clearance: true });// sql: select name, desc from widgets WHERE(price BETWEEN $1 AND $2 AND clearance = $3) ORDER BY name ascconsole.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 2, 10, true ]var query = queryByParam({ min: 2.00 });// sql: select name, desc from widgets WHERE price &gt;=$1 ORDER BY name ascconsole.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 2 ];var query = queryByParam({ max: 10.00 });// sql: select name, desc from widgets WHERE price &lt;=$1 ORDER BY name ascconsole.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 10 ]var query = queryByParam({ min: 2.00, max: 10.00 });// sql: select name, desc from widgets WHERE price BETWEEN $1 AND $2 ORDER BY name ascconsole.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 2, 10 ]var query = queryByParam({ min: 2.00, clearance: true });// sql:  select name, desc from widgets WHERE(price &gt;=$1 AND clearance = $2) ORDER BY name ascconsole.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 2, true ] In my opinion, this is one of the killer features of SQLBits. You create a single complex query with all the possible filters and then just provide a params object to SQLBits with a parameters object having the keys that the user wants to filter by, and it provides the customized query. This eliminates all the conditional logic which is hard to test and debug when it fails and you are left with a single complex query to maintain. Inserts Inserting data into your tables by key is as simple as providing an object to SQLBits and it will add all the keys and values. var bits = require('sqlbits');var INSERT = bits.INSERT;function insertWidget(obj) {  return INSERT.INTO('widgets', obj);}var query = insertWidget({ name: 'foo', desc: 'Foo man', price: 23.45 });//INSERT INTO widgets (name,desc,price) SELECT $1,$2,$3console.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 'foo', 'Foo man', 23.45 ]var query = insertWidget({ name: 'bar', price: 11.23 });//INSERT INTO widgets (name,price) SELECT $1,$2console.log('sql: ', query.sql);console.log('params: ', query.params); // params: [ 'bar', 11.23 ]var query = insertWidget({ name: 'bar' });// INSERT INTO widgets (name) SELECT $1console.log('sql: ', query.sql);console.log('params: ', query.params); // params: ['bar'] Updates Updating data works just like the inserts but uses the UPDATE and .SET() var bits = require('sqlbits');var UPDATE = bits.UPDATE;function updateWidget(id, updateValues) {  return UPDATE('widget')           .SET(updateValues)           ._('where id=', $(id));}var query = updateWidget(1, { name: 'bar' });// sql:  UPDATE widget SET name=$1 where id=$2console.log('sql: ', query.sql);console.log('params: ', query.params); // [ 'bar', 1 ]var query = updateWidget(2, { name: 'cat', price: 1.12 });// UPDATE widget SET name=$1,price=$2 where id=$3console.log('sql: ', query.sql);console.log('params: ', query.params); // [ 'cat', 1.12, 2 ] Note: with update’s we don’t want to have the WHERE clause collapse so it is safer to use a non-conditional string with ._('where id = ', $(obj.id)) to there is no chance of the filter clause being collapsed. Deletes Finally deletes use DELETE.FROM to specify a deletion. var bits = require('sqlbits');var DELETE = bits.DELETE;var params = { id: 10 };var query = DELETE.FROM('widgets')              ._('where id=', $(params.id));// sql: DELETE FROM widgets where id=$1console.log('sql: ', query.sql);console.log('params: ', query.params); // [ 10 ] Note: with delete’s we don’t want to have the WHERE clause collapse so it is safer to use a non-conditional string with ._('where id = ', $(obj.id)) to there is no chance of the filter clause being collapsed. Quick Reference var bits = require('sqlbits');var SQL = bits.SQL; // SQL('select name, desc from widgets')var $ = bits.$; // SQL('...').WHERE('id=', $(obj.id));var AND = bits.AND; // .WHERE('id=', $(obj.id), AND, 'type=', $(obj.type));var OR = bits.OR; // .WHERE('type=', $(obj.type), OR, 'color=', $(obj.color));var IN = bits.IN; // .WHERE('id', IN(array));var BETWEEN = bits.BETWEEN; // .WHERE(price, BETWEEN($(obj.min), $(obj.max));var INSERT = bits.INSERT; // INSERT.INTO('widgets', obj)var UPDATE = bits.UPDATE; // UPDATE('widgets').SET(updateValues)._('where id = ', $(obj.id))var DELETE = bits.DELETE; // DELETE.FROM('widgets')._('where id = ', $(obj.id)) Methods to help chain  ._() - appends to the SQL after adding a space .WHERE(...) - add a where clause which checks the params that are defined to conditionally add the filter criteria .SET(updateValues) - used with UPDATE to provide the field names and values to update .FROM('mytable') - used with DELETE to specify table .ORDERBY('name asc, qty desc') - add sorting criteria .LIMIT(number) - limit the max rows returned, defaults to 0 .OFFSET(number) - start rows at offset (for paging), defaults to 0  Accessor properties  .sql - get the parameterized SQL string .params - get the array of parameters to use with the SQL  Resources  SQLBits - GitHub repo and project readme. This brief page provides examples of how to use SQLBits and is a great place to get started  Summary SQLBits is a nice lightweight way to create safe parameterized SQL for Postgres or other ANSI SQL databases. It focuses on simply helping you build the SQL by managing the parameterization process, but you can still use the full power of SQL to create optimized queries and even special features that a particular SQL engine provides. One of its killer features is the ability to create custom filter queries based on whether parameters are defined, so you can create one complex query which is relaxed based on the parameters defined at runtime. Check out SQLBits, and let me know what you think. You can leave a comment in the discussion secion of this episode. I find it to be a great tool to help me generate SQL for Postgres and hope you will too.

<p>SQLBits, a lightweight SQL builder for Node.js built by <a href="https://github.com/williamwicks" rel="nofollow" target="_blank">William Wicks</a>, is a great compromise between using native SQL and going to a full ORM (object relational mapping tool). It is small and focused on doing one job, to help you create parameterized queries. One of its unique and killer features is that it can help you create any combination of filter queries from a single complex query based on the parameters used.</p> <p>My goal with this podcast is to introduce you to <a href="https://github.com/williamwicks/sqlbits" rel="nofollow" target="_blank">SQLBits</a> and provide some insight as to why it could be a valuable tool in your Node.js toolbox.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#background_-_sql_builder_vs_orm" rel="nofollow" target="_blank">Background - SQL Builder vs ORM</a></li><li><a href="#sqlbits_-_node_js_sql_builder" rel="nofollow" target="_blank">SQLBits - Node.js SQL builder</a></li><li><a href="#sqlbits_install" rel="nofollow" target="_blank">SQLBits Install</a></li><li><a href="#simple_example" rel="nofollow" target="_blank">Simple example</a></li><li><a href="#additional_criteria" rel="nofollow" target="_blank">Additional criteria</a></li><li><a href="#joins" rel="nofollow" target="_blank">Joins</a></li><li><a href="#filters_driven_by_defined_parameters" rel="nofollow" target="_blank">Filters driven by defined parameters</a></li><li><a href="#inserts" rel="nofollow" target="_blank">Inserts</a></li><li><a href="#updates" rel="nofollow" target="_blank">Updates</a></li><li><a href="#deletes" rel="nofollow" target="_blank">Deletes</a></li></ol></li><li><a href="#quick_reference" rel="nofollow" target="_blank">Quick Reference</a></li><li><a href="#resources" rel="nofollow" target="_blank">Resources</a></li><li><a href="#summary" rel="nofollow" target="_blank">Summary</a></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 003</li> <li>Published: February 17th, 2014</li> <li>Tags: nodejs, database</li> <li>Duration: 17:17</li> </ul> <a></a><h2>Episode Notes</h2> <a></a><h3>Background - SQL Builder vs ORM</h3> <p>What is a SQL builder and how does that compare to an ORM (Object Relational Mapper)?</p> <p>A SQL builder like SQLBits is designed to help you to build safe parameterized SQL with a minimal abstraction layer that still allows you to write optimized SQL queries. Using parameters is important in create SQL to prevent SQL injection attacks where users enter malicious data into forms to gain access to your database. SQL builders help you to use parameters and avoid these attacks.</p> <p>Having used Hibernate for Java and Active Record with Rails (a couple of popular Object Relational Mappers, I’ve seen what a ORM’s can do and they are nice when they do what you want, but all to often once you get into more advanced uses, they tend to get in your way and you are fighting with the tool to try to get it to generate the SQL you want.</p> <p>So a SQL builder which allows you to create just the right queries but helps you deal with parameterization and tokens, provides a great balance. It stays out of your way and just helps with the bookkeeping. The sql it generates and the parameter array can be used directly with your database module like the <code>pg</code> Postgres client.</p> <a></a><h3>SQLBits - Node.js SQL builder</h3> <p>I reviewed a bunch of Node.js SQL builders listed in NPM and I was not happy with any of them until I found <a href="https://github.com/williamwicks/sqlbits" rel="nofollow" target="_blank">SQLBits</a>.</p> <p>Too many of them seemed complicated or too integrated bordering on ORM capabilities. I wanted something that was simple and just server a single purpose to help me build good parameterized queries. I didn’t want it to run my queries or perform schema manipulation. I don’t want a complete new DSL (domain specific language) or API that I need to learn. SQL is already a DSL that does that just fine, but it can get tricky to manage as queries get complex.</p> <p>SQLBits is a simple tool which helps you generate SQL but stays out of your way. You can create custom tuned SQL which pulls back only what is needed over the wire and have it manage the parameters and tokens.</p> <a></a><h3>SQLBits Install</h3> <code>npm install sqlbits --save  # install and add to package.json</code> <a></a><h3>Simple example</h3> <code>var bits = require('sqlbits');<br>var SQL = bits.SQL;<br>var $ = bits.$;<br>var AND = bits.AND;<br>var params = { max_price: 10.00, clearance: true };<br>var query =<br>  SQL('select name, desc from widgets')<br>   .WHERE('price &lt; ', $(params.max_price), AND,<br>          'clearance = ', $(params.clearance))<br>   .ORDERBY('name asc');<br><br>// sql: select name, desc from widgets WHERE(price &lt; $1 AND clearance = $2) ORDER BY name asc<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 10, true ]</code> <a></a><h3>Additional criteria</h3> <p>You can add in additional filter criteria with:</p> <ul> <li><code>AND</code> - bits.AND</li> <li><code>OR</code> - bits.OR</li> <li><code>BETWEEN</code> - bits.BETWEEN (discussed in depth later)</li> <li><code>.IN(array)</code></li> <li><code>$</code> - bits.$ - used to specify that something is a parameter <code>$(params.foo)</code></li> </ul> <a></a><h3>Joins</h3> <p>With relational data, you will often need to join tables together, and to maintain good performance these joins may need to be optimized. SQLBits allows you to perform any joins you need (left, right, inner, outer) just like you would normally with raw SQL.</p> <code>var bits = require('sqlbits');<br>var SQL = bits.SQL;<br>var query =<br>  SQL('select <a href="http://w.name" rel="nofollow" target="_blank">w.name</a>, c.type from widgets w ' +<br>      'join category c on w.categoryID = c.categoryID')<br>    .ORDERBY('<a href="http://w.name" rel="nofollow" target="_blank">w.name</a> asc');<br><br>// OR<br><br>var query =<br>  SQL('select <a href="http://w.name" rel="nofollow" target="_blank">w.name</a>, c.type from widgets w')<br>    ._('join category c on w.categoryID = c.categoryID')<br>    .ORDERBY('<a href="http://w.name" rel="nofollow" target="_blank">w.name</a> asc');<br><br>// sql: select <a href="http://w.name" rel="nofollow" target="_blank">w.name</a>, c.type from widgets w join category c on w.categoryID = c.categoryID ORDER BY <a href="http://w.name" rel="nofollow" target="_blank">w.name</a> asc<br>console.log('sql: ', query.sql);</code> <p>The <code>._()</code> is another way to concatenate sql together.</p> <a></a><h3>Filters driven by defined parameters</h3> <p>If you have ever had to create SQL with filter clauses that was driven by user input, you should really appreciate this next feature.</p> <p>Let’s say for instance that you have a report or catalog that you want to allow the user to provide filter criteria to limit by.</p> <ul> <li>If the user doesn’t enter any criteria then return the whole list unfiltered.</li> <li>If they add a minimum price use that in the filter</li> <li>If they add a maximum price limit the rows with that criteria</li> <li>If they include a clearance boolean, use that in the criteria</li> </ul> <p>Even in this simple example, there are many combinations of possible filters depending on whether the user enters any of the filter data points.</p> <p>If you were building this SQL by hand, typically you would create a series of <code>if</code> statements to conditionally include the filter, and you would build up an array of params which you have to manually keep track of.</p> <p>However with SQLBits this is child’s play. You only have to create one complex query that includes all the possible filter criteria, and SQLBits will eliminate the parts where the parameters involved are <code>undefined</code>.</p> <p>Also by using the <code>BETWEEN</code> command, SQLBits handles all four scenarios automatically:</p> <ul> <li>min and max are defined: <code>price BETWEEN $1 AND $2</code></li> <li>only min is defined: <code>price &gt;= $1</code></li> <li>only max is defined: <code>price &lt;= $1</code></li> <li>neither min or max is defined: the criteria is eliminated</li> </ul> <code>var bits = require('sqlbits');<br>var SQL = bits.SQL;<br>var $ = bits.$;<br>var AND = bits.AND;<br>var BETWEEN = bits.BETWEEN;<br><br>function queryByParam(params) {<br>  var query =<br>    SQL('select name, desc from widgets')<br>      .WHERE('price', BETWEEN(params.min, params.max), AND,<br>             'clearance = ', $(params.clearance))<br>      .ORDERBY('name asc');<br>  return query;<br>}<br><br>var query = queryByParam({ min: 2.00, max: 10.00, clearance: true });<br>// sql: select name, desc from widgets WHERE(price BETWEEN $1 AND $2 AND clearance = $3) ORDER BY name asc<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 2, 10, true ]<br><br>var query = queryByParam({ min: 2.00 });<br>// sql: select name, desc from widgets WHERE price &gt;=$1 ORDER BY name asc<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 2 ];<br><br>var query = queryByParam({ max: 10.00 });<br>// sql: select name, desc from widgets WHERE price &lt;=$1 ORDER BY name asc<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 10 ]<br><br>var query = queryByParam({ min: 2.00, max: 10.00 });<br>// sql: select name, desc from widgets WHERE price BETWEEN $1 AND $2 ORDER BY name asc<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 2, 10 ]<br><br>var query = queryByParam({ min: 2.00, clearance: true });<br>// sql:  select name, desc from widgets WHERE(price &gt;=$1 AND clearance = $2) ORDER BY name asc<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 2, true ]</code> <p>In my opinion, this is one of the killer features of SQLBits. You create a single complex query with all the possible filters and then just provide a params object to SQLBits with a parameters object having the keys that the user wants to filter by, and it provides the customized query.</p> <p>This eliminates all the conditional logic which is hard to test and debug when it fails and you are left with a single complex query to maintain.</p> <a></a><h3>Inserts</h3> <p>Inserting data into your tables by key is as simple as providing an object to SQLBits and it will add all the keys and values.</p> <code>var bits = require('sqlbits');<br>var INSERT = bits.INSERT;<br><br>function insertWidget(obj) {<br>  return INSERT.INTO('widgets', obj);<br>}<br><br>var query = insertWidget({ name: 'foo', desc: 'Foo man', price: 23.45 });<br>//INSERT INTO widgets (name,desc,price) SELECT $1,$2,$3<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 'foo', 'Foo man', 23.45 ]<br><br>var query = insertWidget({ name: 'bar', price: 11.23 });<br>//INSERT INTO widgets (name,price) SELECT $1,$2<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: [ 'bar', 11.23 ]<br><br>var query = insertWidget({ name: 'bar' });<br>// INSERT INTO widgets (name) SELECT $1<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // params: ['bar']</code> <a></a><h3>Updates</h3> <p>Updating data works just like the inserts but uses the <code>UPDATE</code> and <code>.SET()</code></p> <code>var bits = require('sqlbits');<br>var UPDATE = bits.UPDATE;<br><br>function updateWidget(id, updateValues) {<br>  return UPDATE('widget')<br>           .SET(updateValues)<br>           ._('where id=', $(id));<br>}<br><br>var query = updateWidget(1, { name: 'bar' });<br>// sql:  UPDATE widget SET name=$1 where id=$2<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // [ 'bar', 1 ]<br><br>var query = updateWidget(2, { name: 'cat', price: 1.12 });<br>// UPDATE widget SET name=$1,price=$2 where id=$3<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // [ 'cat', 1.12, 2 ]</code> <p>Note: with update’s we don’t want to have the WHERE clause collapse so it is safer to use a non-conditional string with <code>._('where id = ', $(<a href="http://obj.id" rel="nofollow" target="_blank">obj.id</a>))</code> to there is no chance of the filter clause being collapsed.</p> <a></a><h3>Deletes</h3> <p>Finally deletes use <code>DELETE.FROM</code> to specify a deletion.</p> <code>var bits = require('sqlbits');<br>var DELETE = bits.DELETE;<br>var params = { id: 10 };<br><br>var query = DELETE.FROM('widgets')<br>              ._('where id=', $(<a href="http://params.id" rel="nofollow" target="_blank">params.id</a>));<br><br>// sql: DELETE FROM widgets where id=$1<br>console.log('sql: ', query.sql);<br>console.log('params: ', query.params); // [ 10 ]</code> <p>Note: with delete’s we don’t want to have the WHERE clause collapse so it is safer to use a non-conditional string with <code>._('where id = ', $(<a href="http://obj.id" rel="nofollow" target="_blank">obj.id</a>))</code> to there is no chance of the filter clause being collapsed.</p> <a></a><h2>Quick Reference</h2> <code>var bits = require('sqlbits');<br>var SQL = bits.SQL; // SQL('select name, desc from widgets')<br>var $ = bits.$; // SQL('...').WHERE('id=', $(<a href="http://obj.id" rel="nofollow" target="_blank">obj.id</a>));<br>var AND = bits.AND; // .WHERE('id=', $(<a href="http://obj.id" rel="nofollow" target="_blank">obj.id</a>), AND, 'type=', $(obj.type));<br>var OR = bits.OR; // .WHERE('type=', $(obj.type), OR, 'color=', $(obj.color));<br>var IN = <a href="http://bits.IN" rel="nofollow" target="_blank">bits.IN</a>; // .WHERE('id', IN(array));<br>var BETWEEN = bits.BETWEEN; // .WHERE(price, BETWEEN($(obj.min), $(obj.max));<br>var INSERT = bits.INSERT; // INSERT.INTO('widgets', obj)<br>var UPDATE = bits.UPDATE; // UPDATE('widgets').SET(updateValues)._('where id = ', $(<a href="http://obj.id" rel="nofollow" target="_blank">obj.id</a>))<br>var DELETE = bits.DELETE; // DELETE.FROM('widgets')._('where id = ', $(<a href="http://obj.id" rel="nofollow" target="_blank">obj.id</a>))</code> <p>Methods to help chain</p> <ul> <li><code>._()</code> - appends to the SQL after adding a space</li> <li><code>.WHERE(...)</code> - add a <code>where</code> clause which checks the params that are defined to conditionally add the filter criteria</li> <li><code>.SET(updateValues)</code> - used with <code>UPDATE</code> to provide the field names and values to update</li> <li><code>.FROM('mytable')</code> - used with <code>DELETE</code> to specify table</li> <li><code>.ORDERBY('name asc, qty desc')</code> - add sorting criteria</li> <li><code>.LIMIT(number)</code> - limit the max rows returned, defaults to 0</li> <li><code>.OFFSET(number)</code> - start rows at offset (for paging), defaults to 0</li> </ul> <p>Accessor properties</p> <ul> <li><code>.sql</code> - get the parameterized SQL string</li> <li><code>.params</code> - get the array of parameters to use with the SQL</li> </ul> <a></a><h2>Resources</h2> <ul> <li><a href="https://github.com/williamwicks/sqlbits" rel="nofollow" target="_blank">SQLBits</a> - GitHub repo and project readme. This brief page provides examples of how to use SQLBits and is a great place to get started</li> </ul> <a></a><h2>Summary</h2> <p>SQLBits is a nice lightweight way to create safe parameterized SQL for Postgres or other ANSI SQL databases. It focuses on simply helping you build the SQL by managing the parameterization process, but you can still use the full power of SQL to create optimized queries and even special features that a particular SQL engine provides.</p> <p>One of its killer features is the ability to create custom filter queries based on whether parameters are defined, so you can create one complex query which is relaxed based on the parameters defined at runtime.</p> <p>Check out SQLBits, and let me know what you think. You can leave a comment in the discussion secion of this episode. I find it to be a great tool to help me generate SQL for Postgres and hope you will too.</p>

003 SQLBits - lightweight SQL builder for Node.js for use with Postgres or other ANSI SQL databases

This is a review of the Hapi 2.0 functionality unveiled last Monday, Jan 27, 2014 at &amp;yet. The event was live streamed so I was able to watch and take notes. Eran Hammer @eranhammer, a Walmart labs engineer and lead developer for Hapi shared a top to bottom feature discussion including the new changes for version 2. Eran’s Slides My goal with this podcast is to mention some of the key changes with Hapi 2 and how you would leverage them in your code.  This review and Eran’s presentation are done such that you do not need have a familiarity with Hapi to get value, new users should come away with some understanding of Hapi and how it can be useful for building robust web applications. Episode InfoEpisode NotesBackgroundRoutes, Caching, StatePluginsAuthorizationOpsPostmile example appMajor breaking changesResourcesSummary Episode Info  Episode: CW 002 Published: February 1st, 2014 Tags: nodejs, hapijs Duration: 21:46  Episode Notes Background  show notes http://codewinds.com/podcast/002.html I have a link to the original live stream, the content starts at about 24 minutes in, so the URL in the show notes jumps directly to that spot. Hapi is the awesome open source web framework created by Walmart Labs. The Hapi framework grew out of years of development first at Yahoo as Sled, later renamed Postmile, then at Walmart Labs. Initially Eran tried to build on Express a popular web framework, but found issues with plugin order, undocumented dependencies, fragility with large team use. Hapi was developed by Walmart Labs for their mobile division Hapi is built as a scalable web framework that they could use to evolve their system over time. Initiallly used to reverse proxy or pass through requests to their existing backend written in java or other languages. Then decorate, batch, and begin to replace legacy code with new code in Node.js It ran 100% of their mobile traffic starting with Black Friday and proved its stability running at about 1-2% cpu on 50 servers throughout the highest load. Lasagna graphs flatlines for cpu and memory use Walmart starting to replace more of its legacy code with Hapi and even now part of walmart.com Hapi has great REST API support as well as infrastructure for building web apps or even serving static content Just configure the routes and you are ready, no extra plugins are necessary for the most common functionality Liked that Eran provides some quick commentary about features and how they evolved Hapi 2.0 isn’t a massive increase in new functionality, in fact it is more about taking out the cruft, eliminating the redundant ways to do things. Names that evolved over time, picking the best and cleaning up the others. This strategy shows the wisdom and experience of its architect, to resi the urge to add features by first solidifying the base.  Routes, Caching, State  Route handler(request, reply) signature changed server.route({}), can keep routes in one place while config and handler in separate module. validation is configurable, state (cookies) server.table() gives you the active routing table Hapi is a configuration centric framework, set js properties, then it tries to stay out of your way. Hapi is written so the meat of your web application can stay pure, you don’t have to deal with the HTTP mechanisms unless you need to for a special case. This leads to clean code which is more focused on your business logic and less on how to deliver via HTTP. Helpers can abstract out functionality used in many places like looking up a user profile or users shopping cart Caching is changed in 2.0, dropping support for full page caching. You can still configure the client cache headers and expiry but the team removed the page cache since they didn’t want to have a half baked solution, one that didn’t handle all the variety of use cases. They still have great support for helper caching which is more straight forward. Eran said they will possibly add page caching back in later or I’d expect there to be a basic plugin which provides a basic page cache solving the simple use cases. Route prerequesites clean up async handling, can specify arrays for parallel followed by single tasks which are processed serially and any combintion. handler.bind can be used to share state using object methods reply().hold(), later calling send() when ready Cookie ttl configuration can now be done in a central location cleaninpu up the route config Exentensive cookie functionality - automatically encoding in base64 json or even using encryption, hashing, and expiration with Eran’s Iron container  Plugins  Plugins are a cornerstone of Hapi. These differ from something like Express in that plugins are just groupings of server functionality that can be mixed together into servers. You can organize a feature’s functionality, its routes, its configuration, and dependencies. This lives like a normal node.js package and only needs a register method to use with Hapi. These can be developed, versioned separately, mixed in to the server. Hapi ensures that once they are all registered that the routes are all valid and nothing conflicts, its a large team’s dream. Easy to test new veerions. Plugins can do everything you can do with the server, add routes, helpers, etc. plugin.composer or command line option to hapi allows you to build a server with simply a package.json and a config.json specifying plugins to use. If you couple plugins along with Hapi’s Confidence module you can have one setup which can provide server config for all your various environments. The Confidence module provides dynamic configs which can be used for server environments or even runtime use for A/B testing Plugin cache is now scoped so its data won’t collide with other plugins  Authorization  Authorization is now properly extracted into schemes and strategies, basic auth, hawk, etc. It is much easier to setup authentication and you have options to make authentication required and optional. Hapi has defined life cycle extension points at which you can register to have your code called during request life cycle. For instance you could hook in at the beginning of the request, before auth, after auth, before response, etc. These extensions can specify dependencies and whether they need to go before or after others. One change to how the signature for these extensions is that they now have two params (request and reply) just like handlers. You can call the reply(null) to continue response unchanged. Website docs don’t reflect this yet, so look at the code or tests. You can now do additional things for streamed responses in your extensions like set headers as well as peek into the packets being sent back  Ops  New ops functionality Can have server load and memory use logged for easy server health montioring Configure max input size, timeouts for client and server You can register tail methods which run after a response has been sent server.inject allows you to use the hapi stack without going through the network stack, great for testing and even for production use if you need to call back in like with OAuth 2.0 There is now a simulate property for simulating connection close issues    Postmile example app  github.com/hueniverse/postmile - large sample app which has been upgraded to Hapi 2.0. It is a collaborative list making tool using hapi 2.0 and Mongo.  Major breaking changes  handler(request, reply), extensions have similar signature methods that had many aliases are now simplified like server.route page caching removed for now route prerequisites now use arrays to designate parallel tasks, and you can mix serial and parallel read up on the new auth configuration and mechanisms https://github.com/spumko/hapi/issues/1178 - github issue with all the Hapi 2.0 breaking changes  Resources  http://hapijs.com - main site, docs being added for 2.0 https://github.com/spumko/hapi - git repo for Hapi https://github.com/spumko/hapi/issues/1178 - github issue with all the Hapi 2.0 breaking changes https://github.com/spumko - extracted Hapi functionality for use with Hapi or separately https://dl.dropboxusercontent.com/u/52139546/hapi%20yet%3F.pdf - hapi-yet-slides with lots of code examples which Eran Hammer used for his live stream http://www.youtube.com/watch?v=B3u0XkbhleA&amp;t=1461 Eran Hammer Hapi Yet (Hapi 2.0) live stream at &amp;yet, link jumps directly to 24 min where talk starts https://github.com/hueniverse/postmile Eran Hammer’s sizeable hapi example using many of the Hapi features. Postmile is a collaborative list making tool using hapi 2.0 and mongo. https://github.com/poeticninja/hapi-ninja - Saul Maddox’s @poeticninja boilerplate Hapi server example Node.js, Hapi 2.0, Swig templates, Gulp task runner Follow http://codewinds.com/ blog and podcast for continuing coverage  Summary So in summary, Hapi 2.0 is a well thought out release which cleans up and solidifies the codebase while adding some key functionality that can be built on.  With Walmart putting this framework through the paces and other companies following in its footsteps like the company I am consulting to MasterCard, this framework has evolved with clarity, performance, team usability, and has great deploy and ops support. Furthermore, Eran and his team have proved that Hapi can handle Black Friday load with ultimate grace, and this new version solidifies its position among Node web frameworks. So I encourage you to check out Hapi, and let me know what you think. Head over to codewinds.com and leave me a comment or send me a tweet.

<p>This is a review of the <a href="http://hapijs.com" rel="nofollow" target="_blank">Hapi</a> 2.0 functionality unveiled last Monday, Jan 27, 2014 at &amp;yet. The event was <a href="http://www.youtube.com/watch?v=B3u0XkbhleA&amp;t=1461" rel="nofollow" target="_blank">live streamed</a> so I was able to watch and take notes. Eran Hammer <a href="https://twitter.com/eranhammer" rel="nofollow" target="_blank">@eranhammer</a>, a Walmart labs engineer and lead developer for Hapi shared a top to bottom feature discussion including the new changes for version 2. <a href="https://dl.dropboxusercontent.com/u/52139546/hapi%20yet%3F.pdf" rel="nofollow" target="_blank">Eran’s Slides</a></p> <p>My goal with this podcast is to mention some of the key changes with Hapi 2 and how you would leverage them in your code.</p> <p></p> <p>This review and Eran’s presentation are done such that you do not need have a familiarity with Hapi to get value, new users should come away with some understanding of Hapi and how it can be useful for building robust web applications.</p> <ol><li><a href="#episode_info" rel="nofollow" target="_blank">Episode Info</a></li><li><a href="#episode_notes" rel="nofollow" target="_blank">Episode Notes</a><ol><li><a href="#background" rel="nofollow" target="_blank">Background</a></li><li><a href="#routes_caching_state" rel="nofollow" target="_blank">Routes, Caching, State</a></li><li><a href="#plugins" rel="nofollow" target="_blank">Plugins</a></li><li><a href="#authorization" rel="nofollow" target="_blank">Authorization</a></li><li><a href="#ops" rel="nofollow" target="_blank">Ops</a></li><li><a href="#postmile_example_app" rel="nofollow" target="_blank">Postmile example app</a></li></ol></li><li><a href="#major_breaking_changes" rel="nofollow" target="_blank">Major breaking changes</a></li><li><a href="#resources" rel="nofollow" target="_blank">Resources</a></li><li><a href="#summary" rel="nofollow" target="_blank">Summary</a></li></ol> <a></a><h2>Episode Info</h2> <ul> <li>Episode: CW 002</li> <li>Published: February 1st, 2014</li> <li>Tags: nodejs, hapijs</li> <li>Duration: 21:46</li> </ul> <a></a><h2>Episode Notes</h2> <a></a><h3>Background</h3> <ul> <li>show notes <a href="http://codewinds.com/podcast/002.html" rel="nofollow" target="_blank">http://codewinds.com/podcast/002.html</a></li> <li>I have a link to the original live stream, the content starts at about 24 minutes in, so the URL in the show notes jumps directly to that spot.</li> <li>Hapi is the awesome open source web framework created by Walmart Labs.</li> <li>The Hapi framework grew out of years of development first at Yahoo as Sled, later renamed Postmile, then at Walmart Labs.</li> <li>Initially Eran tried to build on Express a popular web framework, but found issues with plugin order, undocumented dependencies, fragility with large team use.</li> <li>Hapi was developed by Walmart Labs for their mobile division</li> <li>Hapi is built as a scalable web framework that they could use to evolve their system over time.</li> <li>Initiallly used to reverse proxy or pass through requests to their existing backend written in java or other languages.</li> <li>Then decorate, batch, and begin to replace legacy code with new code in Node.js</li> <li>It ran 100% of their mobile traffic starting with Black Friday and proved its stability running at about 1-2% cpu on 50 servers throughout the highest load. Lasagna graphs flatlines for cpu and memory use</li> <li>Walmart starting to replace more of its legacy code with Hapi and even now part of <a href="http://walmart.com" rel="nofollow" target="_blank">walmart.com</a></li> <li>Hapi has great REST API support as well as infrastructure for building web apps or even serving static content</li> <li>Just configure the routes and you are ready, no extra plugins are necessary for the most common functionality</li> <li>Liked that Eran provides some quick commentary about features and how they evolved</li> <li>Hapi 2.0 isn’t a massive increase in new functionality, in fact it is more about taking out the cruft, eliminating the redundant ways to do things. Names that evolved over time, picking the best and cleaning up the others.</li> <li>This strategy shows the wisdom and experience of its architect, to resi the urge to add features by first solidifying the base.</li> </ul> <a></a><h3>Routes, Caching, State</h3> <ul> <li>Route <code>handler(request, reply)</code> signature changed</li> <li><code>server.route({})</code>, can keep routes in one place while config and handler in separate module. validation is configurable, state (cookies)</li> <li><code>server.table()</code> gives you the active routing table</li> <li>Hapi is a configuration centric framework, set js properties, then it tries to stay out of your way.</li> <li>Hapi is written so the meat of your web application can stay pure, you don’t have to deal with the HTTP mechanisms unless you need to for a special case. This leads to clean code which is more focused on your business logic and less on how to deliver via HTTP.</li> <li>Helpers can abstract out functionality used in many places like looking up a user profile or users shopping cart</li> <li>Caching is changed in 2.0, dropping support for full page caching. You can still configure the client cache headers and expiry but the team removed the page cache since they didn’t want to have a half baked solution, one that didn’t handle all the variety of use cases.</li> <li>They still have great support for helper caching which is more straight forward.</li> <li>Eran said they will possibly add page caching back in later or I’d expect there to be a basic plugin which provides a basic page cache solving the simple use cases.</li> <li>Route prerequesites clean up async handling, can specify arrays for parallel followed by single tasks which are processed serially and any combintion.</li> <li><code>handler.bind</code> can be used to share state using object methods</li> <li><code>reply().hold()</code>, later calling <code>send()</code> when ready</li> <li>Cookie ttl configuration can now be done in a central location cleaninpu up the route config</li> <li>Exentensive cookie functionality - automatically encoding in base64 json or even using encryption, hashing, and expiration with Eran’s Iron container</li> </ul> <a></a><h3>Plugins</h3> <ul> <li>Plugins are a cornerstone of Hapi. These differ from something like Express in that plugins are just groupings of server functionality that can be mixed together into servers. You can organize a feature’s functionality, its routes, its configuration, and dependencies. This lives like a normal node.js package and only needs a register method to use with Hapi. These can be developed, versioned separately, mixed in to the server.</li> <li>Hapi ensures that once they are all registered that the routes are all valid and nothing conflicts, its a large team’s dream. Easy to test new veerions.</li> <li>Plugins can do everything you can do with the server, add routes, helpers, etc.</li> <li><code>plugin.composer</code> or command line option to hapi allows you to build a server with simply a package.json and a config.json specifying plugins to use.</li> <li>If you couple plugins along with Hapi’s Confidence module you can have one setup which can provide server config for all your various environments.</li> <li>The Confidence module provides dynamic configs which can be used for server environments or even runtime use for A/B testing</li> <li>Plugin cache is now scoped so its data won’t collide with other plugins</li> </ul> <a></a><h3>Authorization</h3> <ul> <li>Authorization is now properly extracted into schemes and strategies, basic auth, hawk, etc. It is much easier to setup authentication and you have options to make authentication required and optional.</li> <li>Hapi has defined life cycle extension points at which you can register to have your code called during request life cycle. For instance you could hook in at the beginning of the request, before auth, after auth, before response, etc.</li> <li>These extensions can specify dependencies and whether they need to go before or after others.</li> <li>One change to how the signature for these extensions is that they now have two params (request and reply) just like handlers. You can call the reply(null) to continue response unchanged. Website docs don’t reflect this yet, so look at the code or tests.</li> <li>You can now do additional things for streamed responses in your extensions like set headers as well as peek into the packets being sent back</li> </ul> <a></a><h3>Ops</h3> <ul> <li>New ops functionality<ul> <li>Can have server load and memory use logged for easy server health montioring</li> <li>Configure max input size, timeouts for client and server</li> <li>You can register tail methods which run after a response has been sent</li> <li><code>server.inject</code> allows you to use the hapi stack without going through the network stack, great for testing and even for production use if you need to call back in like with OAuth 2.0</li> <li>There is now a simulate property for simulating connection close issues</li> </ul> </li> </ul> <a></a><h3>Postmile example app</h3> <ul> <li><a href="http://github.com/hueniverse/postmile" rel="nofollow" target="_blank">github.com/hueniverse/postmile</a> - large sample app which has been upgraded to Hapi 2.0. It is a collaborative list making tool using hapi 2.0 and Mongo.</li> </ul> <a></a><h2>Major breaking changes</h2> <ul> <li><code>handler(request, reply)</code>, extensions have similar signature</li> <li>methods that had many aliases are now simplified like server.route</li> <li>page caching removed for now</li> <li>route prerequisites now use arrays to designate parallel tasks, and you can mix serial and parallel</li> <li>read up on the new auth configuration and mechanisms</li> <li><a href="https://github.com/spumko/hapi/issues/1178" rel="nofollow" target="_blank">https://github.com/spumko/hapi/issues/1178</a> - github issue with all the Hapi 2.0 breaking changes</li> </ul> <a></a><h2>Resources</h2> <ul> <li><a href="http://hapijs.com" rel="nofollow" target="_blank">http://hapijs.com</a> - main site, docs being added for 2.0</li> <li><a href="https://github.com/spumko/hapi" rel="nofollow" target="_blank">https://github.com/spumko/hapi</a> - git repo for Hapi</li> <li><a href="https://github.com/spumko/hapi/issues/1178" rel="nofollow" target="_blank">https://github.com/spumko/hapi/issues/1178</a> - github issue with all the Hapi 2.0 breaking changes</li> <li><a href="https://github.com/spumko" rel="nofollow" target="_blank">https://github.com/spumko</a> - extracted Hapi functionality for use with Hapi or separately</li> <li><a href="https://dl.dropboxusercontent.com/u/52139546/hapi%20yet%3F.pdf" rel="nofollow" target="_blank">https://dl.dropboxusercontent.com/u/52139546/hapi%20yet%3F.pdf</a> - hapi-yet-slides with lots of code examples which Eran Hammer used for his live stream</li> <li><a href="http://www.youtube.com/watch?v=B3u0XkbhleA&amp;t=1461" rel="nofollow" target="_blank">http://www.youtube.com/watch?v=B3u0XkbhleA&amp;t=1461</a> Eran Hammer Hapi Yet (Hapi 2.0) live stream at &amp;yet, link jumps directly to 24 min where talk starts</li> <li><a href="https://github.com/hueniverse/postmile" rel="nofollow" target="_blank">https://github.com/hueniverse/postmile</a> Eran Hammer’s sizeable hapi example using many of the Hapi features. Postmile is a collaborative list making tool using hapi 2.0 and mongo.</li> <li><a href="https://github.com/poeticninja/hapi-ninja" rel="nofollow" target="_blank">https://github.com/poeticninja/hapi-ninja</a> - Saul Maddox’s <a href="https://twitter.com/poeticninja" rel="nofollow" target="_blank">@poeticninja</a> boilerplate Hapi server example Node.js, Hapi 2.0, Swig templates, Gulp task runner</li> <li>Follow <a href="http://codewinds.com/" rel="nofollow" target="_blank">http://codewinds.com/</a> blog and podcast for continuing coverage</li> </ul> <a></a><h2>Summary</h2> <p>So in summary, Hapi 2.0 is a well thought out release which cleans up and solidifies the codebase while adding some key functionality that can be built on.</p> <p> With Walmart putting this framework through the paces and other companies following in its footsteps like the company I am consulting to MasterCard, this framework has evolved with clarity, performance, team usability, and has great deploy and ops support.</p> <p>Furthermore, Eran and his team have proved that Hapi can handle Black Friday load with ultimate grace, and this new version solidifies its position among Node web frameworks.</p> <p>So I encourage you to check out Hapi, and let me know what you think. Head over to <a href="http://codewinds.com" rel="nofollow" target="_blank">codewinds.com</a> and leave me a comment or send me a tweet.</p>

002 First look at Hapijs 2.0, the Node.js web framework from Walmart Labs

I had the pleasure of interviewing Daniel Shaw (@dshaw), managing partner and CEO of The Node Firm to discuss their upcoming public Node.js training courses at Joyent and beyond.  Episode Info  Episode: CW 001 Published: September 17th, 2013 Tags: nodejs Duration: 23:59  Episode Notes The Node Firm has been doing corporate training since 2011, but now is offering some public courses starting in October 2013. The Node Firm public training courses at Joyent in San Francisco, CA:  Oct 8-10, 2013 (Tue-Thur) - Node.js Core Foundations $3,225 Oct 22-24, 2013 (Tue-Thur) - Advanced Node.js Development $3,225 (early registration price $2,985 until Sep 24) More coming to cities near you  Discussed in the 24 minute interview:  Background on The Node Firm Description of the two courses Topics covered Intended audience Prerequisites Instructors, maximum class size Course style    More information  http://thenodefirm.com/training - direct link to The Node Firm’s training information Contact The Node Firm for additional questions

<p>I had the pleasure of interviewing Daniel Shaw (<a href="http://twitter.com/dshaw" rel="nofollow" target="_blank">@dshaw</a>), managing partner and CEO of <a href="http://thenodefirm.com/" rel="nofollow" target="_blank">The Node Firm</a> to discuss their upcoming public Node.js training courses at <a href="http://www.joyent.com/" rel="nofollow" target="_blank">Joyent</a> and beyond.</p> <p></p> <h2>Episode Info</h2> <ul> <li>Episode: CW 001</li> <li>Published: September 17th, 2013</li> <li>Tags: nodejs</li> <li>Duration: 23:59</li> </ul> <h2>Episode Notes</h2> <p>The Node Firm has been doing corporate training since 2011, but now is offering some public courses starting in October 2013.</p> <p>The Node Firm public training courses at Joyent in San Francisco, CA:</p> <ul> <li>Oct 8-10, 2013 (Tue-Thur) - <a href="http://thenodefirm.com/training/core-foundations" rel="nofollow" target="_blank">Node.js Core Foundations</a> $3,225</li> <li>Oct 22-24, 2013 (Tue-Thur) - <a href="http://thenodefirm.com/training/advanced-nodejs-development" rel="nofollow" target="_blank">Advanced Node.js Development</a> $3,225 (early registration price $2,985 until Sep 24)</li> <li>More coming to cities near you</li> </ul> <p>Discussed in the 24 minute interview:</p> <ul> <li>Background on The Node Firm</li> <li>Description of the two courses<ul> <li>Topics covered</li> <li>Intended audience</li> <li>Prerequisites</li> <li>Instructors, maximum class size</li> <li>Course style</li> </ul> </li> </ul> <h2>More information</h2> <ul> <li><a href="http://thenodefirm.com/training" rel="nofollow" target="_blank">http://thenodefirm.com/training</a> - direct link to The Node Firm’s training information</li> <li><a href="http://thenodefirm.com/contact" rel="nofollow" target="_blank">Contact The Node Firm</a> for additional questions</li></ul>

001 Daniel Shaw interview discussing The Node Firm's public Node.js training courses

Good Podcast

I just finished and loved the hapi review episode. The pace and technical depth are just what I was hoping for!

Great content

CodeWinds - Leading edge web developer news and training | javascript / React.js / Node.js / HTML5 / web development - Jeff Barczewski

The best podcast episodes of anyone with an interesting story. With famous guests like Obama, LeBron James, Drake, Oprah Winfrey, Richard Branson, Michelle Obama, Serena Williams, to anyone who has a unique and interesting story to tell. Add episodes you're interested into your queue below!

Best Episodes: Personal Stories & Great Interviews

The best self improvement podcast episodes. From improving productivity, to finding purpose in your life to what constitutes freedom, this topic is on anything and everything that can help people to improve their lives. Add episodes you're interested into your queue below!