We often participate in a discussion with clients who have a very specific vision of how their final product should look like. While it’s good to know your expectations and be able to present them, it’s sometimes very difficult to connect business needs with IT capabilities. Many think that when it comes to technology only the sky is the limit, but certain ideas of how things will work in a product in connection with the required timeframe and the initial budget – are just impossible.
The reason why we create this article is to spread awareness of how important it is to analyze the idea before entering the app development phase. We, of course, are always ready to help you verify your product strategy while supporting your growth from the technical side.
In other words, how to reconcile your vision with the real technical possibilities.
From the developer’s point of view, solid business analysis is key. Developers will be responsible for coding the mechanism so they need to have an in-depth understanding of the idea behind it. During the discussion, they can notice when a given functionality is problematic or would take more time to be implemented. They can also suggest a better solution to implement a given feature.
We do exploratory meetings, the discovery phase, and many other funny-named stages before the actual product development starts. Why so? To collect as much valuable and relevant to our team information about the product. It is at this stage that we are able to correctly identify the goals of the project and notice some inconsistencies – if there are any.
As soon as we identify every potential risk and match the level of complexity to the real time of development, the better for the project.
Even a bold idea gets quickly verified when put in the UX analysis. It’s because, at the end of the day, it’s the users who will buy and use a product, not a client. That’s why when business needs and client desires are met but the level of user experience is neglected, the final result will only satisfy the client. UX analysis is to get to know users’ needs regarding the product.
Creating product prototypes (MVPs) is what saves most of the good business ideas. Yes, that’s right – saves. Because one may have a brilliant idea for a business and at the same time have no idea how to effectively convert it into a product. By prioritizing features to build the first version of an app, a client may see how it works in real life and improve it before the official release.
We’ve mentioned it previously but it’s really important to understand who’s going to use the app afterward. To whom are those fancy features designed and are they really that necessary for the project to be completed? Everything you put into the product should be there for a purpose. And every purpose should be validated and measured through building MVPs and performing UX analysis.
It is the simplest method to connect business needs with IT capabilities. Focus on whether the feature you want to implement is necessary for the user or rather it is for you to be happy.
It doesn’t mean a client can’t have its own plan for a product from A to Z. We just want to show you that certain ideas for product functionalities need to be discussed early on. The business analysis is to discuss the project before we enter into the app development phase. Everything that we are able to spot right away is what reduces the final costs of a project. On the other hand, if a client is aware that a given feature takes time to be implemented and still is confident about his choice then let’s do it!
Lastly, communication. Here we suggest you read about our best communication practices that lead any IT project to success. Being transparent and listening to each other is what builds a bridge between a client and the development team. The atmosphere allows for free discussions about the aim of the product and sharing different perspectives about potential improvements.
Having said that, the last thing that will help you connect your product vision with the real technical possibilities is the ability to express your needs but being open to someone’s ideas.
If you follow the latest trends in the app development sector, you know that React Native vs Xamarin is a common battle. They share a spot on the list of top cross-platform technologies. They both provide an environment for convenient development of products on multiple platforms at once. However, they have different functionalities which may be more useful or less, depending on the project.
Let’s explore the characteristics of the two cross-platform technologies and discover when it’s good to switch to one or the other.
We’ve already talked about what is React Native used for and how the framework makes everything easier. Let’s quickly sum up its history.
React Native is a JavaScript framework brought to us by Facebook. It’s an open-source tool that enables developers to create apps with a native-like feeling. The technology has earned the number 1 place on the list of top cross-development frameworks of 2019 and 2020. Because it’s quite young (released in 2015) it meets most expectations from developers and has a pretty extensive coding society.
On the other side of the ring, we have our old friend Xamarin.
Xamarin is also an open-source framework but it operates on C# and .Net instead of JS libraries and HTML. The framework allows for building apps for Android, iOS, and Windows, enabling sharing approx. 90% of app code across all platforms. It was released in 2013 by Microsoft and since then provides developers with a technology responsible for managing communication between shared code and platform code.
What matters for either developers or product owners is the performance, coding environment, development costs, and possible community support of a given technology.
React Native lets you build apps with lightning speed processing, highly responsive UI, and great overall performance almost identical to native mobile apps. However, the framework doesn’t support 64-bit mode on Android.
Xamarin wins one category as it fully supports 64-bit mode and it runs the fastest code on Android and iOS. Xamarin apps also are of high-performance with native-like feeling as it uses platform-specific hardware acceleration.
React Native is very flexible when it comes to choosing your development environment. As a developer, you can select any IDE (integrated dev. env.)/text editor for your work choosing from dozens available on the Internet. Atom, Sublime Text, Visual Studio Code, GNU to name a few. What’s important here is that React Native has a powerful feature called Hot Reloading. It basically means developers can see changes in the code in real-time without the need to fully reload the app. Cool stuff!
Xamarin has more to offer as it allows you to build apps in Visual Studio Code and Apple’s XCode. Choosing this framework you can write code for an iPhone app on Windows and then compile it for Mac. Visual Studio provides many useful tools and layouts to make your app works just better and it generally simplifies the whole process.
React Native capabilities were appreciated by the vast majority of developers worldwide. Because of that, the technology has a pretty extensive coding community around, ready to educate others and share knowledge about working with the framework. If you want to learn React Native, there are tons of materials available online including not only articles but also whole courses and tutorials!
Xamarin is two years older than React Native but since it’s not that popular there will be fewer people operating actively on the technology today. But if you’re looking for experienced Xamarin developers ready to help you with the code, you can find them on forums, Stack Overflow, or QA sites.
The only thing that makes React Native wins this category is the fact that enterprises have to pay for Visual Studio in order to use Xamarin, while React Native is an open-source framework = free for everyone!
The choice of what to work with lays in your hands. We collected the key information about both technologies to help you see the bigger picture. Overall, both Xamarin and React Native provide great functionalities and environment to build high-performance apps.
If you work with JavaScript and React developers then React Native will suit you well and those who love C# will probably get friends with Xamarin pretty quickly. But there’s really no rule for it. Remember that by choosing the framework on the basis of your current project specifics you’ll never go wrong!
The success of the learning app Duolingo has motivated many entrepreneurs to try to build its replica. The startup located in Pittsburgh built an app that in 2019 was valued at $1.5 billion! If they made it, why not follow the trace and create something even bigger? Today, we’re diving into the company’s success to show you how to build another Duolingo!
Duolingo is one of the most popular free educational apps. But it has earned its title. To this day the company expands and improves the UX and UI of the learning platform. Recently they designed and added brand new characters to their project world! The amount of work put into this product had to pay off one day. Now let’s decode the awesome features of the app and some must-have elements.
There are some functionalities that a language learning app should offer:
The main use of the app is to learn people. Practice makes perfect so if you want to build the best language learning app – make sure it offers a wide range of training exercises: learning new words, reading and translating text, listening comprehension, and so on.
According to Duolingo co-founder – Luis von Ahn, chatbots make the learning process less embarrassing. It’s a useful mechanism worth implementing into your learning app. Chatbots can answer basic user questions i.e. if the pronunciation of a given word is correct. They can also provide the user with assistance in a form of speech translation.
Another great idea! Duolingo has a library of stories written in different languages that help users be better in building more complex sentences. Giving users access to their favorite books written in different languages would be so cool! Especially if reading would be accompanied by useful hints and tips. For example, users would tap the difficult word to see the translation or would tap it twice to hear the correct pronunciation of it. Articles are also an option! A bit shorter form that can encourage more users.
What’s the best way to learn a foreign language? Watching series and movies in that language! Implement video content into your app to make the lessons more appealing to a user. Connect learning with relaxation offering content in a form of music videos and fragments of movies. Of course with the subtitles option 🙂
We’ve talked about the interactive ways in which you can provide language lessons to users. Now let’s talk about the way you will build your app.
Follow the good practices to build a learning app people will love!
Great apps come with great technology!
If you’re a beginner and want to set up your app without investing some major costs – use cloud services. Backend costs can be pretty overwhelming but luckily there are other solutions you can use. Build your Duolingo on Firebase! Here’s an article explaining why choosing Firebase is the best option (of course the more complex your product will get, the more advanced solution you’ll need).
When it comes to building a learning app for multiple platforms we strongly suggest you get familiar with cross-platform development and to be specific – React technology. The apps built in React have the look and feel of a native mobile app, which makes the user experience on a superior level! To know more read about 5 advantages of React js. or innovative features of react native development.
When it comes to implementing voice recognition or text-to-speech features – don’t worry we got your back! At Redvike we’ve already built projects based on that technology so we can guide you and answer all your questions. Leave us a message and we’ll reach out to you!
At Redvike we build superior apps every day
Build your app investing in a non-breakable backend technology, excellent design, and remarkable user experience. Be the visioner while having an experienced team of React developers at your service.
Let’s build something great together!
There’s no easy way for startups to become corporate giants. It takes a lot of effort to transform your company into a competitive enterprise. That’s why if you’re a founder and you think about stepping into the next chapter – we have all the answers to the question: how to scale a startup business.
Most guides for startups are focused on the initial stage of building a company. While getting the investors to notice you and raising funds is challenging, the are tons of traps on the way to scale up your business. The moment when you decide that you want your little playground to become something bigger – is the moment when you enter the boss-level in the game.
So if you’ve already got familiar with the challenges of product development for startups or you’ve read how extremely successful apps are born, let’s move on to the subject of expanding your company.
Just to make sure we are on the same page.
Growth is not the same thing as scaling. When your business grows, your company’s revenue and costs are both growing at a very similar pace. For example, when you hire new staff to serve more clients, you spend extra money to hire more people but you also get an increase in revenue from serving additional clients.
When scaling up a startup, you want to achieve exponential growth in revenue without spending an equivalent of that amount. You aim at getting maximum profit while investing little to no resources. And yes, it’s possible!
Prepare your company to become a bigger player in the market.
Don’t scale up too quickly! First, you have to dive into your business and identify its core. Because without solid foundations you can forget about surviving the scaling-up phase. What makes your company up and running? What’s your product, your target audience, and what’s the sales path?
Here’s a helpful checklist that will help you identify if you know your company in-depth.
When you’re absolutely sure you know the identity of your company, you are ready to scale it.
Sometimes it’s not worth striving for scaling your business. When you run a small, successful startup and you get to a point when you identify that the costs of scaling up will be pretty high – think twice. Better to stay a small but existing business than invest too many resources and one day vanish.
Devote some time to figure out which processes in your company can be automated and automate as much as possible. Processes such as billing, onboarding, marketing, or lead verification can be optimized by the use of automation. Speaking of optimization of work – invest in cloud services! Think about the backend of your product and the possibility to transfer it to Firebase. See what you can gain by choosing Firebase as your backend solution.
Outsourcing is also an option. When you can’t automate something, just delegate it to an external partner. Here’s an article about how to choose the right outsourcing company. Get used to outsourcing things like copywriting, design, or accounting. Sometimes it’s even better to outsource some of your projects to another tech partner. Read about successful startups that outsourced their MVPs.
If your company doesn’t have its processes well defined, you can’t enter the scale-up phase. Work on the action plan, all the procedures, and steps that make your business prospering. If you can leave your company on fire while being sure it won’t burn without you, it’s because all key people know the map to the company’s heart.
When your absence doesn’t negatively affect your company’s development – it’s victory!
At this stage, you don’t need to grow in terms of people (as you automate and outsource a lot)
Allocate your money wisely.
Probably the worst time to start building the entire line of your brand – focus on what you already have.
There are ways of how to effectively scale a startup business. However, when you think you’re prepared it’s often when you lose. It’s the mindset that tricks you and your development.
Well, it’s not that easy to step out of the optimistic zone when your startup is prospering and is about to enter the scaling phase. Most founders struggle to get there and you’re already here! But be careful with optimism. A lot of successful cases move the startup founder’s attention away from the present. Instead of looking here and now, they think about how great things are going to be.
So the last advice would be – be calm and always look realistic at your situation.
Through years of delivering innovation in the IT industry, we’ve created our own culture of working with clients. We believe good communication practices are key to successful project development and increase the chances of a longer tech partnership. Fingers crossed that our guide will spare you the unnecessary costs and stress peaking near the project deadline.
If you’re interested in our experience go ahead and read: How we deliver software projects in Redvike.
Why you should take care of the communication with clients.
Communication is to help identify the potential of the product in terms of size and in which direction it can be developed. For instance, should we start with a web application, native or hybrid? How the product can be further scaled? Only through active listening and meetings with a client, you can understand the client’s product vision. It feels like an obvious thing but very often turns out it could’ve been done better.
By maintaining the contact you increase the chances of a longer collaboration which is a valuable experience for any type of business. Also, the way you communicate with your partners says a lot about your company – it’s your business card.
Take care of transparency. It really cuts the unnecessary distance between a client and the project team.
If a client doesn’t have contact with developers – who build the actual product! – he is kind of separated from the process and any obstacles on the way. This creates a false perception of the project status. At the same time, the developers don’t get the real picture of the situation. But if we successively connect both parties, we see that the whole development team is getting more understanding of the project. People are more aware of the possible worries the client may have. Also, everyone considers the problems the team is faced with.
It’s important that each person involved in the project can share their own knowledge, experience, and talk to everyone on a daily basis.
If you think meeting once a week will do the job, you’re wrong.
Once a week you can meet with your best friends, not with your client who invests his money and time into your tech expertise. You have to care about this relationship through daily meetings and progress summaries. And it doesn’t have to be 2 hours long talk. The best way is to work in short feedback loops. This way you keep your client always updated about the current status and the stage developers are in. If your partner understands what’s going on with his product and what phase it is – you both have nothing to worry about. It is much better than goal-based communication where you only hear each other when you hand over the project.
Also, consider the fact that good communication practices will accelerate your project delivery. If you communicate effectively, the work goes smoothly and things are finished much quicker. This is how you keep your clients satisfied as they don’t overpay on product development.
The secret sauce to a successful partnership is communication. Not the one based on the obligation but understanding and willingness to help. If you show people you want to understand their point of view to provide them more information, it always turns into trustworthy and respectful contact. After all, we all want to finish the project without delays. Good communication practices help us build long-term cooperation with the client and increase the likelihood of staying in touch in case of the next brilliant idea.
When I’ve started my journey with React learning, using tools like redux, redux-thunks, reselect, or different helpful libraries came up really easy, except unit testing. Every time I’ve started writing tests for a new application I’ve dropped doing it after testing some amount of components. Mostly because I wasn’t convinced that my tests are useful for the software development cycle. The reason that happened is actually really trivial. I’ve focused on testing stuff that doesn’t matter for the end-user. I’ve been mostly focused on testing implementation details like component’s local state changes, redux reducers, actions, and so on.
The main reason is the lack of knowledge and experience. If you don’t know how good tests look like it’s harder to build them by yourself.
What’s more, the library I’ve picked didn’t help. The enzyme library is great. However, offering as many possibilities for newcomers as it does may lead to the catastrophe…
So I wrote multiple implementation details tests of my components. But the further I go, the more I noticed how useless these tests are for me. Eventually, I stopped writing tests at all. However, after some time of not testing my applications, I’ve discovered a library released by Kent C. Dodds – React Testing Library. Thanks to its simplicity, React Testing Library helps you understand what is important for app users and what you should test.
I’ve read docs, wrote some tests, and realized that it actually works. So if you’ve been in the same situation and didn’t know how to write valuable tests this article is for you.
If you want to achieve confidence by unit testing, you have to start thinking like clients of your application do. Try to cover as many user’s flows for every story as possible. Testing the weirdest edge cases will be still better than focusing on covering 100% of every function in your code.
The plan is to implement the same app but with two ways of implementing state management. The first one will be using old fashioned redux and Class Components state, while the second one will be using function components with hooks and context API for the global app state. The goal is to have two apps which will work exactly the same but implemented using different approaches. The most important is to keep the same unit tests for both of them.
So imagine you’re getting a nice design from your Product Designer and requirements from the Project Manager and task for that can look pretty much like that:
Hi buddy, we have work to do for our client. We need to implement ASAP, to be honest, we needed it yesterday 🙂 Here’s the list of functionalities of our app:
If you are lucky and have requirements listed clearly you can immediately start with implementing features. Even better will be TDD approach – start with tests and then implement it in React code.
describe("App", () => {
it("renders", () => {
render(<Main />);
});
it("it has scene with sky and ground", () => {
const { getByTestId } = render(<Main />);
expect(getByTestId("Sky")).not.toBeNull();
expect(getByTestId("Ground")).not.toBeNull();
});
it("has only one rocket on app init", () => {
const { getAllByTestId } = render(<Main />);
expect(getAllByTestId("Rocket").length).toBe(1);
});
it("should add rocket on button click", () => {
const { getAllByTestId, getByText } = render(<Main />);
expect(getAllByTestId("Rocket").length).toBe(1);
fireEvent.click(getByText(/add rocket/i));
expect(getAllByTestId("Rocket").length).toBe(2);
});
it("shouldn't allow to have more that 4 rockets", () => {
const { getAllByTestId, getByText } = render(<Main />);
const addBtn = getByText(/add rocket/i);
expect(getAllByTestId("Rocket").length).toBe(1);
fireEvent.click(addBtn); // add 2
fireEvent.click(addBtn); // add 3
fireEvent.click(addBtn); // add 4
expect(addBtn).toBeDisabled();
fireEvent.click(addBtn); // add 4
expect(getAllByTestId("Rocket").length).toBe(4);
});
it("should allow remove rockets if more than one", () => {
const { getAllByTestId, getByText } = render(<Main />);
const rmBtn = getByText(/remove rocket/i);
const addBtn = getByText(/add rocket/i);
expect(rmBtn).toBeDisabled();
fireEvent.click(addBtn); // add rocket
fireEvent.click(addBtn); // add rocket
fireEvent.click(addBtn); // add rocket
expect(getAllByTestId("Rocket").length).toBe(4);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(3);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(2);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(1);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(1);
});
it("changes toggles night/day mode", () => {
const { getByTestId } = render(<Main />);
const ground = getByTestId("Ground");
const sky = getByTestId("Sky");
const btn = getByTestId("LightModeBtn");
expect(ground).toHaveClass("ground--day");
expect(sky).toHaveClass("sky--day");
expect(btn).toHaveTextContent(/night mode: on/i);
fireEvent.click(btn);
expect(ground).toHaveClass("ground--night");
expect(sky).toHaveClass("sky--night");
expect(btn).toHaveTextContent(/night mode: off/i);
});
it("changes rocket color on click", () => {
utils.getRandomRGB = jest.fn().mockReturnValueOnce("red");
const { getByTestId } = render(<Main />);
const rocket = getByTestId("Rocket");
describe("App", () => {
it("renders", () => {
render(<Main />);
});
it("it has scene with sky and ground", () => {
const { getByTestId } = render(<Main />);
expect(getByTestId("Sky")).not.toBeNull();
expect(getByTestId("Ground")).not.toBeNull();
});
it("has only one rocket on app init", () => {
const { getAllByTestId } = render(<Main />);
expect(getAllByTestId("Rocket").length).toBe(1);
});
it("should add rocket on button click", () => {
const { getAllByTestId, getByText } = render(<Main />);
expect(getAllByTestId("Rocket").length).toBe(1);
fireEvent.click(getByText(/add rocket/i));
expect(getAllByTestId("Rocket").length).toBe(2);
});
it("shouldn't allow to have more that 4 rockets", () => {
const { getAllByTestId, getByText } = render(<Main />);
const addBtn = getByText(/add rocket/i);
expect(getAllByTestId("Rocket").length).toBe(1);
fireEvent.click(addBtn); // add 2
fireEvent.click(addBtn); // add 3
fireEvent.click(addBtn); // add 4
expect(addBtn).toBeDisabled();
fireEvent.click(addBtn); // add 4
expect(getAllByTestId("Rocket").length).toBe(4);
});
it("should allow remove rockets if more than one", () => {
const { getAllByTestId, getByText } = render(<Main />);
const rmBtn = getByText(/remove rocket/i);
const addBtn = getByText(/add rocket/i);
expect(rmBtn).toBeDisabled();
fireEvent.click(addBtn); // add rocket
fireEvent.click(addBtn); // add rocket
fireEvent.click(addBtn); // add rocket
expect(getAllByTestId("Rocket").length).toBe(4);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(3);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(2);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(1);
fireEvent.click(rmBtn);
expect(getAllByTestId("Rocket").length).toBe(1);
});
it("changes toggles night/day mode", () => {
const { getByTestId } = render(<Main />);
const ground = getByTestId("Ground");
const sky = getByTestId("Sky");
const btn = getByTestId("LightModeBtn");
expect(ground).toHaveClass("ground--day");
expect(sky).toHaveClass("sky--day");
expect(btn).toHaveTextContent(/night mode: on/i);
fireEvent.click(btn);
expect(ground).toHaveClass("ground--night");
expect(sky).toHaveClass("sky--night");
expect(btn).toHaveTextContent(/night mode: off/i);
});
it("changes rocket color on click", () => {
utils.getRandomRGB = jest.fn().mockReturnValueOnce("red");
const { getByTestId } = render(<Main />);
const rocket = getByTestId("Rocket");
expect(rocket).toHaveStyle("fill: red");
fireEvent.click(rocket);
expect(rocket).toHaveStyle("fill: yellow");
});
});
expect(rocket).toHaveStyle("fill: red");
fireEvent.click(rocket);
expect(rocket).toHaveStyle("fill: yellow");
});
});
So we wrote our tests and now we can start to implement it with redux and class components.
We will start by writing our reducer and actions as we made the decision to manage our global state with redux.
export const reducer = (state = {}, action) => {
switch (action.type) {
case 'ADD_ROCKET':
return {
...state,
rockets: [...state.rockets, state.rockets.length + 1]
}
case 'REMOVE_ROCKET':
const rockets = [...state.rockets]
rockets.pop()
return {
...state,
rockets
}
case 'TOGGLE_NIGHT_MODE':
return {
...state,
nightMode: !state.nightMode
}
default:
return state
}
}
const addRocket = () => ({ type: 'ADD_ROCKET' })
const removeRocket = () => ({ type: 'REMOVE_ROCKET' })
const toggleNightMode = () => ({ type: 'TOGGLE_NIGHT_MODE' })
class RocketStation extends React.Component {
render() {
const {
rockets,
addRocket,
removeRocket,
toggleNightMode,
nightMode
} = this.props
return (
<div className="App">
<Scene nightMode={nightMode}>
{rockets.map(id => (
<Rocket key={id} />
))}
</Scene>
<div className="actions">
<Button
variant={'success'}
onClick={addRocket}
disabled={rockets.length === 4}>
Add rocket
</Button>
<Button
variant={'danger'}
onClick={removeRocket}
disabled={rockets.length === 1}>
Remove rocket
</Button>
<Button
data-testid="LightModeBtn"
variant={'navy'}
onClick={toggleNightMode}>
{`Night mode: ${nightMode ? 'OFF' : 'ON'}`}
</Button>
</div>
</div>
)
}
}
const mapStateToProps = state => ({
rockets: state.rockets,
nightMode: state.nightMode
})
const mapDispatchToProps = {
addRocket,
removeRocket,
toggleNightMode
}
const Main = connect(
mapStateToProps,
mapDispatchToProps
)(RocketStation)
export const initialState = {
rockets: [1],
nightMode: false
}
const store = createStore(reducer, initialState)
function App() {
return (
<Provider store={store}>
<Main />
</Provider>
)
}
class Rocket extends React.Component {
constructor(props) {
super(props)
this.state = {
color: getRandomRGB()
}
this.changeColor = this.changeColor.bind(this)
}
changeColor() {
this.setState({ color: getRandomRGB() })
}
render() {
return (
<RocketIcon
data-testid="Rocket"
onClick={this.changeColor}
style={{ fill: this.state.color }}
/>
)
}
}
But after implementation like that, some of our tests may fail. So we will make a few adjustments.
We’re getting this dirty error:
Could not find “store” in the context of “Connect(RocketStation)”. Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(RocketStation) in connect options.
And that’s because we are using redux and we need to include redux <Provider> to our tests as well. To do this we will override render method from @testing-library/react
import { render as rtlRender } from '@testing-library/react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
function render(
ui,
{ state = initialState, store = createStore(reducer, state) } = {}
) {
return {
...rtlRender(<Provider store={store}>{ui}</Provider>),
store
}
}
test('renders', () => {
render(<Main />)
})
import * as utils from "../utils";
it('changes rocket color on click', () => {
utils.getRandomRGB = jest.fn().mockReturnValueOnce('red')
const { getByTestId } = render(<Main />)
const rocket = getByTestId('Rocket')
expect(rocket).toHaveStyle('fill: red')
utils.getRandomRGB = jest.fn().mockReturnValueOnce('yellow')
fireEvent.click(rocket)
expect(rocket).toHaveStyle('fill: yellow')
})
Now the coolest part. We will rewrite our app from React Class Components to function ones and instead of redux for the global state, we will use Context API. After that our tests should pass the tests without changing them AT ALL. Sounds great? Let’s do it.
Let’s start with declaring the context and it’s provider – <AppProvider>:
const MainContext = React.createContext()
export function AppProvider({ children }) {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<MainContext.Provider
value={{
rockets: state.rockets,
nightMode: state.nightMode,
addRocket: () => dispatch({ type: 'ADD_ROCKET' }),
removeRocket: () => dispatch({ type: 'REMOVE_ROCKET' }),
toggleNightMode: () => dispatch({ type: 'TOGGLE_NIGHT_MODE' })
}}>
{children}
</MainContext.Provider>
)
}
function RocketStation() {
const {
rockets,
addRocket,
removeRocket,
toggleNightMode,
nightMode
} = useContext(MainContext)
return (
<div className="App">
<Scene nightMode={nightMode}>
{rockets.map(id => (
<Rocket key={id} />
))}
</Scene>
<div className="actions">
<Button
variant={'success'}
onClick={addRocket}
disabled={rockets.length === 4}>
Add rocket
</Button>
<Button
variant={'danger'}
onClick={removeRocket}
disabled={rockets.length === 1}>
Remove rocket
</Button>
<Button
data-testid="LightModeBtn"
variant={'navy'}
onClick={toggleNightMode}>
{`Night mode: ${nightMode ? 'OFF' : 'ON'}`}
</Button>
</div>
</div>
)
}
function Rocket() {
const [color, changeColor] = useState(getRandomRGB())
return (
<RocketIcon
data-testid="Rocket"
onClick={() => {
console.log('click')
changeColor(getRandomRGB())
}}
style={{ fill: color }}
/>
)
}
function render(ui) {
return {
...rtlRender(<AppProvider>{ui}</AppProvider>)
};
}
I think I don’t even have to write much because as you’ve already seen, not focusing on implementation details is a huge benefit for your unit tests. You don’t have to struggle with testing how an app works under the hood but how it works for clients. The process of writing tests gets nicer and event TDD approach, which I recommend you to try, is easier too.
As long as the app still provides the same experience for users, you can even completely rewrite the way of implementation. It lets you refactor the codebase without any risk of the broken product.
App with Redux Class Components approach – Link to Condesandbox!
App with Hooks and Context API – Link to Codesandbox!
Have you ever considered how extremely successful apps are born? Do great virtuosos enter the market with an idea that just cannot go wrong? Or maybe it’s about a certain time in which a product is released and has perfect conditions to grow and reach users? Actually, both the timing and the people behind the idea matter and influence the route to success. But what makes apps successful is more complex, yet very interesting!
The app market is versatile. There are no guidelines on what to produce; it’s up to you what you bring up to this world. It means the possibilities are endless and there is room for everyone. Yet not everyone gets to the top with their product. Many lack the innovation spirit and create something that soon disappears from the market. Or like many startups, fail because didn’t anticipate the challenges of product development.
Now let me tell you something. Every successful product starts with a great product strategy. It’s as simple as that. Knowing this, let’s take a look at the ways you can improve your product development.
It really matters where you start if you want to end well. Below are the steps you just can’t forget about when trying to build an extremely successful product.
In other words, what is the problem you want to solve introducing your product? Here, it’s crucial to focus on the facts and the real pain points of your future customers and not on the assumptions of how it may work. We try to answer the question of what really is what you bring up to the market.
We can’t speak about success without performing a solid amount of market research. At this stage, you should collect information that will confirm your product has the potential to grow and bring value to people. The information you should get out of the market research is:
No app has earned the spotlight by an accident. There is a market niche ready for you to fill in. You just need to find it.
It’s time to define the scope of your product which is all the features included inside. Choose the characteristics you want to build first and then focus on the resources needed to build it. Apart from different technologies, there is also a question of backend development. Consider the cloud services and if there are ready solutions for you to try them out. If your product is more complex and advanced, maybe you need a custom cloud solution. Also, when you build an app, decide on the type of app which will be the best for your business and customers. It can be a PWA, native, or hybrid mobile app. As I know the pros and cons of PWA and the advantages of the hybrid app I strongly recommend this type of solution.
But you can read the articles below and figure it out by yourself 🙂
Why your startup should consider a hybrid app
How long does it take to build a mobile app?
You’re just about to build a prototype of your product but first, take a moment to focus on its future. Do you have a plan for growth? Many entrepreneurs are so excited about their idea that don’t stop for a second to consider the short-term and the long-term goals of their business. If you want to build an extremely successful product you have to know how to scale it in the future.
Releasing an MVP is the quickest way to validate your idea and get solid results on which you can work on. Even though you don’t have your end product yet, you can already give a core of its functionality to users and study their reaction. You have no idea how much valuable information you can get out of a simple MVP release. Use the feedback to implement improvements in your end product development.
Now you know how to perform the product development process flow to end up with a good MVP. It’s time to decode the “success” factor. If you take a look at the App Store top apps, you’ll see that they all share a few common characteristics. When we dive into them, the rest will get easy.
Make your app relevant to users – target their pain points! You create for people so your job is to make them love your work and appreciate the effort you put in to make their lives easier.
They say give customers value and they will stay loyal. It does work like that. If you can’t come up with an original idea, find your competition and outperform their functionality with modern, advanced technology.
Choosing to build for just one platform you basically separate yourself from half of your potential user base. Take advantage of cross-platform development and build your app using React Native. You can’t lose with React.
Use the “MVP mindset” and first, focus on one functionality. When it will be mastered then you can add more features. Nothing bad has yet come of putting all your energy into one thing.
Develop an app that’s easy to work with. Ensure simple navigation that doesn’t cause confusion and irritation. Show users that you care about their experience. Here’s a text on how you can improve your UX and functionality. Check it out 😉
Even the best software developers make mistakes sometimes. Bugs will show up and need to be fixed regularly in order to keep your users satisfied. Learn how to prepare a good update cycle for your product – from this article.
The key principle that stays behind such great brands like Apple is to create a series of complementary products that truly build on each other. Creating a successful product line is even more challenging that’s why it’s such an impressive achievement. Nevertheless, a great product strategy is what makes apps successful. You can’t skip the fundamentals if you want to deliver something awesome ??
As a React js development company with years of experience in delivering React-based applications, we know this technology inside out. And not only we know it, but we love it. Today we would like to share with you reasons behind our choice to create software projects this way. Here come the 5 advantages of React JS.
React has already become mainstream as it is widely used by the biggest companies worldwide – Google, Facebook, Netflix – to name a few. The JavaScript library revolutionized the way developers build apps and certainly, it’s a go-to if you want to create products in a more modern style. What does it bring to the table? Have a look at the advantages that lay in the very nature of React technology.
The following 5 advantages of React JS makes it a must-have in the technological stack.
The DOM is short for document object model which is a logical structure (in a tree form) of documents in HTML and XML formats. It is an object-oriented representation of the web page, which can be modified with JavaScript.
If you want to develop an app that has a lot of user interaction you have to carefully consider its tree-structure because the way it is formed impacts the performance. Everything in DOM is connected. Frequent data updates and changes at the top level of a “tree” can eventually affect the user interface and may result in poor user experience.
When we have real DOM, a server processes the changes (queries, user interaction) through an update of all the trees, which is thousands of elements! In React there is a virtual representation of the DOM that increases the speed of data updates without impacting other parts of the interface. Thanks to it, React developers use hot reloading – they can apply changes in real-time, building dynamic UI components. The virtual DOM environment increases productivity and facilitates the whole work on a project.
Another time-saving feature is the ability to reuse code components. We’ve talked about this in the article about PureComponent. Using React, developers can easily manage updates, producing code more efficiently. Building an app they can just reuse what they’ve built already and expand it to a more complex feature. All React components are isolated and change in one doesn’t affect others which makes it super convenient. In essence, code reusability makes it easier to develop and maintain a product as it allows for fast and precise testing procedures.
On the list of advantages of React JS. there is also the toolset dedicated to the development environment. React offers great developer tools to better design and debug products. The tools are in the form of a browser extension (for Chrome and Firefox) that enable developers to scan, examine, and edit the components in the virtual DOM. There are also tools specifically for those who use Redux. Redux, although it’s not a React-only thing, is something every React developer should know about. It simplifies storing and managing components states of large and complex applications. Redux tools allow developers to observe dispatched actions and modify stores.
Explicit data binding in other technologies makes it difficult to apply changes in a way that doesn’t affect the rest of the app structure. Downward data flow in React JS. ensures the changes in child structures (lower levels of tree structure) don’t affect their parents. Developers can modify the state of an object and after, only specific components will be updated. This way they produce stable code which improves app performance.
Finally, the one and only React Native which is the framework for mobile app development. The way it accelerates project delivery process is incredible. React Native is used for building natively rendering mobile apps that can be simultaneously developed for iOS and Android. Also, has a great number of innovative features that ease the work on a product by saving both costs and time. Here you can read more about what is React Native used for.
Lastly, we have to mention the community around the technology that keeps expanding. Having so many people interested in React, the number of useful resources to learn it and develop your skills are endless. If you want to learn more about React JS. you can easily find great tutorials, articles, and people that will support you on the way. Including our React JS development company 🙂
To summarize, React JS. increases productivity, improves user experience, and saves a lot of in-house resources. It’s a perfect example of a technology that lets you eat a cookie and have a cookie. It’s a solution that can significantly optimize efforts of web development and increase its efficiency. And it keeps improving!
Each year, we see the flood of new technologies and tools that shape web development and ease the work on digital products. Web development continuously evolves by adopting new solutions that greatly improve the performance of web products. Being up to date with innovations is important if you want to be prepared for the future and be ready to further develop your company. That’s why here’s a list of latest trends in web development that are worth taking a look.
We chose the top 5 trends in web development that are currently on a wave.
Creating websites that behave like native mobile apps is the most impactful trend in web development. PWAs are websites that provide users with a native-like, fast performance and can work without the Internet connection (even though users still use a browser). To build PWA is a far cheaper investment than to build a native app and you can get a lot of benefits with it. Read the pros and cons of PWA to know more about this trend. There are plenty of companies that by introducing PWA to their business, gained satisfying results. For instance, Tinder cut load time more than 50% while Starbucks doubled the number of daily app users.
Resources to start working on your PWA:
Another trend in web development is Accelerated Mobile Page (AMP), introduced by Google in 2015. AMPs are the HTML copies of the existing web pages. Similar to PWA, they improve the user experience by providing ultra-fast load time (around 2 seconds). AMP loads the static content, omitting all the animations and more complex elements and giving access to the most important information (text, images, etc.). This way the website is mobile friendly and attracts more users. Considering the fact that Google ranks higher those websites that load faster, you should definitely take care of that aspect. Develop AMP if you spot the users abandon your web app because of the low load speed. Also, it’s a good choice when most of your web app users access it via mobile devices.
Resources to start working on your AMP:
The speech recognition technology has already been implemented in the majority of devices, providing people with a quick and convenient way to search what they need. Recent studies show that 41% of adults use voice search at least once per day. What’s more, two out of five people, admit the voice-activated devices are essential to their lives. The numbers are strong enough to show the trend doesn’t go anywhere. Implementing the feature is affordable and brings additional value to an app. Introducing a dedicated voice solution to your product can turn out to be a game-changer in terms of app users and sales results. You should definitely take a closer look at the possibilities the technology offers.
Resources to start working on your voice solution:
The latest trends in web development also include security and the way web development companies approach this issue. In 2020, we expect AI technology to contribute even more to the subject of data security. 80% of telecom companies stated the security measures wouldn’t be possible without the AI technology. Why? Because only a laser-focused AI-powered machine can spot and learn how to distinguish malicious activity. The hackers’ attacks become more sophisticated these times and companies need to train AI systems to analyze the patterns of online behavior to react to any suspicious activity. Here are the steps to stay safe:
Resources to start working on your cybersecurity:
Each company should strive for making their product as engaging and attractive as possible. The trend in design that will stay with us for more than one year is called motion design. Motion UI is applied in the form of animated, dynamic elements of your digital product that attract the attention of users. Take a look at the websites and dynamic elements they have. Page transitions, background animations, modular scrolling, everything makes the web page looks more appealing to the eye and makes users want to scroll the page till the end to see how the next parts will appear. It’s exactly what you want! Entertain them and make them intrigued by the very design of your product.
Resources to start working on your UI:
What technologies of web development you should focus on, entering 2021.
React js. development beats most of the available web development technologies with its incredible performance and convenient implementation. The JavaScript library should definitely be of interest to you. With this one, you will build powerful and innovative user interfaces.
Node js. is used to build server-side apps and offers high performance, real-time development. It’s a technology that will help you deliver your MVP in a blink of an eye and will be your best friend in times of scaling a solution.
It’s a framework for building single-page applications using HTML and TypeScript. You can use it to build dynamic web apps and get the advantage of its modularity that makes the development process quicker.
A well-known Python web framework for rapid and secure web development. The very fact it is built on Python makes it more lovable for developers. They can use the easily maintainable Python syntax to build even very complex web applications.
Like every respected business, you probably want to upgrade your web product to the faster, more optimized, and competitive version. If you plan the update to be released in 2021 consider the above trends that are to stay with us for a little longer. Following the trends, your product will get more hyped while being up to date with what is currently selling.
Are you looking for a tech partner?
We will help you keep up with the latest trends. Let’s talk!
React Native earned no 1. place among the most used cross-platform mobile frameworks of 2019 and 2020. According to statistics, 42% of software developers worldwide use React Native as their main framework for mobile app development. And it’s not a surprise as the technology offers a long list of advantages that accelerate the work on a project and ease the life of developers. Here are some of the most innovative features of React Native Development.
Mobile app development is a complex process that requires an investment of time and money. When we base an app on modern, powerful technologies like React Native, not only we can speed up the whole process but also reduce the costs associated with it. The capabilities of React Native Development are very impressive that’s why the technology gained so much popularity over the years. But if the framework is new to you check out our article What is React Native used for?
The reason why this technology is so popular is the range of innovative features it offers.
React Native enables developers to build a codebase that can be reused on both iOS and Android. It means, they don’t have to build a separate app for each platform. Instead, they can use the same code and accelerate product development. Also, if a company has already developed its web app, most of its code can be used to develop a mobile app (if it was built in React). Adding up lots of prebuilt components and open-source library, the whole process goes incredibly fast and code reusability ensures there are fewer inconsistencies between two platforms.
Live updates are another innovative feature introduced by the framework. Native app development requires manual upload of the new version to the App Store or Android Play. Only after the stores approve the changes, the update is available to users and they have to install it on their smartphones. React Native development requires no such actions. An update runs locally either by using JavaScript files embedded in the app or by fetching the latest changes from a server. It means that an update is released immediately.
Native apps work faster and more smoothly but the cost of the development is high if we want to support it for both platforms. React Native enables you to build an app that offers a native-like performance as most of the code applies to iOS and Android. It’s a big saving in time and investment when we can achieve two things at once and stay native. Same things when we want to push updates – we can do it simultaneously on all platforms.
An app built with React Native has much to offer when it comes to user experience and user interface. Thanks to React JavaScript UI, the app is more responsive and has a decreased load time which greatly contributes to the level of user experience. With React Native you can build an app that has simple UI but that’s what makes it powerful and attractive to users.
Since technology is rather young, there are features that are yet to be developed. For this purpose, the framework supports the thrid-party plugins which are the Native Modules and JavaScript Modules. If you build a React Native app and want to integrate it with Google Maps or other Google tools you can do it with the help of plugins and apply all the necessary features in a convenient way.
The technology turned out to be a great choice for many top-shelf companies. Check out what are the top 5 companies using React Native.
The ability to develop a code that is compatible with all platforms can be a game-changer for a business. Cross-platform development increases the productivity of the whole project team thanks to the innovative features. Not to mention how much a company can save just by choosing React Native development.
Code reusability, lots of prebuilt components, and facilitated testing phases. It all makes the product reaches its final stage way sooner and is ready to enter the market. It’s the speed that gives your company an advantage as in such a short period of time, your app is fully prepared to be used by customers (on both platforms!).
Since you can code for two platforms at once, you don’t need to hire a room of react native developers. Depending on the complexity of your project you may need just 2 or 3 specialists in this field. A smaller team means lower costs of development. Also, the whole process takes less time as React Native greatly eases the work of developers. For you, it means less money invested in the project.
The framework is based on well-known and established through years – JavaScript. It won’t be a problem for a business owner to find developers experienced in this programming language. What’s more, React Native is a community-driven technology with an open-source environment. The benefit for your company is that all the data and documentation of the framework are available for everyone.
If you want to create a product that melts the hearts of customers with remarkable user experience, we are ready to deliver it! Only by choosing to base your app on React Native, you gain a huge advantage from the speed of development and the low costs of maintenance. We will guide you through the whole process and show you possible solutions so your product benefits more people. Let’s talk about your idea!