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

> “It’s so rare that something actually comes along that really changes how we think about building stuff” - Michael Jackson michael-and-ryan-jpg [http://codewinds.com/assets/article/michael-jackson-and-ryan-florence-1600.jpg] 1. Episode Info 2. Show Notes and Timeline 3. Michael Jackson and Ryan Florence React.js training 4. Links and Resources 1. Online Training Courses 2. Training 3. Mentioned in the episode 4. Follow 5. Related content 6. Video 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 Michael Jackson explains the power of react-router [http://codewinds.com/assets/article/reactjs-conf-michael-dsc_5148-800.jpg] * 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 [https://twitter.com/hashtag/Emberjs?src=hash] is switching back and forth between Handlebars templates and component code. Any ideas? — Michael Jackson (@mjackson) May 13, 2014 [https://twitter.com/mjackson/status/466286956989542400] * 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 Ryan Florence demonstrates ReactJS in some interesting applications [http://codewinds.com/assets/article/reactjs-conf-ryan-dsc_5191-800.jpg] * 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 [https://twitter.com/ebryn] @ryanflorence [https://twitter.com/ryanflorence] @mjackson [https://twitter.com/mjackson] At Stampsy, JSX enabled our designer to author, refactor and tweak components at crazy speed. — Dan Abramov (@dan_abramov) September 28, 2014 [https://twitter.com/dan_abramov/status/516311214138621952] * 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 [https://reactjs-training.com/] 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 [http://codewinds.com/reactsf] LINKS AND RESOURCES ONLINE TRAINING COURSES CODEWINDS REACT.JS FUNDAMENTALS [HTTP://CODEWINDS.COM/REACT] CodeWinds React.js Fundamentals [http://codewinds.com/media/course/reactjs-101.png] [http://codewinds.com/react] 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 [http://codewinds.com/reactsf] - $300 discount for Michael Jackson & Ryan Florence React.js training in San Francisco - April 16-17, 2015 * https://reactjs-training.com/ [https://reactjs-training.com/] - Michael Jackson and Ryan Florence training events - Seattle, San Francisco, Boulder, Boston, New York, Paris * http://codewinds.com/topics [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 [http://codewinds.com/#modal-subscribe] 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 [http://www.reactrally.com/] - A community React conference August 24 - 25, 2015 in Salt Lake City, Utah * Removing User Interface Complexity, or Why React is Awesome - James Long [http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome] * Twitter on the importance of server rendering [https://blog.twitter.com/2012/improving-performance-on-twittercom] * Flipboard renders to canvas [http://engineering.flipboard.com/2015/02/mobile-web/] * The tweet that started it all for Michael [https://twitter.com/mjackson/status/466286956989542400] * ReactRouter [https://github.com/rackt/react-router] - Michael and Ryan’s isomorphic client and server routing solution for React.js * Facebook’s React.js Conf talk about Relay/GraphQL [https://www.youtube.com/watch?v=9sc8Pyc51uU] - video from React.js Conference 2015 * Dan Abramov’s tweet about designers + React [https://twitter.com/dan_abramov/status/516311214138621952] * Pete Hunt’s post about “Thinking in React” [http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html] * Former UIKit dev on React Native [https://twitter.com/andy_matuschak/status/560511204867575808] * Building the Facebook Newsfeed with Relay [https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html] * Mach HTTP client, server, and proxy [https://github.com/mjackson/mach] which runs on Node.js and in the browser FOLLOW * Michael Jackson - twitter [http://twitter.com/mjackson], github [https://github.com/mjackson] * Ryan Florence - twitter [http://twitter.com/ryanflorence], github [https://github.com/rpflorence] * Jeff Barczewski - twitter [https://twitter.com/jeffbski], github [https://github.com/jeffbski] * CodeWinds - twitter [https://twitter.com/codewinds], github [https://github.com/codewinds] RELATED CONTENT * The React.js Conference experience [http://codewinds.com/blog/2015-02-04-reactjs-conf.html] - Jeff’s article on his experience at the first React.js Conference (2015) * CodeWinds podcast episode 4 - React.js with Pete Hunt [http://codewinds.com/podcast/004.html] VIDEO Keynote on React.js and React Native from React.js Conf 2015

cw-training-logo [http://codewinds.com/assets/codewinds/codewinds-training-no-border-1400.png] 1. Episode Info 2. Transcript 1. Summary 2. Backstory 3. Regrets 4. I’m back and focussed on CodeWinds 5. React.js and other course plans 6. Provide your input 7. Thanks for your support 8. Michael Jackson and Ryan Florence React.js training discount 3. Links 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 [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 [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 [http://codewinds.com/reactsf] The links and show notes for this episode are available at http://codewinds.com/14 [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 [http://codewinds.com/reactsf] - $300 discount for Michael Jackson & Ryan Florence React.js training in San Francisco - April 16-17, 2015 * https://reactjs-training.com/ [https://reactjs-training.com/] - Other training events with Michael and Ryan - Seattle, San Francisco, Boulder, Boston, New York, Paris * http://codewinds.com/topics [http://codewinds.com/topics] - Provide your input on topics, projects, difficulties, technology that you would like covered with CodeWinds content

kevin-photo [http://codewinds.com/assets/people/kevin-old.jpg] 1. Episode Info 2. Episode Notes 1. Links 2. Videos 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 [http://nodevember.org/] 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 [http://nodevember.org/] - Nov 15-16, 2014 - Nashville TN * JSConf 2014 [http://2014.jsconf.us/] * JSConf 2014 Schedule [http://2014.jsconf.us/schedule.html] - List of all talks * Kevin Old - website [http://kevinold.com/], twitter [http://www.twitter.com/kevinold], linkedin [http://www.linkedin.com/in/kevinold] * Jeff Barczewski, Founder, CodeWinds - website [http://jeff.barczewski.com/], twitter [https://twitter.com/jeffbski], linkedin [http://www.linkedin.com/in/jeffbski] * CodeWinds - website [http://codewinds.com/], twitter [https://twitter.com/codewinds] VIDEOS * JSConf 2014 videos on YouTube [https://www.youtube.com/playlist?list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN] * Guy Bedford - Package Management for ES6 Modules video [https://www.youtube.com/watch?v=szJjsduHBQQ] * CodeWinds Episode# 8 w/Guy Bedford [http://codewinds.com/8] - Audio Interview discussing SystemJS and jspm.io * Jordan Matthiesen - Modern mobile app tool-chains video [https://www.youtube.com/watch?v=adLlCFbz49w] * Ryan Florence - Embularactymerbone video [https://www.youtube.com/watch?v=CBhDdWY1uv8] * CodeWinds Episode #7 w/Forrest Norvell [http://codewinds.com/7] - Video and Audio Interview * Forrest Norvell - Learning ES6 as a Community video [https://www.youtube.com/watch?v=MjrP-P6Pv4I] * Spike Brehm - Building Isomorphic Apps video [https://www.youtube.com/watch?v=CH6icJbLhlI] * CodeWinds Episode# 9 w/Spike Brehm [http://codewinds.com/9] - Audio Interview * Bodil Stokke - Reactive Game Development for the Discerning Hipster video [https://www.youtube.com/watch?v=x8mmAu7ZR9Y] * Kassandra Perch - Modular Application Architecture in Javascript video [https://www.youtube.com/watch?v=cTcdtfUjflI] * CodeWinds Episode# 11 w/Kassandra Perch [http://codewinds.com/11] * Kawandeep Virdee - Open Web Art: JavaScript for Interactive, Collaborative, and Hackable Art video [https://www.youtube.com/watch?v=NHs5t1l3qzo] * Brian Brennan - Being Human video [https://www.youtube.com/watch?v=LlO2_GecWo8]

kevin-photo [http://codewinds.com/assets/people/kevin-old.jpg] 1. Episode Info 2. Episode Notes 1. Links 2. Videos 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 [http://nodevember.org/] 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 [http://nodevember.org/] - Nov 15-16, 2014 - Nashville TN * JSConf 2014 [http://2014.jsconf.us/] * JSConf 2014 Schedule [http://2014.jsconf.us/schedule.html] - List of all talks * CSSConf 2014 [http://2014.cssconf.com/] * Tessel [https://tessel.io/] - Tessel is a microcontroller that runs JavaScript * Spark [https://www.spark.io/] - Spark OS is a complete open source operating system for cloud-connected things * Kevin Old - website [http://kevinold.com/], twitter [http://www.twitter.com/kevinold], linkedin [http://www.linkedin.com/in/kevinold] * Jeff Barczewski, Founder, CodeWinds - website [http://jeff.barczewski.com/], twitter [https://twitter.com/jeffbski], linkedin [http://www.linkedin.com/in/jeffbski] * CodeWinds - website [http://codewinds.com/], twitter [https://twitter.com/codewinds] VIDEOS * JSConf 2014 videos on YouTube [https://www.youtube.com/playlist?list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN] * Neil Green - Custom DSL’s in JavaScript video [https://www.youtube.com/watch?v=lm4jEcnWeKI] * Ron Evans - CylonJS: The JavaScript Evolution of Open Source Robotics video [https://www.youtube.com/watch?v=bnFWskconEg] * Travel Perkins - Battle Harnened Node.js for the Enterprise video [https://www.youtube.com/watch?v=6QAzmJ4lm3I] * Nico Bevacqua - Front End Ops Tooling video [https://www.youtube.com/watch?v=Y0DCZdAruvo] * CodeWinds Podcast Episode# 10 w/Nico Bevacqua [http://codewinds.com/10] - Audio Interview * Mark DiMarco - User interface algorithms video [https://www.youtube.com/watch?v=90NsjKvz9Ns] * Nick Bray - Native code on the web video [https://www.youtube.com/watch?v=-xNZYr40QOk] * Ryan Paul - Composing frontend Web applications with MontagsJS video [https://www.youtube.com/watch?v=8-Vyus9TPZ0] * G. C. Marty - Play DVDs in JS for the sake of interoperability video [https://www.youtube.com/watch?v=lb-8euLqfRg] * Marco Rogers - Finding patterns across front-end frameworks video [https://www.youtube.com/watch?v=Bp3Jy177NvU] * David Calhoun - Realtime satellite tracking in the browser video [https://www.youtube.com/watch?v=vtvHOn9mIB4] * Jenn Schiffer - What’s the harm in sorting: sanitizing inputs for more optimized JavaScript video [https://www.youtube.com/watch?v=pj4U_W0OFoE]

kassandra-photo [http://codewinds.com/assets/people/kassandra-perch-jsconf-2014.jpg] 1. Episode Info 2. Episode Notes 1. Links 2. Video / 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 [http://kperch.github.io/] * Girl Develop It! - Austin, TX chapter [http://www.meetup.com/Girl-Develop-It-Austin/] * Kassandra Perch’s twitter [http://twitter.com/nodebotanist] * Jeff Barczewski, Founder, CodeWinds twitter [https://twitter.com/jeffbski] * CodeWinds twitter [https://twitter.com/codewinds] VIDEO / SLIDES Watch Kassandra Perch’s JSConf talk on YouTube [https://www.youtube.com/watch?v=cTcdtfUjflI&list=PL37ZVnwpeshFXOP2lqCUykYPXYNsK_fgN&index=15]