- Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load.
- In this post we’ll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.
- You already split your app into different routes, so adding in code splitting on top of that feels pretty natural.
- Instead of thinking about code splitting as splitting your app up by its routes, you should think of it as splitting your app up by its components ( s are just components, after all).
- You already know how to dynamically import modules with , now you just need to figure out which components in your app you can hold off downloading until your user needs them.
Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load. In this post we’ll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.
Continue reading “Code Splitting with React and React Router”
- Weâll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).
- Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from the Apollo bindings.Now to use it weâll go to the end of our handleSubmit function…
- Click âLog Outâ, refresh the app, and youâll see it no longer brings you to profile.Login with Email andÂ PasswordLogging in with email and password is just like sign up, weâre just calling a different mutation.
- Iâll let the code do the talking.Now to call the login function available on this.props, save the JWT and change screens (on success) or show an error.Showing User InformationThe final thing weâll do, to demonstrate that things are actually working and itâs not just a big facade, is show the…
- The server is expecting the JWT to be coming in the authorization header and uses that to find the current user.To pass this token along with the request weâll use setContext from the apollo-link-context which is another apollo link weâll use.
This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…
Continue reading “GraphQL Authentication with React Native & Apollo [Part 2/2]”
- We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.PhysicalityThe core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around.
- Itâs drag and drop mechanism is fairly standard and serves as a good reference point.Movementinstant movement isÂ standardWhen dragging items around, other items disappear and reappear as needed.
- At no point is an item instantly moved anywhereâââregardless of whether it is dragging or not.Knowing when toÂ moveIt is quite common for drag and drop interactions to be based on the position that user started the drag fromimpact based on selection pointIn this example the user is grabbing the top…
- Put another way: once the centre position of an item (A) goes over the edge of another item (B), B moves out of the way.AccessibleTraditionally drag and drop interactions have been exclusively a mouse or touch interaction.
- We add a tab-index to draggable items to ensure that even you are not wrapping something that is usually interactive (such as a div) then the user will still be able to access it with their keyboard to drag it.Not forÂ everyoneThere are a lot of libraries out there that allow…
We have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible
Continue reading “Rethinking drag and drop – Alex Reardon – Medium”
In this post, I will talk about static site generators. How they have evolved and why I switched from a Ghost powered site to Gatsby.js, a modern static site generator.
Continue reading “Modern static site generation”
- When your app initiates this communication, your backend sends its certificate (which contains the public key).
- Your app then checks that the certificate has been signed by a Certificate Authority (CA) that is trusted by the user’s device.
- SSL pinning narrows these avenues of attack by letting you define the exact certificate or public key that your app will accept when communicating with your backend.
- If you use a service like AWS Certificate Manager or Let’s Encrypt your certificate and public key could change at any time.
- TrustKit also comes with a handy tool for extracting public keys from certificates and converting them to Base64 encoded SHA256 hashes.
We’ve been using React Native for over a year now and we’re loving how quickly we can create feature-rich and performant apps for iOS and Android. So far w…
Continue reading “A Year of React Native: SSL Pinning – Made by Many”
- In this article, we are going to make a comparison of two frameworks, React Native and Ionic, based on our real time experience in frontend development.When developing various products, either for ourselves or for the clients, there has always been a question that interested us: how can we narrow down time and cost of product development.Android and especially iOS developers have always been valued greatly and cost a lot, and when developing for two platforms one has to spend twice as much money.At some point we were experimenting with Cordova, but it didn’t feel as if we can get something valuable out of it.Then we noticed Ionic.
- Now we would like to give you detailed frameworks comparison and explain you why React Native is better solution for our developers.We were always trying to get more expertise on different technologies and use them in practice in order to define the best solution.
- We also kept on watching Ioinc2, which was supposed to become an innovation that would solve many issues that we had while working with Ionic1.The approaches of given frameworks are very different but for us React Native is an ultimate winner.We chose main React Native advantages that are superior in relation to Ionic1/2:Response time that could be compared to native apps.Ability to reuse the code parts (not all code) for desktop (web apps) and mobile (mobile apps) and even for the server.
- (:-))Incredibly convenient toolchain for developers that allows to quickly develop and debug the app.Big amount of elaborated components from Facebook.Even bigger amount of components from community.Ability to realize the ideas of functional programming in development which ensures great stability and reliability of the app and relative scaling simplicity.However, we don’t make a point here that React Native is 100% perfect.
When you start to use new technology, you cannot be sure it will be the best solution. In this article, we are going to make a comparison of two frameworks, React Native and Ionic, based on our real t
Continue reading “Building an app: React Native vs Ionic – Hacker Noon”
- /src /components /containers /actions /reducers /sagasThis is the obvious layout and the one that’s most people’s go-to: group the same ”type” of things together.
- Besides, some things just belong together: you’d never use the ToDoItemList container with a different component so should they really be living in different parts of the codebase?The Wooden House: Group by FeatureIn the second project, having learned some good learnings from our straw house approach, we decided to do a 180: rather than separating all of our Redux bits based on what they do, we grouped them all together by the feature in which they belong.
- /src /components /PureComponent1 index.js index.spec.js style.css /PureComponent2 index.js index.spec.js style.css /PureComponent3 /features /feature1 component.js container.js actions.js reducer.js saga.js /feature2 /feature3This layout minimises jumping around in the codebase when developing features.
- It is also easy to end up with just one or two bulky “features” that encompass the entire application.The Stone House: Group by FunctionThe stone house layout basically appeared by letting the codebase grow naturally.
- We are now 4 months into the project and this is what we’ve come up with:/src /components /Component1 index.js — may be a pure component or a component wrapped in a container, the consumer doesn’t care anyway index.spec.js /Component2 /Component3 /reducers index.js /Reducer1 index.js — actions are in the same file as reducers index.spec.js someSideEffect.js — we use redux-loop here /Reducer2 /Reducer3Whereas this way of laying out the application may look a bit hard to grasp initially, it’s worked out really well for us so far.
Defining any kind of “good practices” in tech is always a tricky business. Good practices are subjective, heavily dependent to your ways of working and often your personal preference. The best we can…
Continue reading “The Three Pigs: how to structure your React-Redux application – Frontend Weekly”