What the React Native docs forgot to tell you about animations

  • The last animation function is Animated.decay() and has some specific use cases.
  • Based on that and a deceleration value, it calculates what the end value is and how long the animation should take.
  • this.animatedValue = new = new Animated.ValueXY({x: 15, y: 0, y: 0});getTranslateTransformThis method with transform your {x: 10, y: 200} value to a directly usable transform.
  • this.animatedValue = new Animated.ValueXY({x: 10, y: 200});Animated.Value style={{ – transform: /// is short for Animated.View style={{ – transform: [ – {translateX: this.animatedValue.x}, – {translateY: this.animatedValue.y} – ] – }} /stopAnimationStops any running animation.
  • It has a callback with the final value after the animation has = { – console.log(‘finalValue: ‘+ finalValue) – })resetAnimationStops any running animation and sets the value back to its original value.

React Native is great. It’s pretty awesome to be able to build a native app with only JavaScript knowledge. One of the things I like most is making the animations, it can add so much to the…
Continue reading “What the React Native docs forgot to tell you about animations”

Learning Redux-Saga #javascript #reactjs #redux #redux-saga

Learning Redux-Saga  #javascript #reactjs #redux #redux-saga

  • Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state.
  • A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.
  • On the other hand, Redux-saga uses the generators which can pause, resume, and interact with the asynchronous actions by using generators.
  • Each of the following functions will return a saga effect which is an object containing instructions of what/how the action should be executed by the saga middleware.
  • takeEvery – – Resolve the effect with the result of each time that the action is received.

Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state. A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.
Continue reading “Learning Redux-Saga #javascript #reactjs #redux #redux-saga”

Learning Redux-Saga #javascript #reactjs #redux #redux-saga

Learning Redux-Saga  #javascript #reactjs #redux #redux-saga

  • Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state.
  • A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.
  • On the other hand, Redux-saga uses the generators which can pause, resume, and interact with the asynchronous actions by using generators.
  • Each of the following functions will return a saga effect which is an object containing instructions of what/how the action should be executed by the saga middleware.
  • takeEvery – – Resolve the effect with the result of each time that the action is received.

Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state. A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.
Continue reading “Learning Redux-Saga #javascript #reactjs #redux #redux-saga”

How I test redux-saga – codeburst

  • How I test redux-sagaI’m a fan of redux saga (although I’ve been keeping an eye on redux-observable too).
  • I particularly like having all async logic in one place, making it easily testable and having powerful async control flows available where necessary.Because the saga effects only construct a special object that is consumed and executed by the middleware (aka they dont do much!)
  • , it is really easy to test your sagas with no mocking required.Few points of note:The mock result of the api (true or false) is injected into the subsequent next() call after the api call.
  • clone()” to test different control flow branches

I particularly like having all async logic in one place, making it easily testable and having powerful async control flows available where necessary. Because the saga effects only construct a special…
Continue reading “How I test redux-saga – codeburst”

Passing Functions to Components

  • Pass event handlers and other functions as props to child components: – – If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
  • There are several ways to make sure functions have access to component attributes like and , depending on which syntax and build steps you are using.
  • In JavaScript, these two code snippets are not equivalent: – – Binding methods helps ensure that the second snippet works the same way as the first one.
  • Make sure you aren’t calling the function when you pass it to the component: – – Instead, pass the function itself (without parens): – – You can use an arrow function to wrap around an event handler and pass parameters: – – This is equivalent to calling : – -…
  • is a way of queuing a function to be executed in the browser at the optimal time for rendering performance.

If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
Continue reading “Passing Functions to Components”

How to Lazy Load features using React and Webpack – codeburst

How to Lazy Load features using #ReactJS and #Webpack:  by @notgiorgi

  • We don’t want to load our app’s whole component library when user enters our site.
  • We need to load components on demand, and after initial load, cache them in the memory for further use.Also we want lazy loading logic to be separated from the component implementations.We can solve this problem using Webpack import functions and Higher order components.Our HOC takes two arguments, second is the component which will be shown while component is loading, because we don’t want our users to be looking at the blank screen.First argument is the getComponent function, this is where we call Webpack import:One might ask why we don’t pass the path directly to the HOC.
  • E.g. if we do something like this: Webpack will bundle all the files in the .
  • If we pass the whole string directly import(‘.
  • But we cannot do this: path = import(path), because Webpack won’t know which files to consider, it won’t have any pattern to match files against.So our HOC, calls import before it mounts and displays the spinner while component is being downloaded.This way we can easily convert any statically imported component into lazy-loadable one.

In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them…
Continue reading “How to Lazy Load features using React and Webpack – codeburst”

How to Lazy Load features using React and Webpack – codeburst

  • We don’t want to load our app’s whole component library when user enters our site.
  • We need to load components on demand, and after initial load, cache them in the memory for further use.Also we want lazy loading logic to be separated from the component implementations.We can solve this problem using Webpack import functions and Higher order components.Our HOC takes two arguments, second is the component which will be shown while component is loading, because we don’t want our users to be looking at the blank screen.First argument is the getComponent function, this is where we call Webpack import:One might ask why we don’t pass the path directly to the HOC.
  • E.g. if we do something like this: Webpack will bundle all the files in the .
  • If we pass the whole string directly import(‘.
  • But we cannot do this: path = import(path), because Webpack won’t know which files to consider, it won’t have any pattern to match files against.So our HOC, calls import before it mounts and displays the spinner while component is being downloaded.This way we can easily convert any statically imported component into lazy-loadable one.

In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them…
Continue reading “How to Lazy Load features using React and Webpack – codeburst”

JavaScript programmers need to learn Clojure – Reactive Conf

#JavaScript programmers NEED to learn #Clojure:  #ReactJS

  • And later he gave one of the most exciting talks of the last year’s ReactiveConf:Eventually, since we are huge fans of Clojure, we joined our efforts with EuroClojure and persuaded them to organize their 2016 conference in Bratislava:Clojure has forever changed the JavaScript communityMaybe you’ve never heard about Clojure, but it’s had a huge impact on you how program front-ends regardless.
  • Redux, immutable data, time travel debugging, hot reloading — all of this has been inspired by the Clojure community.Its creator, Rich Hickey, has taught us over the time thatDaniel Higginbotham summarized the key takeaways in The Unofficial Guide to Rich Hickey’s Brain, and I strongly recommend this read for everyone coming to functional programming from the OOP world.Closer look at ClojureNow you’re wondering what makes Clojure so special.Clojure is a dialect of Lisp, and we all know the jokes about Lisp parentheses, don’t we?
  • Even the code is just a huge nested list of lists, which is where the parentheses come from.Extremely simple Clojure exampleThis simplicity makes it easy to write functions that transform and generate the Clojure code.
  • For instance, generators, CSP, destructuring, or pattern matching, are implemented in Clojure as macros.You don’t use classes and objects in Clojure, you work with pure data instead.
  • The ticket will grant you access to all three days of the event.3 days packed with React, Reason, Vue, Angular, Clojure, and moreDon’t forget to follow us on Twitter, Facebook, and Medium for exciting news and announcements.By Samuel Hapák, co-organizer of ReactiveConf

It’s half past noon, and I’m sitting in a nice hummus place in Manhattan. I look anxiously at the big clock on the wall every few seconds because I should be having lunch with David Nolen, my…
Continue reading “JavaScript programmers need to learn Clojure – Reactive Conf”

Functional programming in Javascript is an antipattern

Functional programming in #Javascript is an antipattern:  by @a_dixon #ReactJS

  • But I imagine I’ve thought them a million times before and didn’t notice because it was all I knew.I don’t think there’s a way to avoid this kind of thinking when writing Javascript using any combination of React, Redux, ImmutableJS, lodash, and functional programming libraries like lodash/fp and ramda.I need the following in my head at all times:APIs for lodash, Immutable, lodash/fp, ramda, and native JS or some combinationmutable programming techniques when working with Javascript data structuresimmutable programming techniques for Immutable data structuresimmutable programming with mutable Javascript data structures when working with Redux or ReactIf I manage to keep that in my head, I still run into a tangle of questions like the ones above.
  • The only way I can find to avoid this is to not go down the path in the first place — don’t use ImmutableJS, immutable data structures, immutable data as a concept in Redux/React, or ramda, or lodash.
  • It was designed from the ground up as a functional programming language that operates on immutable data structures.
  • Unlike with a language that compiles to Javascript alone, you have the option of writing a Java-based server that supports multithreading.As an average Javascript/Node developer, it hasn’t been difficult for me to learn the language or the ecosystem.What makes Clojurescript easier?Run whatever code you want inside your editor.You can run any code in your editor with a keypress.
  • Clojurescript is a functional programming language from the ground up — implicit return statements, functions are first class, lambda expressions, etc.Use anything you want from Javascript.

After a few months writing Clojure I began writing Javascript again. As I was trying to write something ordinary, I had the following thoughts: They seemed unnecessary. But I imagine I’ve thought…
Continue reading “Functional programming in Javascript is an antipattern”

7 tips of using MobX – Huiseoul Engineering

7 tips of using MobX  #javascript #react #mobx #reactjs

  • These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
  • In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
  • MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
  • Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
  • It might be better solution than MobX if you are working with explicitly time-based data among other situations.Redux is a predictable state container for JavaScript appsHappy coding!

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…
Continue reading “7 tips of using MobX – Huiseoul Engineering”