DEV Community: Jonathan Cardoso

Challenges working on my first app with React Native

Jonathan Cardoso — Tue, 25 Jul 2023 17:14:28 +0000

Initial challenges

Setting up the environment variables, such as Java, Kotlin, Android e Android SDK, along with the Android Studio program and configuring some emulators, can be an initially intense challenge. Going through all this initial setup may vary slightly on each operation system. In my case, I used Linux, and it took a considerable amount of time.

Bug resolutions

Some technical challenges can be identified throughout the project, such as:

Code: Removal of unused code and improper reuse of functions and hooks;

Complexity: Separation and restructuring of functions and responsibilities within the code;

Styling: Improvement of layout responsiveness, such as font sizes and creation of new layouts. One suggestion is to use React Native’s dimensions, which will greatly facilitate the process;

Libraries: Update libraries, which is a common problem in Javascript projects, especially in older projects, where several incompatibilities may arise.

Exception handling: Every app must have exception handling to avoid corruption in the app’s usage. One option is to use the react-native-exception-handler library, which assists in handling fatal or no-fatal exceptions, allowing for a higher level of customization in the cataloging of errors that can be displayed or not.

TypeScript: A project may present some challenges, but a new scenario full of possibilities appears on your table, such as optimizations, improvements, best practices, and new libraries, all to deliver the best app to the end user.

In this article, I shared my main challenges, which I believe are common to all beginner developers in the mobile area. With that, I hope to have contributed some useful knowledge. If you have experienced similar situations or enjoyed the content I shared, please share and like the article!

Adding this tool is crucial to assist in ensuring code quality and reducing common errors in data handling, increasing the potential for error detection during development.

Facing Performance Issues: Memory

This topic has truly been one of the most challenging. Understanding the reason why the app is closing unexpectedly, raises several questions:

“Could it be a code error, with some variable being null or undefined and causing a mapping (map) operation?”
“Is the app stuck because of rendering too much data on the same screen?
“Could it possibly be a memory leak?”

Issues related to this often involve memory leaks. It is crucial to conduct a thorough study of memory management in React Native at this stage. I recommend reading this article: “Hunting JS memory leaks in React Native apps”. Additionally, you can analyze your app using the Android Studio Profiler tool, which will help identify memory leak points during real-time app navigation.

However, the initial solution typically involves a meticulous code search. Refactoring components with a higher data flow and complexity to use best performance practices, such as:

Hooks: useMemo, useCallback e useEffect;

API: lazy, memo e flatList, contextAPI;

The usage of these tools must be done responsibly, considering the objectives of each one.

Other tips to solve potential errors include removing unnecessary component renderings with conditional limitations, like data pagination. Moreover, it is essential to avoid passing improper properties to these components.

To render various items, the use of FlatList and pagination strategies in data searches is vital to prevent data retrieval from causing freezes. Remember that, in mobile devices, the data load limit should be lighter than what is typically used in web environments.

Bonus

Versioning

One of the common problems I faced was dealing with update checks, both on Android and IOS. This becomes a challenge when users don’t update the app frequently. One strategy is overcome this problem is to force the user to update the app through their respective app stores. For this purpose, you can use the react-native-version-check library, which will check the version of the installed app and compare it with the version available in the stores. This way, you can display an informative pop-up if an update is available.

Webview

React Native has a useful library to incorporate a WebView strategy, allowing you to display a web page within the app itself. However, this approach has its limitations, especially when dealing with web pages that have intense data flow.

To overcome this issue, I suggest an excellent alternative: the react-native-inappbrowser-reborn library. With it, you will experience smoother performance and have the ability to customize the display of the web page. Moreover, this library allows you to open the page in a default browser or share the link with any other app, providing greater flexibility and interaction with the web in your app, without the limitations of the standard WebView.

Final thoughts

A project may present some challenges, but a new scenario full of possibilities appears on your table, such as optimizations, improvements, best practices, and new libraries, all to deliver the best app to the end user.

How to Develop a Portfolio using Gatsby

Jonathan Cardoso — Mon, 13 Jul 2020 20:03:01 +0000

Making it more performance, using: Styled Components, Netlify, GraphQL, …

Gatsby is a React-based static website generator. It offers advantages such as performance and SEO components!

2018

In 2018, I wanted to apply some knowledge, and thus learn more about components, in addition to wanting to have my own website. So I elaborated using these technologies:

Bootstrap v4
Font Awesome
Javascript
CSS

So, over time there was a need to apply new development stacks, which made me think about refactoring.

New website

With the rise of javascript frameworks, in 2020, I refactored using Gatsby. Along with some specific tools to increase performance, the main ones are listed below:

Screenshot of the website

Gatsby

An SSG (Static Site Generator), based on React that uses GraphQL for content consumption.

As already mentioned, one of its main advantages is to generate static files in the build, becoming a great ally to use SEO resources, having integrations through plugins with Analytics and Helmet. And it has multiple plugins.

How Gatsby works on Docs Gatsby

GraphQL

Created with the aim of facilitating data manipulation, where you make queries describing what type of data you need and it returns exactly the respective values.

Together with Gatsby, we inform what data a specific component will need. Then, the Gatsby receive this data when that component is rendered.

Styled Components

CSS-in-JS solution, which takes advantage of current componentization methods to create components in a way that reduces style conflicts, for example:

// Static object

const Box = styled.div({

  background: 'palevioletred',

  height: '50px',

  width: '50px'

});

// Adapting based on props

const PropsBox = styled.div(props => ({

  background: props.background,

  height: '50px',

  width: '50px'

}));

render(

  <div>

    <Box />

    <PropsBox background="blue" />

  </div>

);

Netlify

It’s a complete and automated platform for hosting projects “free for personal projects”, where it already has continuous deployment and several advanced features.

In the continuous deployment process, each build performed can be accessed separately through a generated URL.

If you want to know more about the source code, just access github.

I hope you enjoyed the content! If you have suggestions and/or criticisms comment below. Bye! 🖐🏽

Python3 Challenge: Unraveling Web Scraping

Jonathan Cardoso — Wed, 17 Jun 2020 19:32:50 +0000

How to add dynamic data from different pages on a website efficiently!

It’s a challenge that was requested in a real job interview, the purpose of this article is to show the technologies involved and learned during the challenge. Prior knowledge of the Django framework is required.

Challenge

A page Django is developed that presents the requested information automatically and is always up to date, and that page presents the updated numbers promptly.

The estimated population of cities Natal/RN and Mossoró/RN.
Sum of the populations of cities.
Municipal human development index (MHDI) of the cities of Natal/RN and Mossoró/RN.
The average for the Natal and Mossoró MHDIs.

All of this according to the data on the page

https://www.ibge.gov.br/cidades-e-estados.html?view=municipio

Scrapping

The language Python stands out a lot in data collection on the web. We will use the **Beautiful Soup **module, which creates a tree from HTML and XML documents analyzed on the page.

Starting project

Since you have already created a Django project and have already activated your virtualenv (I advise you to use it).

Let’s use bs4 from Beautiful Soup, we have to install the library in the project, through pip:

(venv) ❯ pip install bs4

HTML

Given that you have already created a templates folder in the app, your structure will correspond more or less this away:

Structure of Django files and folders

Now created an HTML page, in my case index.html, to show the content.

View Raw index.html on Github

Web Scrapping

Each website has it’s structure so inspect the area you want to capture and analyze, going thought each li inside of the ul in class “resultados-padrao”:

In views, we start by importing the tools to be used and the variables, placing cities and their respective fields:

from django.shortcuts import render
import re

import requests, json, locale
from bs4 import BeautifulSoup

def index(request):
  city = [
    {'state': 'rn', 'name': 'natal'},
    {'state': 'rn', 'name': 'mossoro'}
  ]
  fields = [
    'População', 'IDHM'
  ]
  city_values = []

context = {}

return render(request, 'ibge/index.html', context)

In the cityData function, pass the city variable as a parameter, scrolling by name and state, call the pages by the URL parameter through the cities, after capturing the page labels and values.

If the selected fields are the same as the ones requested, save them in the arrays, after returning city_data.

def cityData(city):
  city_data = []
  for item in city:
    # convert and read in json
    item = json.dumps(item)
    item = json.loads(item)

name = item['name']
    state = item['state']
    url_request = requests.get("https://www.ibge.gov.br/cidades-e-estados/"+ state +"/"+ name +".html")
    div_select = BeautifulSoup(url_request.content, 'html.parser')

    ul = div_select.find(class_='resultados-padrao')
    city_label = ul.findAll("p", {"class": "ind-label"})
    city_value = ul.findAll("p", {"class": "ind-value"})

    data = []
    for label, value in zip(city_label, city_value):
      text_label = label.text
      text_value = value.text
      if text_label.split()[0] == fields[0] or text_label.split()[0] == fields[1]:
        data.append([text_label, text_value])
        city_values.append(text_value.split()[0])

     data.append([name, state])
     city_data.append(data)
  return city_data

In conclusion, the expected result from views is this:

View Raw views.py on Github

Conclusion

After that, we’re done. Use this command to run the web application:

(venv) ❯ python manage.py runserver

Page rendering IBGE data.

In this tutorial, we used Python, Django, and Beautiful Soup to collect data. You now have great possibilities for development.

Project repository on Github

I hope you enjoyed the content! If you have suggestions and/or criticisms comment below. Bye! 🖐🏽

Become a Productive Programmer with VSCode

Jonathan Cardoso — Mon, 18 May 2020 15:46:37 +0000

Do you know all the tools?

If you spent hours and hours programming in your IDE and felt that you were performing more mechanical than logical actions or were not having as much productivity? This article is for you!

Themes

A fact that must be taken into account. In vscode, there are several themes that can help you not to overload your vision (the case of a dark theme) and improve the reading of source codes.

Researching themes

On the sidebar tab, of a block-like icon (Ctrl/⌘ + Shift + x), of vscode, is the extension part, where you can write in the search bar “category: themes”, being filtered by downloads and stars. One of the community favorites that I can measure, is Dracula, Material Theme e Atom One Dark Theme.

Once selected and installed, the platform will restart and load the selected theme.

Extensions

And it doesn’t matter what language (markup or programming) you use in vscode, there is some extension to that language, snippets, emmets and linting, which I will explain shortly.

vscode extensions screen on vscode

And don’t stop there, there are also for formatters, stylists, test managers, packages, etc. Here are some extensions that I use a lot:

Python
Bracket Pair Colorizer
Material Icon Theme
SASS
Prettier Code formatter
ESLint
Color Highlight
Vscode Styled Components

Shortcuts

Shortcuts are good practice for productivity, the more the better.

Search by settings: Ctrl/⌘ + Shift + p
Search or files: Ctrl/⌘ + Shift + p, (erasing the arrow)
Search line in the file: Ctrl/⌘ + Shift + p, (erasing the arrow and placing :)
Open terminal: Ctrl/⌘ + Shift + `
Up or down line: Alt + PageUp /PageDown
Replicate text: Ctrl/⌘ + h
Select identical texts: Ctrl/⌘ + d
Search the file for methods: Ctrl/⌘ + Shift + p, (erasing the arrow and placing @)

If you used another platform and are migrating to this tool, type in the search bar “keymaps + ide” and install an extension that will provide all those shortcuts. The vscode documentation provides tips and all keyboard-shortcuts on the platform.

Fonts

For a better visualization and understanding of codes, I recommend using fonts, where after installed on your machine, just use the shortcut (Ctrl/⌘ + Shift + p) to go to the user’s preferences, then click on Text Editor and on Font type your respective source and enable ligatures. The following is a source I advise:

Firacode (Font e Font Ligatures)

Emmet

This tool came to speed up the time with repetitive content like divs and components. Enable this option in both html and jsx, copying the code snippet below in your settings.json.

"emmet.triggerExpansionOnTab": true,

"emmet.syntaxProfiles": {"javascript":"jsx"},

"emmet.includeLanguages": {"javascript":"javascriptreact"},

Example

ul>li.class#id+li.class

// result

<ul>

  <li class="class" id="id"></li>

  <li class="class"></li>

</ul>

Snippets

Snippets are blocks of code that can be reused in a simple way as an acronym. With the help of extensions we can use snippets of each language such as angular, javascript, among others.

Examples, in JS

rcc

// result

import React, { Component } from 'react'

export default class FileName extends *Component* {
  render() {
    return <div>$2</div>
  }
}

clg

// result 

console.log(object)

rcredux

// result

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class FileName extends Component {
  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = state => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

For this and other information follow the visual studio marketplace.

I hope you enjoyed the content! If you have suggestions and/or criticisms comment below. Bye! 🖐🏽