The joy of React+Redux with Elixir/OTP

The joy of React+Redux with Elixir/OTP  #ReactJS #Redux #Elixir

  • Graphically, this is the schema of a Redux app: – – Basically, Redux does the following: – – An OTP GenServer does the following: – – In short, we can use the same mental model for the client and server side.
  • We can dispatch events to Elixir, compute a new version state server side, propagate this state to redux, and our views will get updated automatically.
  • We have just implemented the thick red arrows: – – We will update the store with the state that comes from the server in two different situations.
  • With this, we have connected the server state with Redux state.
  • But, if you want to have state shared between different users, or we want to have pieces of the state in the server for other reasons, such as enforcing validation rules, we can use the same mental mode with Elixir GenServers.

Digital solutions partner. High quality work with Symfony, React and Elixir.
Continue reading “The joy of React+Redux with Elixir/OTP”

5 Best JavaScript Frameworks in 2017

  • In the meanwhile, JavaScript web frameworks can become a silver bullet for quick web app development.
  • Angular.js is often referred to as an MVW (Model-View-Whatever) framework and among the top benefits, for startups and mid-sized companies, people name: quick code production, easy testing of any app part and two-way data binding (changes in the backend are immediately reflected on the UI).
  • As for now, it is reasonably called the most used JS framework for SPAs (Single-Page Applications) development and it boasts the largest community of developers.
  • Back in 2015 Ember was called the best javascript framework for web application, leaving behind React and AngularJS.
  • When it comes to quick web development or prototyping, JavaScript frameworks are among the most favorable and 2017 won’t become an exception.

JavaScript popularity continues its rising. In 2016 we’ve witnessed such great changes, as AngularJS entire upgrade and introduction of Angular 2, ultimate dominating of jQuery that is applied on 96.5% of all JS sites, evolution of ECMAScript, two updates of Node.js in April and October accordingly, React finest hours, and even more.  What to expect from 2017?
Continue reading “5 Best JavaScript Frameworks in 2017”

Easily Build Forms in React Native – React Native Development – Medium

How to Easily Build Forms in React Native:

  • It makes creating forms in React Native easy by simply having to define a model for that form and you’re set!
  • Snack will automatically pull that in for us.Tip: I find that scanning the QR code from the Expo app on my device gives the best development experience.If you prefer to do this outside of Snack make sure you install tcomb-form-native via npm or yarn.What We’re BuildingWe’ll be building a sign up…
  • First we need to get the Form component (line 6) then we need to render the form and pass our model to it as the type (line 19).
  • We create an object, add a key named “fields” (since we’re modifying the fields), add a key to this object that aligns with the key in our model (“terms”), and then inside that object we set the new label.Code is easier to understand.Then pass those options to the Form componentLet’s…
  • Just about everything in the default form is customizable.As you can see tcomb-form-native makes building forms quick and easy but also gives you the flexibility you need to create forms the give users the necessary info and fit with the rest of your app (unless I’m designing of course).

If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably build quite a few (sign in, sign up, edit profile, etc.) Yeah…
Continue reading “Easily Build Forms in React Native – React Native Development – Medium”

8 things to learn in React before using Redux

8 things to learn in #ReactJS before using #Redux:

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

Organize a Large React Application and Make It Scale

Organize a Large React Application and Make It Scale

☞ 

#reactjs

  • In this article, I’ll talk you through the decisions I make when building React application: picking tools, structuring files, and breaking components up into smaller pieces.
  • Once you’ve done that you can always import files relative to the directory:

    Whilst this does tie your application code to Webpack, I think it’s a worthwhile trade-off because it makes your code much easier to follow and imports much easier to add, so this is a step I’ll take with all new projects.

  • For example, we have a folder called that contains all components relating to the shopping cart view, and a folder called that contains code for listing things users can buy on a page.
  • Following on from the previous rule, we stick to a convention of one React component file, and the component should always be the default export.
  • Normally our React files look like so:

    In the case that we have to wrap the component in order to connect it to a Redux data store, for example, the fully wrapped component becomes the default export:

    You’ll notice that we still export the original component; this is really useful for testing where you can work with the “plain” component and not have to set up Redux in your unit tests.

I’ll talk you through the decisions I make when building React applications :picking tools, structuring files,and breaking components up into smaller pieces
Continue reading “Organize a Large React Application and Make It Scale”

Re-created Twitter Moments using my Parallax Swiper component. #reactnative

Re-created Twitter Moments using my Parallax Swiper component. #reactnative

  • This component is inspired by an iOS pattern that no react-native-parallax-whatever previously delivered.
  • It emulates this pattern by using the ScrollView component which has features like velocity, paging, and platform specific easing curves; It also has optional dividers to split up each page.
  • You can see this pattern in apps like iOS Camera Roll, Twitter Moments, Kylie Jenner’s app, Vevo’s app, and more.
  • Hit me up on Twitter, or create an issue.

react-native-parallax-swiper – Full Screen Parallax Swiper Allowing Arbitrary UI Injection
Continue reading “Re-created Twitter Moments using my Parallax Swiper component. #reactnative”