TOP ELEARNING APPS BUILT WITH REACT NATIVE
Canvas LMS by Instructure edtech company provides infrastructure and resources for institutions of K-12 and higher learning. The Network offers 300+ courses from 150 institutional partners including USC, UNLV, Berkeley, etc.
The company guarantees automatic updates of security patches and stores info in Amazon Web Services (AWS) data centers. They ensure material privacy and security by using HTTPS for all communications and encrypting traffic with 128-bit TLS/SSL.
“Canvas is a trusted name in learning management because, among other reasons, we take privacy seriously as a technical, ethical and practical requirement of educational data,” said Mitch Benson, senior vice president of product at Instructure.
The Teacher app allows educators to promote their courses on the fly, both inside and outside the classroom. Currently, it is compatible with iOS and Android devices, but the React Native version of the app is only available on iOS. Canvas Teacher is free to download and provides the following feature set:
- Update course content and publish an assignment.
- Communicate with students sending announcements and messages, participating in course discussions.
- Browse submissions and grade student assignments.
The team, headed by Layne Moseley, Lead iOS Engineer at Instructure, refused Apple tools and decided to use React Native because of its faster development cycle.
“I will note Artsy moving to RN was one of the main reasons I considered it,” Moseley said. “I’d followed them for years. Just in general because they were such a big name in the community, and had some heavy hitters. So yeah, naturally I followed them because they document what they are doing so well. […] When they made the switch to RN I was like “Oh, now I can take this seriously.”
Instructure started a new project and developed an iOS app from scratch with React Native. They hired two React developers to help build the basic architecture of the new program. Since then they have used some of their React components in other apps.
Before choosing React Native, the Instructure engineering tried PhoneGap. However, the performance showed insufficient results because of the HTML rendering, unlike React Native that offers native experience.
The team used the RN documentation to learn React Native and consulted with dedicated React devs. The framework allowed developers to boost their productivity by applying features like Hot Reloading. During the development process, they also used VSCode as an editor, Redux as the main library, Flow ESLint, and Danger npm module.
The only disadvantage of working with React Native is that navigation has to be improved. The Instructure team had to use their own-built navigation framework because nothing else worked for them.
“I think all native devs, regardless of experience, should at least give it a try. I believe that the React paradigm for building UIs is vastly superior to anything else out there. It’s simple to understand and it’s powerful,”Moseley said.
Math Warriors app is a multiplayer real-time 1vs1 game designed to support all ages and all levels. The software allows answering math question of different difficulty and enhances mental and cognitive skills. The math game is made with React Native and available on Android only.
Before working with React Native, Math Warriors team developed numerous hybrid web apps with Cordova and AngularJS. When looking for a proper solution for the math app, they were choosing between web and React Native solutions. Finally, the developers created an initial prototype in React Native and were impressed with the performance and the small efforts needed.
“The experience revealed that React Native is a game changer and we decided to go with it. It was a decision that our team is still very happy with!” Tasos Maroudas, creator of Math Warriors, said.
Maroudas mentioned they encountered some performance issues when developing but usually they could find a way to solve the problem. Compared to what they tried before, productivity has increased. React Native allowed writing less code in comparison to AngularJS and provided direct access to native behavior.
“As soon as you start getting involved in a real project, you will unavoidably find yourself in some problematic situations while coding. For me, it started while trying to convert visual designs to application views,” Maroudas admitted.
Initially, Maroudas had an introductory session with a friend specialized in React development. Then he explored RN official documentation that turned out to be “pretty decent” and was constantly improved. The community was impressed by its support and availability of packages developed and contributed by other programmers.
ZeeMee is a social media platform enabling students to create personal multimedia profiles to be viewed by college admissions. Users on ZeeMee can record short videos to fully express themselves in their apps. They can connect with each other through ZeeMee’s college communities and get acquainted before arriving on campus.
ZeeMee provides a professional social media experience, where applicants can connect with colleges via software used in over 150 countries. The platform is completely free for students. However, colleges pay ZeeMee for creating specific communities and communication tools that help share unique stories via video.
The company used React Native for creating an iOS app from scratch. The engineering team has tested the framework in production for a couple of months by using it for adding some features to the app. The developers said it was tough, but they got a great experience. They were able to see changes by simply refreshing the app without having to recompile and return.
ZeeMee was impressed with the results, so they integrated React Native to the existing Android app.
“Facebook claims that React Native is “learn once, write anywhere” instead of “write once, run anywhere”. But, in practice, our iOS React Native code mostly “just worked” on Android,” Pete Huitsing, the former Vice President of Engineering at ZeeMee, said.
Thus, ZeeMee engineering had to find and fix the components and styles that were inconsistent between iOS and Android.
“Using React Native to create a great, consistent UX across Android and iOS might feel painful initially, but at the end of the day its still drastically less work and more maintainable than having two separate apps in Objective C/Swift/Java,” Alek Hurst, Ex Full Stack Engineer at ZeeMee said. “As time goes on, you’ll start getting the feel for how to do things in React Native, which will in turn allow your app work consistently on the first try for both Android and iOS.”
Socky is a virtual intelligent helper that accompanies the child with Autism/ASD and stimulates social communication. The app has different interfaces for the kids and adults, allows sending one-tap messages in vocal and visual multiple-choice manner.
“Our story started when Ofir Harel (one of my best friends today) got the A verdict — his son Adam was diagnosed with Autism when he was only 2 years old,” Alex Pavtoulov, CEO of Socky, said. “For the first time in my life, I felt that ‘making the world a better place’ is not a cliché […] We decided that, from now on, our mission would be to — Help children with Autism to create meaningful conversations, become independent and take an active part in the society.”
Autism is characterized by widespread deviations of social interactions and communications. For a kid that doesn’t speak, read or write the only way to communicate is to draw on objects or pictures. Taking it into account, the team decided to develop an autism communication app using the most advanced technologies, UX practices, and latest researches.
The Socky team picked React Native because the framework allows for reusing most of the code both for Android and iOS. However, this was one of the toughest decisions: they had an enormous number of graphics, animations, and text-to-speech to implement. Equally important, an app had to be highly productive to avoid possible glitches. Otherwise, kids with Autism would lose their attention in a blink of an eye.
“One of the events that strongly tilted us towards using RN was the growing amount of developers that were actually onboard with RN and advocate for it.”
One of the companies, which facilitated to choose React Native was Wix.com. Inspired by their example, Socky engineering decided to build their app with RN from scratch. They experimented with the built-in animation libraries, including Airbnb’s react-native-lottie. The toolkit allowed developers to achieve better performance, lower asset weight, and scalable UI. Moreover, they were able to save 25% of the R&D costs.
Learnium is a social educating platform for universities, colleges and secondary schools. The platform started as a web product enabling students and teachers to communicate with each other. About a year after launching, Learnium user base had comprised over 2 billion mobile web users worldwide.
“Picture this. Your small development team has built a great web app. Traction is good and your users are now asking for mobile apps. The big question is, “How do you deliver a great user experience on the web, iOS and Android with a small dev team?”. This was our dilemma at Learnium […] ” Dale Bradley, former CTO at Learnium, said.
The engineering team found that native mobile apps offer the best user experience possible and decided to give it a try. They also relied on data that smartphone users spend over 85 percent of their time running native apps. Moreover, 25 percent of mobile web users located in the USA are mobile-only.
The development process had several phases. First of all, they decided to outsource the project, since the company has had a small engineering team inexperienced in mobile development. Thus, Learnium saves time and money that could otherwise be spent on hiring and learning in-house staff. This approach enabled them to keep their mind off creating a mobile app from scratch and focus on improving the web solution.
Secondly, the team wanted to make Learnium responsive to different screen sizes and devices. They reached the decision to use cross-platform development tools, however, didn’t know what framework to choose. Bradley considered PhoneGap/Cordova to build a web app with the native user experience. Even though this solution can speed up software release, it does not provide relevant capacity.
Another option was to use a cross-platform framework that builds native apps. Learnium engineering considered Xamarin, Titanium, and FireMonkey but they do not provide essential access to the native API’s.
“Finally, we looked at React Native. A young technology from Facebook that enables developers to build world-class mobile applications,” Bradley said.
- Start discussions and communicate with like-minded users.
- Store information in personal Boards, share material with specific communities and get feedback.
- Collaborate in teams within Course communities starting real-time chats and sharing resources.
“We believe that choosing React Native was the right choice when taking into account our resources. The developer experience has been generally issue-free and has given us the opportunity to work with an exciting new technology,” Bradley said. “If you find yourself in similar circumstances to Learnium, we recommend React Native.”