The Road to learn React

  • All JavaScript ES6 features I describe on the journey to learn React will transition from ES5 to ES6 in the book.
  • The book does not only teach React, but also all useful JavaScript ES6 features for React.
  • I encourage developers to reach out after they have finished the book and build their first React applications.
  • This book focuses on React as the first building block.
  • It only delivers the view layer, but the React ecosystem is a whole flexible and interchangeable framework.

The Road to learn React is your way to learn ReactJs in 2017 by building a real world application. You will get a foundation before you dive into more advanced topics like Redux, Flow and React Router. It’s a huge tutorial …
Continue reading “The Road to learn React”

Super excited to have @ryanflorence speaking about #react router at the next ReactNYC, meetup Aug 15 #reactjs

  • In this meetup we have two special guests: James Baxley from South Carolina (working on Apollo for Meteor) and Ryan Florence from Seattle (co-creator of react-router).
  • By the way, Ryan Florence and Michael Jackson have React workshops for beginners and experienced developers on 16, 17 and 18 of August.
  • In this talk I will propose some different approaches to hiring, recruiting, and managing developers by borrowing best practices from the tattoo industry.
  • Easy Server Side Rendering with GraphQL

    James Baxley

    React has unified how teams think about application development.

  • Let’s talk: [masked]

    At Enigma, we believe in the power of data to tackle tough challenges.

In this meetup we have two special guests: James Baxley from South Carolina (working on Apollo for Meteor) and Ryan Florence from Seattle (co-creator of re
Continue reading “Super excited to have @ryanflorence speaking about #react router at the next ReactNYC, meetup Aug 15
#reactjs”

Best practices for JavaScript function parameters

  • The problem with passing an object as a parameter to a function is that it’s not clear what values you should put into it.
  • One common thing in FP is to partially apply your functions, which is much harder to do if your function takes its parameters as an object.
  • While separate parameters are a good starting point, we run into trouble as soon as the function has optional parameters.
  • For functions with a single optional parameter, the solution is simple:

    Best practice: optionals come last

    However, if we have more than one optional parameter, the problem is… what if we only need to pass one optional parameter?

  • You can pass in parameters easily as an object, but the properties for the object can be easily seen from the function’s signature.

From time to time, people ask things like “should I use objects to pass function arguments”. I’m sure you recognize the pattern, as it’s common with many libraries:
Continue reading “Best practices for JavaScript function parameters”

Maximizing Debuggability with Redux – LogRocket

Maximizing Debuggability with Redux  #javascript #react #logging #debugging #redux #reactjs

  • By using front end logging tools like LogRocket, developers can easily understand and fix tricky bugs in production by reviewing the actions and state changes leading up to a bug.While this information is immediately useful in any Redux app, there is a lot more we can achieve by architecting an app with logging in mind.
  • When debugging issues, we can dig into this state object to see information on in-flight requests, queryCount (if we’re polling on a query), and timings.Storing this information in Redux is critical, since it puts full context on all network activity in the Redux logs.Rolling your own data fetching “framework”If you’d prefer a simpler approach, you can roll your own data fetching “framework” by simply dispatching explicit actions when querying and receiving data from the network.For example, lets say we’re building a blogging app.
  • This would then update state appropriately to:postsQuery: { url: ‘api.blog.com/posts’, isPending: true, data: […],}This example is far from thorough, but the idea is that by being explicit with Redux actions for each part of the request lifecycle, it becomes easy to debug any potential race condition or network error.Handling other sources of non-determinismIn addition to network fetching, there are lots of other sources of non-determinism that can cause bugs.
  • For example:myWebSocket.onmessage = function (event) { store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, } store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, }That way, when looking at the Redux logs for an error or user-reported issue, we can see all the data that was received over the websocket and, crucially, relate it in time to other redux actions and network requests.Local StorageOften, an app needs to read from local storage when it first starts up.
  • Once you get the library set up, you’ll see a new key in your Redux store called routing with information on the current router state.In addition, react-router-redux dispatches actions like @@router/LOCATION_CHANGE when its state changes.Also of note is that using react-router-redux lets you rewind router state when time-traveling in redux-devtools, since its state its state is derived from the state in Redux.A note about local vs Redux stateI don’t want to get into the debate on local vs Redux state here, but production Redux logging does change the calculus of this decision in some cases.

In my last blog post, Redux Logging in Production, I discussed one of the most important benefits of using Redux — debuggability. By using front end logging tools like LogRocket, developers can…
Continue reading “Maximizing Debuggability with Redux – LogRocket”

How to Be A JavaScript Developer – Ken Rogers – Medium

How to Be A JavaScript Developer  #meteor #javascript #webdevelopment #react #reactjs

  • But I’ve always found that the best way to learn web development is to just build things.Meteor is a great way to get started just building things.It’s become a little more complex since its early days, but with the right setup and direction, it can still be a great way to bootstrap reactive applications.I think it’s a fantastic way to get started learning JavaScript development, or branch out into a new framework if you’ve already been using JavaScript for a while.So I wanted to put together this little guide that will serve as a potential path to learning web development with Meteor and React.All of these are resources that I have personally used and have served me well in learning.
  • Learn ES2015This free walkthrough of ES2015 does a great job of introducing you to the basics and walking you through how to use all of the new shiny things.Step 2 — Learn MeteorAlright, now that you’re familiar with JavaScript and its new syntax and capabilities, it’s time to dive in to Meteor.The Meteor TutorialThe official tutorial from Meteor.
  • The Meteor GuideAfter you’ve been introduced to Meteor with the tutorial, dive in to the guide to learn how to structure your project, and to get some more in depth knowledge on the finer points of MeteorStep 3 — Learn ReactSo you’ve got a decent handle on Meteor, not let’s dive into React.The React DocsThe official React docs do a good job of introducing you to the concepts and how to think in a React-ish way.2.
  • It also comes with GitHub source code so you can use it as an example.Phase 2 — BuildStep 1 — Experiment with BaseNow that you’ve got a good grasp on how to develop using Meteor and React, it’s time to start building things.Base is a Meteor boilerplate project to help you bootstrap your Meteor projects.It’s built with React and also uses React Router.In my opinion, downloading Base and digging into it, hacking on it, and using to as the starting point for your own project is one of the best ways to learn development with Meteor.By digging into Base, you’ll get an idea of best practices when building things with Meteor and React, and you’ll be able to use it as a template for building projects.Using the books and courses from the Learn phase as your foundation, you’ll be able to understand how Base is put together and how it all works.Really take the time to dig into every different component and figure out how everything is working.
  • Resist the urge to bounce around from framework to framework, constantly switching to whatever seems coolest.Instead, find problems that need to be solved, figure out a way to solve them with web applications, and then find the proper tool for the job.One of the most important skills for a professional developer is being able to build usable applications that solve real problems for real people.If you can find examples of those out in the wild, and build up a portfolio of yourself solving those with web apps, you’ll be indispensable.So now that you know the basics of JavaScript development with Meteor and React, I want you to get out there and start using that knowledge to solve real problems.Share that knowledge and those solutions with others.

A few years ago, I stumbled on a video of somebody making a responsive, real-time web app using something called Meteor. If you haven’t seen it yet, I recommend giving it a watch. It was pretty…
Continue reading “How to Be A JavaScript Developer – Ken Rogers – Medium”

Building a new backend — Part 1 – lookapanda – Medium

Building a new backend — Part 1  #discord #webdevelopment #react #javascript #node #reactjs

  • Building a new backend — Part 1In this story I’d like to document my experiences in building a new backend.It represents my personal experiences and is not related to my profession as a Software Engineer.What is the backend for?This is a legitimate question, of course.
  • There is no real goal yet, I see it more like a personal challenge and practice.Some of my first pieces of code using LaravelI already built a backend quite some time ago already written in PHP using Laravel.
  • Times change quickly in a developers world and today I’m mostly programming in JavaScript (ES6, Node, etc.) and not that much in PHP anymore.Today (2017) I want to create something new again using the most modern technologies I can find.
  • REST APIs access information after all and said information needs to be stored somewhere.With my PHP API I was using MySQL (or actually MariaDB) and with my Node API it was MongoDB.
  • It should be easy to use but also powerful.In my next blog post I will share my first experiences in using Cassandra for building the database and probably also my decission for the framework I’ll be using.If you’ve come so far to read this very line, I want to say thank you.

In this story I’d like to document my experiences in building a new backend.
It represents my personal experiences and is not related to my profession as a Software Engineer. This is a legitimate…
Continue reading “Building a new backend — Part 1 – lookapanda – Medium”

Creating a Plugin System and Preact in Pictures

  • Preact is an implementation of the React API that’s significantly smaller and faster.
  • If you’ve ever wondered how the virtual dom and component model really work, this will be a great introduction that should prepare you for reading the source code of Preact or React.
  • After hearing this talk, you’ll have a great new tool for developing performance-critical UIs and a better mental model of how React works on the inside.
  • Creating a Plugin System with Apollo and the Coral Project by Riley Davis

    The Coral Project attempts to rethink how we create community online with open source tools and best practices.

  • This talk is about how we enabled development of third-party plugins with Apollo and GraphQL to help publishers adapt our commenting platform to meet their needs.

Come downtown for food, drink, talks, and socializing. We’ll be talking about ReactJS and related technologies. There is a lightrail stop at the corner of
Continue reading “Creating a Plugin System and Preact in Pictures”