Tag Archives: react

How To Create Native Cross-Platform Apps With Fuse

Fuse is a toolkit for creating apps that run on both iOS and Android devices. It enables you to create apps using UX Markup, an XML-based language. But unlike the components in React Native and NativeScript, Fuse is not only used to describe the UI and layout; you can also use it to add effects and animation.

How To Create Native Cross-Platform Apps With Fuse

Styles are described by adding attributes such as Color and Margin to the various elements. Business logic is written using JavaScript. Later on, we’ll see how all of these components are combined to build a truly native app.

The post How To Create Native Cross-Platform Apps With Fuse appeared first on Smashing Magazine.

Link to article:

How To Create Native Cross-Platform Apps With Fuse

Internationalizing React Apps

First of all, let’s define some vocabulary. “Internationalization” is a long word, and there are at least three widely used abbreviations: “intl,” “i18n” and “l10n.” All of them mean the same thing.

Internationalizing React Apps

Internationalization can be generally broken down into three main challenges: Detecting the user’s locale, translating UI elements, titles as well as hints, and last but not least, serving locale-specific content such as dates, currencies and numbers. In this article, I am going to focus only on front-end part. We’ll develop a simple universal React application with full internationalization support.

The post Internationalizing React Apps appeared first on Smashing Magazine.

View original post here:

Internationalizing React Apps

Styled-Components: Enforcing Best Practices In Component-Based Systems

Building user interfaces on the web is hard, because the web and, thus, CSS were inherently made for documents. Some smart developers invented methodologies and conventions such as BEM, ITCSS, SMACSS and many more, which make building user interfaces easier and more maintainable by working with components.

Styled-Components: Enforcing Best Practices In Component-Based Systems

After this shift in mindset towards building component-based user interfaces, we are now in what we like to call the “component age.” The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution.

The post Styled-Components: Enforcing Best Practices In Component-Based Systems appeared first on Smashing Magazine.

Read More: 

Styled-Components: Enforcing Best Practices In Component-Based Systems

Building Hybrid Apps With ChakraCore

There are many reasons why one may want to embed JavaScript capabilities into an app. One example may be to take a dependency on a JavaScript library that has not yet been ported to the language you’re developing in. Another may be that you want to allow users to “eval” small routines or functions in JavaScript, e.g., in data processing applications.

Building Hybrid Apps with ChakraCore

The key reason for our investigation of ChakraCore was to support the React Native framework on the Universal Windows Platform, which is a framework for declaring applications using JavaScript and the React programming model.

The post Building Hybrid Apps With ChakraCore appeared first on Smashing Magazine.

View article – 

Building Hybrid Apps With ChakraCore

How To Scale React Applications

We recently released version 3 of React Boilerplate, one of the most popular React starter kits, after several months of work. The team spoke with hundreds of developers about how they build and scale their web applications, and I want to share some things we learned along the way.

How To Scale React Applications

We realized early on in the process that we didn’t want it to be “just another boilerplate.” We wanted to give developers who were starting a company or building a product the best foundation to start from and to scale.

The post How To Scale React Applications appeared first on Smashing Magazine.

Read the article:

How To Scale React Applications

A Glimpse Into The Future With React Native For Web

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re making a mobile app, can you afford to support both iOS and Android?

A Glimpse Into The Future With React Native For Web

What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.

The post A Glimpse Into The Future With React Native For Web appeared first on Smashing Magazine.

Jump to original:

A Glimpse Into The Future With React Native For Web

Optimizing Critical-Path Performance With Express Server And Handlebars

Recently, I’ve been working on an isomorphic React website. This website was developed using React, running on an Express server. Everything was going well, but I still wasn’t satisfied with a load-blocking CSS bundle. So, I started to think about options for how to implement the critical-path technique on an Express server.

This article contains my notes about installing and configuring a critical-path performance optimization using Express and Handlebars. Throughout this article, I’ll be using Node.js and Express. Familiarity with them will help you understand the examples.

The post Optimizing Critical-Path Performance With Express Server And Handlebars appeared first on Smashing Magazine.

Read More: 

Optimizing Critical-Path Performance With Express Server And Handlebars

Finally, CSS In JavaScript! Meet CSSX


JavaScript is a wonderful language. It’s rich, it’s dynamic, and it’s so tightly coupled to the web nowadays. The concept of writing everything in JavaScript doesn’t sound so crazy anymore. First, we started writing our back end in JavaScript, and then Facebook introduced JSX, in which we mix HTML markup with JavaScript. Why not do the same for CSS?

Finally, CSS In JavaScript! Meet CSSX

Imagine a web componentdistributed as a single .js file and containing everything — markup, logic and styles. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. CSSX is a project that swallowed my spare time for a month. It was challenging and interesting, and it definitely pushed me to learn a lot of new stuff. The result is a set of tools that allows you to write vanilla CSS in JavaScript.

The post Finally, CSS In JavaScript! Meet CSSX appeared first on Smashing Magazine.

See the original article here – 

Finally, CSS In JavaScript! Meet CSSX

Why You Should Consider React Native For Your Mobile App


Like many others, I was initially skeptical of Facebook and Instagram’s React. Initial demos of React’s JavaScript language extension, JSX, made many developers uneasy. For years we had worked to separate HTML and JavaScript, but React seemed to combine them. Many also questioned the need for yet another client-side library in an ocean full of them.

Why You Should Consider React Native For Your Next Mobile App

As it turns out, React has proved tremendously successful, both on my own projects, and with many others around the web, including large companies like Netflix. And now with React Native, the framework has been brought to mobile. React Native is a great option for creating performant iOS and Android apps that feel at home on their respective platforms, all while building on any previous web development experience.

The post Why You Should Consider React Native For Your Mobile App appeared first on Smashing Magazine.

Source:  

Why You Should Consider React Native For Your Mobile App

Server-Side Rendering With React, Node And Express


Web applications are everywhere. There is no official definition, but we’ve made the distinction: web applications are highly interactive, dynamic and performant, while websites are informational and less transient. This very rough categorization provides us with a starting point, from which to apply development and design patterns.

Server-Side Rendering With React, Node And Express

These patterns are often established through a different look at the mainstream techniques, a paradigm shift, convergence with an external concept, or just a better implementation. Universal web applications are one such pattern.

The post Server-Side Rendering With React, Node And Express appeared first on Smashing Magazine.

Link:  

Server-Side Rendering With React, Node And Express