Get the Low Down on All Things React and React Native
Strategy

Get the Low Down on All Things React and React Native


React.js was originally developed by Facebook to create highly responsive and dynamic UI applications with uncompromised performance.

The React.js library was released in 2011 with an intent to leverage JavaScript speed and the ability to render pages and dynamic user input. Two years later, as React.js became quite recognized, the team open-sourced React.

React Native was developed and launched by Facebook in 2015 and became quite an interesting and popular framework among mobile app developers.

It can be used for building cross-platform mobile apps. The framework was later customized by contributors to use it for building desktop apps as well.

Though React Native looks very similar to React.js, there are certain differences in their use and structure. In this post, we will see what separates React Native from React.js.

Setup and Running Process

While starting a new project and setting up React.js, you will need to choose Webpack, which is actually a bundler. You will then decide which bundling modules will specifically suit your project.

In React Native, you have everything you need to set up and get started. It is so easy and fast to launch the framework. All it takes is to run one command in your terminal, and you are ready to start coding your first ever React Native app.

You will need Xcode (for iOS) or Android Studio (for Android) installed on your computer to run the app. Use an emulator of the target platform or test its performance on your own devices.

You may also like:
Everything React: Tutorials for Beginners and Experts Alike.

Animations

Unlike React, where CSS helps to create animations, React Native makes you learn entirely new ways to use JavaScript and create animations for components of your app.

With React Native, developers can animate components in the app by using the Animated API. There is quite a well-known JavaScript library, Velocity.js, that you can use as well.

Velocity.js allows developers to form assorted animations. They work based on time and velocity of gesture and can be used in many combinations. You can also use LayoutAnimation in React Native, which is beneficial for creating transitions, especially on iOS.

Developer Tools

Rapid app development seekers would be happy to use React in their native project since you already get a few great tools without actually installing anything.

This unique quality saves a lot of time and effort for developers. In addition, hot reloading enabled by React.js comes in handy when there is a need to make small changes to overall app styles.

You can leverage Live Reload if there are bigger changes to add to the app logic, so that your app reloads upon changing the code.

React Native developers can use many developer tools present in React JS. You can use Chrome Dev Tools to inspect the network requests, handle logs, and debug applications.

You also have Redux DevTools for further assistance in an inspection. However, the native inspector is not very helpful since you can’t inspect DOM with React Native like you are able to do on the web.

Business Benefits of React.js

  • React’s DOM (document object model) that manages data inputs and outputs is much faster than the conventional refresh model. Since it only partially refreshes certain parts of the page, Facebook never knew the process of refreshing would prove to be faster. By positively affecting the re-build time, the partial DOM refresh eventually boosts performance and speed while writing programs.
  • The phenomenon of reusable code components in React JS further saves you a lot of time.
  • React.js also improves debugging speed, which highly favors developers’ work.
  • The possibility of rendering pages from the server to the browser helps positively with SEO.
  • Because it is effortlessly readable, unlike other frameworks, React doesn’t require you to become heavily acquainted with an extensive list of concepts.
  • Since it is based on JavaScript, developers are free to reap the maximum benefits of all the progress and updates in the JavaScript ecosystem.

Business Benefits of React Native

  • React Native contains Native modules and components that help render certain code components directly with Native APIs to improve performance and speed. It does not depend on WebView for code rendering, unlike other cross-platform frameworks.
  • Since React Native also lets developers reuse code and a common logic layer across iOS and Android, the need for building the applications separately for both is avoided.
  • React Native offers all the mentioned benefits of React.js, such as delivering a user-friendly UI.
  • The component-based development model of React Native framework creates an agile web-style approach for developers to build apps without actually relying on any web.
  • React Native is easy to learn if you are familiar with JavaScript. A front-end developer could turn into a mobile developer if they know enough about JavaScript and platform-specific APIs, native UI elements, or other design essentials.
  • By delivering high performance, agility, and responsiveness in app development, React Native gets rid of typical struggles involved in native app development, such as inefficiency, slow deployment, and unsatisfying developer productivity. It also results in the best user experience of native apps.
  • Another React Native speed booster is its ability to add UI components directly into the existing app’s code without aiming to rewrite. So you don’t have to overhaul the entire app when updating.

Final Remarks

The process of mobile app development using React Native framework is swimmingly fast. So, you can quickly get an app ready in a mature shape. Building the complex UI design elements in React Native is also quick, as it usually is with React JS across both iOS and Android.

For React Native learners who are especially keen on JavaScript programming, it is easy and agile to switch from React JS web to React-Native app development.

At present developers are struck by two major options in mobile application development: React Native and Google’s Flutter.

Developers also have a huge advantage of getting the best out of the big and benevolent React Native community. Thus, Facebook’s original framework React Native has a lot to offer and is a recommendable technology for any web developer who wants to build mobile apps.

Further Reading



Source link

Web Development Trends and Techniques for 2020
Strategy

Web Development Trends and Techniques for 2020


Web development trends are always changing. After they show up, some evolve for the better and last for years. Others disappear quite quickly, not leaving much of a mark. Many of the trends that started in 2019 are making their way to 2020. This article digs the web development trends a little deeper and predicts which trends will expand in 2020.

The following are some trends to keep an eye out for:

Modular Design

Modular design enables developers to create web pages by reusing modules and components. The alternative is to create web pages using limited templates. Using modular design, developers can dynamically visualize content with dedicated blocks. It makes development more flexible, faster, and cheaper.

It’s important to remember, however, that modular design of a web page is similar to assembling a lego set. All pieces should perfectly interlock with one another. If a three-layer module is put next to a six-layer module, the spacing in between is uneven. This can cause multi-level CSS overrides or uneven white space. As a result, your web page design will not make sense. Design carefully and test your sites before going live to avoid this.

You may also like:
Design First, Not Mobile First.

Mobile-First Website Design

The mobile-first approach is a result of the ongoing growth of mobile traffic. More than half of all web traffic came from mobile devices in 2019. In fact, nearly 73% of all internet traffic is expected to come from mobile devices by 2025. As a result, Google developed a mobile-first indexing philosophy. In this approach, Google uses the mobile version of the website to determine the web page rank and quality.

Mobile-first design is now a requirement for gaining site traffic. Your websites should be responsive across all mobile and desktop devices. You can use responsive images to ensure that your media automatically fits in every mobile device screen. As a result, responsive design dramatically improves the performance and user experience of the page by displaying the content in a comfortable way.

Chatbots and Customer Support

Chatbots are growing in popularity, especially in conversational commerce. Conversational commerce is when services or items are sold via web chats, messaging services, or voice assistants. Websites are already exploring the possibilities of chatbots to increase online sales.

One example is the Amazon Echo home assistant. This conversational UI device can intelligently execute commands to buy things on Amazon, creating a personal shopping experience. By 2020, over 80% of businesses are expected to implement some kind of chatbot platform.

As a result, web developers can no longer ignore the impact of chatbots. Having chatbots on your website provides assistance whenever needed, boosts online sales, and can solve customer queries. Building a chatbot to communicate with humans and designing conversational UI is a growing demand.

Accelerated Mobile Pages (AMP)

AMP is an open source library for creating web pages. The main goal of AMP is to improve mobile user experience by providing instantaneous page loads. In addition, AMPs are more lightweight, more secure, more appealing, and responsive on any device.

AMPs load faster because they render mobile web pages with restricted HTML/CSS and JavaScript. In contrast to regular mobile pages, Google caches AMPs automatically, providing faster load times from Google search. Since its launch in 2016, the speed of AMPs has dropped to less than 0.5 seconds.

Additionally, AMPs can lead to a significant increase in website traffic with more time spent on your pages. eCommerce websites that use AMP experience about 20% increase in sales compared to non-AMP pages. Businesses can take advantage of AMP to further enhance mobile websites and deliver a better user experience.

Voice Search

Voice search is the use of spoken language to query search engines. Modern smartphones are already equipped with a digital voice assistant like Siri and Google Assistant. In addition, AI-based smart speakers like Apple HomePod are gaining popularity. Some claim that voice-based search has replaced the traditional text-based search.

Web developers are including more voice searching methods as people gain familiarity with this technology. There are a variety of tools you can use to include these methods, including voice recognition APIs and pre-built widgets.

API-First Design

Modern connected technologies like IoT devices, smart homes, driverless cars, wearable tech, and smartphones are all based on massive API usage. Users can greatly benefit from these technologies. However, the development of those connections can get a bit tricky. Developers usually start the design from the user interface. They design the front-end application and only afterward integrate the API.

Traditionally, the front-end team receives the API only when the back-end team finishes working on it. The front-end team then builds a framework for testing the API. This process requires a lot of time and coordination since the front-end team is forced to wait for back-end developers. However, API-first design allows developers to develop the API and then build the product on top of it. This can speed development and eliminate the need to re-write code.

Motion User Interface (UI)

Motion UI is an approach to support transitions and animations in web development. Motion UI is a creative way to increase the conversion rates of your websites. Developers can use motion UI to create live graphics in the native app settings.

Companies can change how users interact with their brand and storytelling by using Motion UI in web development. Moreover, Motion UI is a great way to trigger emotions in users and can greatly enhance normal user activity. Developers are starting to realize the benefits of motion UI, and tools, like Lottie, becoming more common.

Conclusion

Hopefully, this article helped you understand the changes that are happening in modern web design and what you can look forward to. Understanding the tools available to you can ensure that your sites continue to provide users the best experience and most efficient performance. By keeping your skills sharp, and staying aware of these trends, you can have a significant advantage in 2020.

Further Reading



Source link

Post image
Strategy

What is the easiest way to get a list of the files inside a …


Hi everyone,

I have my project for a website with some files and folders and it looks like this:

Post image

there are some videos inside the “videos” folder.

I’d like to have an array containing all the names of the files inside that folder and pass it to javascript.

From what I understand, I can’t access that folder with a js script, since it’s client side.

I only know html, css and vanilla JS.

What would be the easiest way to be able to get those file names? I am willing to use other languages or frameworks.

Thanks for your help.



Source link

Chat message with Preview Link
Strategy

Microbrowsers are Everywhere ◆ 24 ways


You’ve seen it everywhere – that little thumbnail preview of a website mentioned in a tweet, the expanded description in a Slack channel, or in WhatsApp group chat.

Chat message with Preview Link

Link Preview vs. Real Website

Figure 1: The preview shown in a group chat provides a hint of what the real webpage looks like

These link previews are so commonplace that we hardly pay any attention to how our site design might be impacting the generated preview. Yet, these previews can be the most influential part for attracting new audiences and increasing engagement – possibly more than SEO. Even more alarming is that most web analytics are blind to this traffic and can’t show you how these Microbrowsers are interacting with your site.

As we close out the year, here are five essential questions and ideas that every web dev should know about Microbrowsers.

1. What are Microbrowsers? How are they different from “normal” browser?

We are all very familiar with the main browsers like Firefox, Safari, Chrome, Edge and Internet Explorer. Not to mention the many new browsers that use Chromium as the rendering engine but offer unique user experiences like Samsung Internet or Brave.

In contrast, Microbrowsers are a class of User-Agents that also visit website links, parse HTML and generate a user experience. But unlike those traditional browsers, the HTML parsing is limited and the rendering engine is singularly focused. The experience is not intended to be interactive. Rather the experience is intended to be representational – to give the user a hint of what exists on the other side of the URL.

Creating link previews is not new. Facebook and Twitter have been adding these link previews in posts for nearly a decade. That used to be the primary use case. Marketing teams created backlog items to adopt different microdata – from Twitter Cards and Open Graph annotations for Facebook. LinkedIn likewise embraced both Open Graph and OEmbed tags to help generate the previews

<meta name="description" content="seo description long">
<meta name="keywords" content="seo keyword list">

<link rel="shortcut icon" href="https://24ways.org/favicon.ico" 
                          type="image/x-icon">
<link rel="icon" href="favicon_32.png" sizes="32x32">
<link rel="icon" href="favicon_48.png" sizes="48x48">
<link rel="icon" href="favicon_96.png" sizes="96x96">
<link rel="icon" href="favicon_144.png" sizes="144x144">

<meta property="og:title" content="Short title here" />
<meta property="og:description" content="shortish description" />
<meta name="twitter:title" content="Short title here">
<meta name="twitter:description" content="shortish description">

<meta property="og:image"
      content="https://res.cloudinary.com/.../hero-img.png" />

<meta name="twitter:image:src"
      content="https://res.cloudinary.com/.../hero-img.png">

As group chats and other collaboration tools have become more prevalent, we have seen many features from the big social media platforms emerge. Particularly in recent years we’ve seen the adoption of the link unfurling behaviour in these chat platforms. Rather than reinventing the wheel, each platform looks for pre-existing microdata to generate the preview.

But which data should be used? How should this be arranged? As it turns out, each platform behaves slightly differently; presenting information in slightly different ways.

The Same URL Previewed With Different Browsers

Figure 2: The same amazon link shared in iMessage (left), Hangouts and WhatsApp (right)

2. If Microbrowsers are everywhere, why don’t I see them in my analytics reports?

It’s easy to miss the traffic from Microbrowsers. This is for a number of reasons:

First, page requests from Microbrowsers don’t run JavaScript and they don’t accept cookies. The Google Analytics <script> block won’t be run or executed. And all cookie will be ignored by the rendering agent.

Second, if you were to do a log analysis based on HTTP logs from your CDN or web stack, you would see a relatively small volume of traffic. That is assuming you can identify the User-Agent strings. Some of these Microbrowsers impersonate real browsers and others impersonate Facebook or twitter. For example, iMessage uses the same User-Agent string for all these requests and it hasn’t changed since iOS 9.

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
             AppleWebKit/601.2.4 (KHTML, like Gecko) 
             Version/9.0.1 Safari/601.2.4 
             facebookexternalhit/1.1  
             Facebot Twitterbot/1.0

Finally, many platforms – particularly Facebook Messenger and Hangouts use centralized services to request the preview layout. This, in contrast to WhatsApp and iMessage where you will see one request per user. In the centralized consumer approach your web servers will only see one request, but this one request might represent thousands of eyeballs.

3. Microbrowser are probably more important than google bot

We all know the importance of having our web sites crawled by search engines like googlebot. These bots are the lifeblood for lead generation and for discovering new users.

However, the real gold for marketers is from word-of-mouth discussions. Those conversations with your friends when you recommend a TV show, a brand of clothing, or share a news report. This is the most valuable kind of marketing.

Last year when assembling the data for Cloudinary’s State of the Visual Media report, I discovered that there was a very prominent usage pattern over the USA holiday season. During thanksgiving, all the way to Black Friday, the rate of link sharing skyrocketed as group chats shared deals and insights.

Zooming out (and normalizing for time-of-day), we can see that there is a daily cadence of link sharing and word of mouth referrals. It probably isn’t a shock to see that we predominantly share links in Slack between Monday and Friday, while WhatsApp is used all week long. Likewise, WhatsApp is most often used during our ‘break’ times like lunch or in the evening after we put the kids to bed.

Link Sharing on WhatsApp v. Slack

While the link preview is increasingly common, there are two user behaviours to balance:

  • Users can be skeptical of links sent via SMS and other chats. We don’t want to be fooled into clicking a phishing links and so we look for other queues to offer validation. This is why most platforms use the preview while also emphasize the website url host name.

Example of Suspicious Link?

  • Skimming. I’m sure you’ve had the experience coming out of a meeting or grocery store to find a group chat with 100 messages. As you scroll to catch up on the conversation, links can easily be skipped. In this way, users expect the preview to act as a summary to tell them how important it is to visit the link.

Good Summary Link Preview

Figure 4: Nielsen Norman Group summarizes the research in a dynamic image preview

Good Summary Link Preview

Figure 5: A mockup of how an ecommerce product could create compelling previews showcasing colors, stock and price in the preview

4. Microbrowsers are not real browsers (they just play one on TV)

As I previously mentioned, Microbrowsers pretend to be a browser in that they send the right HTTP headers and often send impersonating User-Agent strings. Yet, there are several characteristics that a web dev should be aware of.

First, Microbrowsers try to protect the User’s privacy. The user hasn’t decided to visit your site yet, and more importantly, the user is having a private conversation. The fact that your brand or website is mentioned should just make your ears burn, but you shouldn’t be able to listen in to the conversation.

For this reason, all Microbrowsers:

  • don’t execute JavaScript – so your react application won’t work
  • ignore all cookies – so your A/B or red/green cookies will be ignored
  • some will follow redirects, but will quickly time out after a few seconds and give up trying to expand the link.
  • there won’t be a referer: HTTP header when the user clicks the link for the full browser. In fact, a new user will appear as ‘direct’ traffic – as though they typed in the url.

Second, Microbrowsers have a very small brain and very likely don’t use an advanced network algorithm. Most browsers will use a tokenizer to parse the HTML markup and send requests to the network stack asynchronously. Better yet, browsers will do some analysis of the resources needed before sending the async request to the network.

Based on observational experimentation, most platforms simply use a glorified for loop when parsing the HTML and often request the resources synchronously. This might be ok for fast wifi experiences, but it can cause inconsistent experiences on flaky wifi.

For example, iMessage will discover and load all <link rel="icon" > favicon, all <meta property="og:image" images, and all <meta name="twitter:image:src" before deciding what to render. Many sites still advertise 5 or more favicon sizes. This means that iMessage will download all favicons regardless of size and then not use them if it decides to instead render the image.

For this reason the meta markup that is included is important. The lighter the content, the more likely it will be to be rendered.

5. Markup Matters

Since Microbrowsers are simple-brained browsers, it is all the more important to produce good markup. Here are a few good strategies:

  • It’s almost 2020, you only need one favicon size. Remove all the other <link rel="shortcut icon" and <link rel="icon" references.
  • Based on observational experimentation, the most commonly recognized microdata tags for preview are the Open-Graph tags. When the OG and twitter card tags are missing, the default SEO <meta name="description" is used. However, since the description is often nonsensical SEO optimized phrases, users’ eyes will likely glaze over.

Example of text heavy link preview

  • On that note, use good descriptive text
  • Provide up to three <meta property="og:image" images. Most platforms will only load the first one, while others (notably iMessage) attempts to create a collage.

iMessage Single v. Multiple Image Collage

Figure 6: Amazon uses User-Agent detection which results in many link previews using the description meta tag.

  • Use <meta property="og:video* with progressive (not streaming) video experiences.
    Link Unfurl
<meta property="og:type" content="video.other">
<meta property="og:video:url" 
               content="https://shoesbycolin.com/blue.mp4">
<meta property="og:video:secure_url" 
               content="https://shoesbycolin.com/blue.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
  • Don’t use UA sniffing to hide the <meta> tags. Sites like Amazon do this to try and show only Facebook/Twitter the microdata annotated website. But this can cause problems for some Microbrowsers that don’t use the same impersonation convention. The result is a simple link without a preview.
  • Use the opportunity to tell your product story or summarize your ideas.

Summary

As more of our conversations happen in group chats and slack channels, link previews are an important way for you to engage users before they start the journey on your site. Unfortunately, not all websites present good or compelling previews. (And now that you know what to look for, you won’t be able to unsee bad examples – I’m sorry). To help users take the leap and visit your site, we need to make sure that all our pages are annotated with microdata. Better yet, we can use these previews to create compelling visual summaries.





Source link