Cross-Browser Compatibility and React.js Web Apps

Sometimes I feel that events in life happen in a sequence so that you regularly come across ‘cringe’ moments. Like when you have sand in your mouth or you hear the excruciating sound of nails against a chalk board. For me, personally, the worst cringe-worthy moment is when I come across a really bad web app or website. When I say bad, I mean Internet Explorer bad (just kidding, it’s a nice browser). Directionless navigation, features that are not working, bad design, and painful UX. But, the biggest problem is missing cross-browser compatibility.
Why React?
React is simply a UI and functionality library for JavaScript-based apps. We recently talked about React.js in our last post, Choosing the Right JavaScript Framework in 2018. So, in this post, we would look in more detail at how React.js helps in the development of cross-browser compatible web apps.


How to Learn React.js, Part 2: The React Road Map for Modern Web Developers

Welcome back! If you missed Part 1, check it out here! 8. Form Helpers Apart from type checkers, it’s also good to learn form helpers, like Redux Form, which provides the best way to manage your form state in Redux. Apart from Redux Form, you can also take a look at Formik, Formsy, and Final form.


The Best JavaScript Testing Tools for Your React Project

Trust, but verify. A Russian phrase made popular by president Reagan fits perfectly when we are talking about testing or QA. Everyone trusts themselves, every programmer or a developer has trust in code. And why shouldn’t they? 
But, we know how it goes. In the programming world, even a miniscule mistake could cost a lot. And that is why we have testing.


Best JS Frameworks to Build Your Next Application

The first thing people notice about your application is its visual appeal. Most users tend to associate interface design with the credibility and professional competence of your company. That’s why choosing the right front-end technology plays a crucial role in your business growth.
Investing in user experience brings huge competitive advantages and great financial results. However, before counting up future income, you should decide which platform will be the foundation of your success. How long do technologies last?


The Functional Side of React

As you know, React is one of the most popular JavaScript libraries to create web-based user interfaces. Its success is due to several factors, but maybe one of them is its clean and effective approach to programming.
In the React environment, every piece of a UI is a component. Components can be composed together to create other components. The application itself is a component: a composition of components. The developer approaching React is naturally led to think of it in terms of Object-Oriented Programming. The syntax itself to define a component promotes this idea:


A Look at React Native and React.js

Backed by Facebook, Instagram, and a reputed community of developers, React is one of the most used JavaScript libraries at present. According to Libscore, at present React is being utilized on a number of reputed sites, such as Netflix, Airbnb, Walmart, HelloSign, and Imgur, to name a few.
React.js development is not in any way similar to React native mobile app development and both of them serve a different purpose. The blog will explain all of the main differences between these two PLs and will provide you with an approach to choose the one for your particular project.


[DZone Research] Newer Technical Solutions for Web and Mobile Apps

To gather insights on the current and future state of web and mobile development we talked to 19 IT executives and we asked, “What newer technical solutions (frameworks, languages, tools) are you using to develop web and mobile apps?" Here’s what they told us:

Forrester did a wave report on low code in October 2017. It is a trend that is developing. Different buying patterns in low code by developers for developers and then branching to citizen business development. Incorporate non-technical people. React Native for mobile and JS for web, architecture as a UI framework to deliver higher level pre-built components. 
React Native apps are trending as well as progressive web apps. Our customers are leveraging such technologies for their cross-mobile iOS app development. JavaScript is the main web development and testing language – across the market. BFF (backend for front-end) frameworks are trending up especially in web development (Gauge, Watir). 
Depends on requirements. We see and use React Native a lot. We do use Cordova and different variations of it. See the mobile page local in the phone works on Android and iOS. 
React, Angular, Vue, PWA. Also seeing Storybook for React, Vue, Angular for component development in a centralized way for the entire organization. Tools for the automatic testing of storybook ensure the application looks good on all browsers and screen sizes. Test in the most effective way.


React Native in web community because react web for web apps. Airbnb changing from React Native back to Native hard to keep up to date with changes in iOS and Android. Xamarin open source framework for C# applications across platforms. Bought by Microsoft. Flutter mobile UI for cross-platform from Google. PWA is a hot discussion topic and alternative to content organization to build and launch on mobile. Progressive websites can have a mobile app feel. PWA versus Native are alternatives that people have. Also pure Native preferred for Apple and Google using SDKs. Make it simple and easy to get the value of native.
We are in the process of developing several sites using ASP.NET Core, minimalist CSS frameworks such as Pure CSS and Foundation, and the bare minimum of JavaScript only where we truly need it. This minimalist approach allows us to focus on creating small, fast, SEO friendly sites that perform well and look good. We’re also looking at ways to leverage progressive web application (PWA) and Web Assembly technologies as a way to create more interactive client experiences where required.


.NET Core on Windows, native on Linux. Suites like Xamarin to build applications that run on any platform. More adoption of tools. Maintaining multiple codebases is too complicated. Can switch between platforms quickly and easily. 
Xamarin and React Native. 35-40% of projects are cross-platform in nature. Conversational platforms are a natural way of interfacing. Chat experience focused and consistent.


Tooling APM has really taken off with AppDynamics, New Relic, Dynatrace, Crashalytics. APMs only cater to large app developers. Need to cater to the long tail of app developers. APM for mobile. No one owning mobile right now.
A lot of the work done on the development and deployment side. Modern development workflows have taken hold. Code in Git. Deployments rather than upgrades. From an end-user perspective, 60,000 plugins are available for WordPress — e-commerce, Spotify playlist, etc.
Swift from Apple and Kotlin from Android.
We are a framework. Juxtaposition against other frameworks. Google pushing web component standards. We want to be compatible with web components. Support at the fundamental browser level and let people integrate with any open source framework they want to use.
The most interesting new solutions for me are not technical, but process and product based. Adopting Behavior Driven Development (BDD) has been extremely helpful in focusing both development and testing resources on working together in a common language. This greatly cuts communication overhead and helps deliver on the promises of Agile.
We’re observing the increased use of open-source tools and frameworks in building web and mobile apps. Those range from code editors (such as VS Code and Atom) to performance test and auditing tools (such as Chrome DevTools and Lighthouse). Although not new, we see JavaScript getting more entrenched use not only on the client (with the ever-growing variety of front-end JS frameworks) but also on the server using Node.js and the enormous selection of npm packages available for it. We are involved in developing web and mobile apps in multiple ways which include the UI components of our core media services and of its digital asset management (DAM) SaaS offering. We also develop demo and showcase apps within various teams that use contemporary software solutions. These include popular front-end frameworks such as Angular, React, and Vue, as well as serverless (FaaS) infrastructure from cloud platform, SaaS and open-source partners such as AWS (Amazon), GCP (Google), Azure (Microsoft), and Extend (Auth0), to name a few.

Here’s who we spoke to:


React/JSX as a Server-Side Templating Language

Using React function components to render your website’s skeleton index.html NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox!

Another note: I’ve been teasing about something big that I have coming. I’m totally not joking. I’m working on something really huge and y’all will be the first to know about it. Stay tuned. It’s weeks away and I think you’re going to love it.

Last week at PayPal, one of my pull requests was merged in an Express codebase which migrated us from a custom template system to using React function components and JSX. The motivation was to reduce the maintenance overhead of knowing and maintaining a custom template system in addition to the JSX we are doing on the front-end.


How to Test React Components With Jest and Enzyme, Part 1

Testing React components may be challenging for beginners and experienced developers who have already worked with tests. It may be interesting to compare your own approaches with the ones we use in our project. In order to cover the codebase, you have to know which components must be tested and which code exactly in a component should be covered.
During reading, I’ll cover the next topics: