Forem: Danilo Silva

🎉 Introducing @akalli/components smart components for React Native with CSS style like

Danilo Silva — Wed, 24 Aug 2022 21:28:36 +0000

@akalli/components is a framework for React Native, of smart components and form validations. You can consider it to be a child of chakra-ui/native-base ideas with styled-components.

Enough talk, just an example can make this clear lol :).

import { Text, View } from "@akalli/components";

export const Component = memo((props: IPropsHeader) => {
  return (
    <View _style={styles.view}>
      <Text _style={styles.text}>My text here</Text>
      <Text _style="color: blue;">Inline styles support too!</Text>
    </View>
  );
});

const styles = {
  view: `
    height: 100px;
    background-color: red;
    width: 100%;
  `,
  text: `
    color: white;
    font-size: 24px;
  `,
};

You can put your style inline or call it from a const or object. Under the hood, all is converted to styled-components.

Installation

npm install @akalli/components styled-components react-native-svg yup

Usage

The special props associated to this component lib are identified with _. Every time you see a prop with _ it means is one of our library, anything else is just the same as react-native. Of course thanks to typescript you can just press _ in a component to see what reserves to use.

Components

Special Views

View - The same as View in RN.
HSection and VSection - are views but with orientation designated and also more semantic.
ScrollView - The same as ScrollView in RN.
Center, HCenter and VCenter - Views with different centralizing style.
Show - A view with a condition logic, good to make more obvious and semantic conditional rendering, it includes _fallback prop to the false case.

Lists

FlatList - The same as FlatList.
SectionList - The same as SectionList.

Input

TextInput - The same as TextInput in RN.
Input - An input that works with a validation hook useMyForm(that has integration with yup).

Others

Header - An easier way to implement a header with an icon.

Theming and variants

const initialTheme = {
  colors: {},
  fontSizes: {},
  variants: {
    viewBgRed:`
      background-color: red;
    `
  }
}

<MyThemeProvider theme={initialTheme}>
  <View _variant='viewBgRed'>
   <Text>Hey coders!</Text>
  </View>
</MyThemeProvider>

Hooks

useMyStyle - This hook is used to dynamic styles. It allows you to style dynamically without causing a re-rendering.

// This will only be called again when lang changes.
 const changeLangButtonStyle = useMyStyle(styles.changeLangButton(lang), [
    lang,
  ]);

useMyStyledComponent - With this you can create your own components using our philosophy.
useMyTheme - This allows you to access our theme. To be used it needs to wrap your app with our MyThemeProvider and feed theme prop.
useMyForm - This hook is used for form validation and has integration with yup.

const schema = yup.object().shape({
  name: yup
    .string()
    .min(5, "put at least 5 letters")
    .required("Name is required"),
  email: yup.string().email("Not valid email").required("Email is required"),
});

 const { register, handleSubmitForm } = useMyForm({ schema });

  <Input
          _variant="inputForm"
          _register={register}
          _key="name" // This key must be the same as yup schema
          _label="Name"
          _placeholder="Seu nome"
          _customStyles={styles.inputDataClient}
          _colors={{
            main: "#7a7a7a",
            error: "#f5427b",
          }}
        />
       ...

const styles = { 
  inputDataClient: {
    label: `
      font-size: 20px; 
      text-align: left;

    `,
    input: `
      font-size: 18px; 
      padding-left: 15px; 
      height: 40px;
      border-radius: 8px;
      color: #A7A7A8;
    `,
    container: `
      margin-top: 20px; 
      align-items: flex-start;
    `,
  },
}

This project independent but also is part of much larger expo template package with easy installation in npx.

Meet: @akalli/create-akalli-app

It is all open source at GitHub. Checkout, and if any doubts or troubles you can create an issue or reach me at my e-mail dsilva@akalli.com.br.

🎉 Introducing @akalli/navigation react-native navigation made easy

Danilo Silva — Wed, 24 Aug 2022 16:04:55 +0000

Are you tired of manage those complex router files with guards and soooo many routes?

@akalli/navigation is a NPM package that handles with a simple object things like creation of routes, authentication flow, translation, and drawer menu for react-native apps.

Installation

npm install @akalli/navigation react-native-svg @react-navigation/drawer @react-navigation/native @react-navigation/native-stack @react-navigation/stack @react-native-async-storage/async-storage

Disclaimer:
I know it looks a lot of installations, but most of them are @react-navigation stuff, it has async storage for translations and authentication, and react-native-svg for icons that are used in the drawer. Most of those probably you already use in your app.

Basic example:

// Sample screens

export const Main = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

export const Login = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

export const AnotherScreen = () => {
  return (
    <View style={styles.container}>
      <Text>I am the main another screen</Text>
    </View>
  );
};

// Config base file

const routerConfig: IRouterProps = {
  appInitial: "Main", // Initial route
  screens: {
    MainScreens: {
      Main: Main,
    },
    AssistantScreens: {
      AnotherScreen: AnotherScreen,
    },
  },
};

// Router Provider
export default function App() {
  return <Router config={routerConfig} />;
}

And that is it. Just that routerConfig and you have your app running with routes just like magic.

Hooks

useNav - Shortcuts for navigation functions.

const { navigate, routerState, routes, route, back, drawer } = useNav();

useDict - Dictionary access mainly, but not exclusevily, for translation features.

const { lang, setLang, dict } = useDict("myModule");

useAuth - Authentication helpers and status.

This will only work if you wrap your app with

const {
  data: { tokens, user, isAuthenticated },
  actions: { setTokens, setUser, setIsAuthenticated, clearAuth },
} = useAuth();

Advanced mode

If you want to manage a more complex routing solution with authentication etc. First, you need to wrap your router with AuthProvider.

A more advanced config example:

const routerConfig: IRouterProps = {
  appInitialRoute: "Main", // Initial route
  authInitialRoute: "SignIn", // Auth initial route
  env: "prod", // authentication required to access app routes
  activeStack: "auth", // active stack, works only if not env = prod
  drawer: { // drawer props
    position: "left";
    bg: "#26a3c9",
    labelColor: "#e8d7cf",
    icons: {
      Main: MainScreenIcon,
      SignIn: SignScreenIcon,
      AnotherScreen: AnotherScreenIcon
    },
    CustomMenu: MyMenu // This option makes labelColor and icons be ignored because you have full control of the Menu component
  },
  defaultLanguage: 'es',
  dicts: { // dictionaries are the internationalization feature
    main: {
      en: {
        MY_TEXT: 'My text'
      },
      pt: {
        MY_TEXT: 'Meu texto'
      }
    }
  },
  bgs: { // background colors
    authStack: "#26a3c9",
    appStack: "#e8d7cf"
  },
  screens: {
    MainScreens: {
      Main: Main,
    },
    AssistantScreens: {
      AnotherScreen: AnotherScreen,
    },
    AuthScreens: {
      SignIn: SignIn,
    },
  },
};

This project independent but also is part of much larger expo template package with easy installation in npx.

Meet: @akalli/create-akalli-app

It is all open source at GitHub. Checkout, and if any doubts or troubles you can create an issue or reach me at my e-mail dsilva@akalli.com.br.

Thanks, everyone, and happy coding.

Advanced frontend Interview topics with React

Danilo Silva — Wed, 21 Oct 2020 14:12:38 +0000

First, let me be clear that this article doesn't teach you anything. This only organizes the topics and ideas with small summaries about each one.

Summary:

Axios
Lazy load
Error boundaries
Web workers
IndexDB
Token, cookies and JWT
Performance checkers
PWA
Realtime
CSS performance
Advanced hooks
React memo
TDD
Big LISTS

Axios

If you know about the axios security problem and someone asks this is for you, if you don't know find it here, spoyler alert, it was solved a long time ago.

The solution:
https://github.com/axios/axios/pull/1485

Alternative to axios is the request lib or fetchAPI(but this relies on some problems with code fails that get at "then" instead of "catch" and needs extra steps like response.json() and doesn't have interceptors or all kind of stuff that makes axios and other libs easier).

Lazyload

Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

How to do it:

To functions doing dynamic imports:



import("./math").then(math => {
  console.log(math.add(16, 26));
});

Or to components using React.Lazy:



const OtherComponent = React.lazy(() => import('./OtherComponent'));

This will automatically load the bundle containing the OtherComponent when this component is first rendered.
The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we're waiting for the lazy component to load.



const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

This component can be a placeholder component.
Some examples at semantic library:
https://semantic-ui.com/elements/placeholder.html

Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.



class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}
Then you can use this as a wrapper component:
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Webworker

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.



var w;
function startWorker() {
 if (typeof(Worker) !== "undefined") {
 if (typeof(w) == "undefined") {
 w = new Worker("demo_workers.js");
 }
 w.onmessage = function(event) {
 document.getElementById("result").innerHTML = event.data;
 };
 } else {
 document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
 }
}
function stopWorker() {
 w.terminate();
 w = undefined;
}

IndexDB

IndexDB is a built-in database, much more powerful than localStorage.
Key/value storage: value can be (almost) anything, multiple key types.
Supports transactions for reliability.
Supports key range queries, indexes.
Can store much more data than localStorage.

Here a sample.

Token, cookies and JWT

To make the authentication token process we need to get two tokens: the access token and the session token.
The access token is our main key to persist auth status. It just gives us access to receive the session token. The session token expires after a time at backend part. When this happens we need to make a new request with the access token to refresh the session token. Usually the code that the server send is 401 unauthorized.

With cookies this process is easier. you set the headers to contain "credentials" and it take the hidded cookies. They should be set as ont changeable by JS scripts and chrome hiddes it from cookies tab.

Bonus: If you have CORS problems to access the server you should use the properties access-control-allow-origin and/or access-control-allow-headers.

JSON Web Tokens (JWTs) make it easy to send read-only signed "claims" between services (both internal and external to your app/site). Claims are any bits of data that you want someone else to be able to read and/or verify but not alter.

Performance checkers

Audits: Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
Redux devtools: Redux DevTools for debugging application's state changes.
React devtools: It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: "⚛️ Components(to look into your components tree)" and "⚛️ Profiler(to make performance test in each component)". It also says how many renders your component did.
Performance devtools: It is a tab of devtools that you can check the general performance of your application. Network devtools: You can check a list of all requests, and track the time they are taking to resolve. why-this-render: lib to check the quantity of components renderization.
Renderer devtools: It is an option at console options on devtools that you ca track some info about the rendering. One of them is FPS that checks how fluid is your page, the best value to FPS is at 60. So, if is lower than that that means you have space to work on performance.

Bonus articles:
Devtools, React Performance and Profiler.

PWA

Progressive web applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices. Since they are a type of web page or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play.

PWA's rely on manifests(that contains some basic info about your app) and service workers that is a type of web worker. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

Realtime

The WebSocket protocol, described in the specification RFC 6455 provides a way to exchange data between browser and server via a persistent connection. The data can be passed in both directions as "packets", without breaking the connection and additional HTTP-requests.
WebSocket is especially great for services that require continuous data exchange, e.g. online games, real-time trading systems and so on.



// First create the connection
let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
// Here you register an action when the connection starts
socket.onopen = function(e) {
  alert("[open] Connection established");
  alert("Sending to server");
  socket.send("My name is John");
};
// When the socket is updated
socket.onmessage = function(event) {
  alert(`[message] Data received from server: ${event.data}`);
};
// When it closes
socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    // e.g. server process killed or network down
    // event.code is usually 1006 in this case
    alert('[close] Connection died');
  }
};
// And when some error happens
socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};

The Server-Sent Events specification describes a built-in class EventSource, that keeps connection with the server and allows to receive events from it.
Similar to WebSocket, the connection is persistent.

But there are several important differences:

websocket and eventsource comparationEventSource is a less-powerful way of communicating with the server than WebSocket.



let eventSource = new EventSource("/events/subscribe");
eventSource.onmessage = function(event) {
  console.log("New message", event.data);
  // will log 3 times for the data stream above
};

// or eventSource.addEventListener('message', ...)

5 ways to build real-time apps with JavaScript

CSS performance

Don't use CSS icons, use SVG.
Make individual selectors like classes and call it, that is better than call the children or complicated selectors.
Fewer elements to match are less computation to run. So when using children, use direct children or individual selectors.
Alphabetic order(a plugin or package can handle).
Use mixins instead extends(SASS).
Minify it.
Split the CSS imports and call it above the elements that use it. Component based CSS.

This video has an interesting summary:

Source: https://youtu.be/2Rn8an74khk

Animations:

Watch here and see this list of CSS triggers on the page.

https://youtu.be/0Xg6r_MKGJ4

Advanced hooks

useMemo Returns a memoized value.
Pass a "create" function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
Remember that the function passed to useMemo runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in useEffect, not useMemo.

If no array is provided, a new value will be computed on every render.



const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useLayoutEffect signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.
Prefer the standard useEffect when possible to avoid blocking visual updates.

useReducer is an alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you're familiar with Redux, you already know how this works.)
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

Here's the counter example from the useState section, rewritten to use a reducer:



const initialState = {count: 0};
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

React memo

React memo is a high order component that basically checks if the component should re-render. If really is receiving some changes, so its parent can re-render and keeps it from re-render if is not necessary.

Learn more in a video.

You use it by exporting the component like this:



export default React.memo(ComponentName)

TDD
Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle: requirements are turned into very specific test cases, then the software is improved so that the tests pass.

Big lists

Lets say you have a list with thousand of items to display and you don't want to ruin the user experience that is using a phone. This video shows you two options to handle this.

https://www.youtube.com/watch?v=QhPn6hLGljU

My special thanks to all resources I did use here, like w3schools, javascript.info, MDN, react docs and several videos from YouTube.

Bye :D

Twitter: https://twitter.com/danilodev
Github: https://github.com/danilosilvadev
Twitch: https://www.twitch.tv/gorickisnotdead