Query Components with Apollo – Kureev Alexey – Medium

  • After Apollo takes care of fetching and mapping props to query parameters, query component uses “function-as-a-child” approach to expose a child-independent API with injected data.Comparing to the standard approach were you add a graphql wrapper to your higher-order components, query components have a set of advantages:Testability.
  • Query Components abstracts out your data management layer so you can focus on business logic and change underlying implementation if needed.Once a Query Component is defined, it can be used as an any other component in your application:A nice side effect of decoupling higher-order components into Query Components is minimizing…
  • If the data management layer grows, it won’t affect presenter components unless they have to reflect new data properties.Mutations with Query ComponentsMutations are not that straightforward as queries.
  • For example:Therefore, you can use this component in a similar way:So the concept is the same: Query Component receives a bunch of props that are later on used as parameters for the mutation query.Testing Query Components like a Pro 😎How to test Query Components?When it comes to testing, Apollo-based components have…
  • In other words, we check if given data.x complies to the shape of the mock that was passed to the fake client during initialization.And the last, but not least: query component should call a children function with the data, pulled from Apollo.

A couple of months ago, we started to use Apollo Client (+React Native) at Werkspot. From the very beginning, Apollo overwhelmed us by the simplicity and flexibility it provides. It inspired us to…
Continue reading “Query Components with Apollo – Kureev Alexey – Medium”

The secret to being a top developer is building things! Here’s a list of fun apps to build!

  • Here’s a list of fun apps to build!You can only become a great developer by putting the effort in.
  • Keep it conflict free, use whatever you want!Project #1: Trello CloneTrello clone by Indrek Lasn — Demo LinkWhat you will learn from building a trello clone:RoutingDrag and dropCreating new objects (boards, lists, cards)Handling inputs and validationClient side path: How to use local storage, saving data to the local storage, reading data from the local…
  • What you will learn:Creating users, managing users,Interacting with a database — creating, reading, editing, deleting users.Input validation and how to work with formsProject #3: Cryptocurrency tracker (native mobile app)Github repositoryHAS to be a native app — Swift, Objective-C, React Native, Java, Kotlin allowed.
  • 😊What you will learn:How native apps work.Fetching data from an API.How native layouts work.How to work with mobile simulators.Use this API.
  • Post in comments if you find a better one.In case you’re interested in how this was built, I wrote a tutorial for it.Project #4: Setup your very own webpack config from scratchWell, technically this is not an app but it’s still extremely useful to understand how webpack works under the hood….

You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically by reading a lot about fitness. You actually need to go to the gym and put the…
Continue reading “The secret to being a top developer is building things! Here’s a list of fun apps to build!”

Redux middleware logging basics – Ben Garrison – Medium

Redux middleware logging basics  #beer #javascript #middleware #redux #react #reactjs

  • Wouldn’t it be great to be able to go back and look at the exact state of the application at the time of the crash and even the actions that led up to the crash?
  • You would have to spread these things all over your application to catch your store at different phases of change.
  • When you are working on larger apps however, there are advantages to having a single definition point.
  • Let’s see how that may look:You can see above that we have combined 3 middleware:Our new custom loggerRedux Thunk for handling asynch callsRouterMiddleware that captures and redirects actions to your historyYou can combine middleware and they have no need to know about the ‘ware that proceeds or follows them.
  • The moment between the Action and the Reducer is a critical exchange and using middleware to cleanly log state can improve the overall quality of your app.

I have written previously about REDUX and some of its features, if you are interested in a more general introduction, please check out the post below. Implementing this FLUX-style architecture has…
Continue reading “Redux middleware logging basics – Ben Garrison – Medium”

Learning React and React-Native – Jorge Rubiano – Medium

Learning React and React-Native  #react #learning #reactnative #reactjs #reactjs

  • Learning React and React-NativeExample APP React-nativeIn this article I want to show you about my learning experience using the technologies: “React” and “react-native”, in this moment I am not an expert in this topic, but I am convinced the best option for learning is to create something.Shots — Game ES6I heard about react in the past year (2016), in that year I followed the new technologies and standards in Javascript, learning about ES6, how to configure a basic environment with npm scripts, in this case I used this environment to develop simple games with ES6 and use new technologies such as Service WorkerI decided to start learn react, At first to me was complicated because I had never used webpack, the majority of tutorials I followed need configure this tool initially.Fortunately in this year emerged create-react-app, with this module is very easy to start a project with react, this module configure the environment for you.With create-react-app developed my first “Hello World”, the process was very easy, even the browser makes automatic updates, I think this is “Awesome”.
  • I read articles and saw videos about react, later I decided search a course, It called my attention “react for beginners” by Wes Bos, I learned other topics in courses the Wes Bos for example Flexbox, then I decided to take that course (React for Beginners).
  • Example Project course.The project we develop in this course is called “Catch of the day”, we not only learned about react but also firebase, in this course I understood about the JSX, state, props, components, routing, fetch data and other topics.For me this course is a good introduction to learn react, in this course we not use redux or other libraries to manage the state.Personally I liked React because I use ES6 in the process, for example .
  • reducer, arrow functions and other features , I know there are other fantastic frameworks for example AngularJS/Angular or libraries such as VueJS, At this moment for my work React is the perfect tool.

In this article I want to show you about my learning experience using the technologies: “React” and “react-native”, in this moment I am not an expert in this topic, but I am convinced the best option…
Continue reading “Learning React and React-Native – Jorge Rubiano – Medium”