[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:
React

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.

PWA

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.

Xamarin

.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.

Other

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:

Link: https://dzone.com/articles/dzone-research-newer-technical-solutions-for-web-a?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

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.

Link: https://dzone.com/articles/reactjsx-as-a-server-side-templating-language?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

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:

Link: https://dzone.com/articles/what-and-how-to-test-with-jest-and-enzyme-full-ins?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Building a Visual Unit Test for React

Building a simple app for teaching concepts around scoring a hand of poker using functional programming. This project uses visual elements and unit testing as a way to “gamify" the learning process. A few simple components combined with the powerful and easy to use Kendo UI grid create an meaningful display of tests with data.
As a Developer Advocate for Progress I spend part of my time teaching through workshops, conference sessions, and examples. I’ve been teaching Functional Programming techniques to C# developers for a few years and recently have started adapting that content to include JavaScript as well.

Link: https://dzone.com/articles/building-a-visual-unit-test-for-react?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Use Redux in Your React.js App in Just 10 Minutes

If you have decided to use Redux as your state management library, now you actually have done the hard part. Deciding which library to use. Everything else is very easy and fast. Follow along to create a to-do app with Redux in just 5 minutes.
The Idea Behind Redux
You have mainly three components: store, reducer, and actions.

Link: https://dzone.com/articles/how-to-use-redux-in-your-reactjs-app-in-just-10-mi?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Working With Forms in React.js Using The Basic Toolkit

Introduction
During my work with React.js, I often had to deal with the processing of forms. I tried using Redux-Form, React-Redux-Form, but none of the libraries suited all my needs. I did not like that the state of the form is stored in the reducer, and each event passes through the action creator. Also, according to Dan Abramov, “the state of the form is inherently ephemeral and local, so you do not need to track it in Redux (or any Flux library)."
I note that React-Redux-Form has a LocalForm component that allows developers to work without redux, but, in my opinion, it’s useless to install a 21.9KB library and use it for less than half the time.

Link: https://dzone.com/articles/working-with-forms-in-reactjs-using-the-basic-tool?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React Image Upload: How It’s Done

File upload is a very important feature of web applications: it helps facilitate actions like setting a user’s profile picture, setting up dynamic galleries, remote file storage, and file sharing, among many other functionalities. In this article, we will be looking at file upload (more specifically, images), using the React web framework, and a Node.js Express backend server.
Here is the application we are going to be building:

Link: https://dzone.com/articles/react-image-upload-how-its-done?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React vs. Angular vs. Vue.js: A Complete Comparison Guide

Choosing a tech stack sometimes becomes a tedious task as you need to take every factor into consideration, including budget, time, app size, end-users, project objectives, and resources.
Whether you are a beginner, a developer, a freelancer, or a project architect forming strategies, it is a wise decision to be aware of the advantages and drawbacks of each framework in detail. So, this post will not help you select the best one, because that decision depends on the scope of your project and the framework’s suitability to your needs. But, this post can help you gain a better understanding of each framework along with trends and insights.

Link: https://dzone.com/articles/react-vs-angular-vs-vuejs-a-complete-comparison-gu?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

GatsbyJS: Static Site Generator for React

Gatsby is a static site generator for React and allows web developers to create a static HTML file. Thus it provides fast initial load times and makes dealing with SEO much simpler. The user-side experience is very comfortable when JavaScript is enabled, and you don’t lose any content or navigation while having disabled JavaScript. By adding a single plugin, Gatsby can provide offline support as well, transforming your site into a Progressive Web Application. The Purpose and Background of GatsbyJS Gatsby allows web developers to create static HTML files for every single page. Right after loading the page, Gatsby will boot up React and enable the user to navigate through the website just like a single page app. 

Link: https://dzone.com/articles/gatsbyjs-static-site-generator-for-react?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev