DEV Community: Server Serverlesskiy

A Universal FPGA Compiler that Understands 42 Programming Languages

Server Serverlesskiy — Mon, 26 Jan 2026 16:33:28 +0000

Write code in your favorite language — get working Verilog for FPGA. For free, without vendor lock-in.

By: Dmitrii Vasilev | January 2026

🚀 TL;DR

The Problem:

HLS tools (Xilinx Vitis, Intel HLS) cost $3,000–$50,000 per year.
They only work with C/C++ — no Python, Rust, Go, or TypeScript.
Vendor lock-in: Code is tied to a specific FPGA manufacturer.

The Solution:

VIBEE — an open-source compiler that generates code in 42 languages, including Verilog for FPGA, from .vibee specifications.
Free: $0 vs $3,000–$50,000.
42 Languages: Python, Rust, Go, TypeScript, Java, Zig, Swift, even COBOL → Verilog.
No Vendor Lock-in: The same code works on AMD (Xilinx), Intel (Altera), and Lattice.

Technical Essence:

specs/tri/my_module.vibee (language: varlog)  →  VIBEE gen  →  trinity/output/fpga/my_module.v

The Result:

Ready-to-synthesize Verilog.
Testbench for verification.
Documentation.
10–100x faster than writing RTL by hand.

Try it yourself in 60 seconds:

git clone https://github.com/gHashTag/vibee-lang
cd vibee-lang
./bin/vibee gen specs/tri/bitnet_top.vibee
# Result: trinity/output/fpga/bitnet_top.v

💸 THE PROBLEM: Why is FPGA Acceleration only for Giants?

HLS Tool Pricing

Tool	Annual Cost	Languages	Vendor Lock-in
Xilinx Vitis HLS	$3,000–$5,000	C, C++	Yes (AMD/Xilinx only)
Intel HLS Compiler	$4,000–$8,000	C, C++	Yes (Intel only)
Cadence Stratus HLS	$30,000–$50,000	C, C++, SystemC	Yes
VIBEE	$0	Python, Rust, Go, TypeScript, Java, Zig, Swift, ... (42 total)	No

Conclusion: To use traditional HLS tools (High-Level Synthesis from C/C++), you need to pay $3,000–$50,000, and your code will be tied to a vendor. For classic HDL development, there are free tools like Vivado/Quartus, but the barrier to entry is high — you must know Verilog/SystemVerilog.

Traditional HLS Limitations

Only C/C++ — No Python, Rust, Go, or TypeScript.
High Barrier to Entry — You need to know not just the language, but the specifics of HLS synthesis.
Long Development Cycle → Code → Synthesis → Verification takes hours.
Poor Portability — Code for Xilinx won't work on Intel without a rewrite.

Result: FPGAs remain a niche technology for large companies with big budgets.

🔧 THE SOLUTION: VIBEE — A Specification-First Compiler

VIBEE was originally created as a language for vibe coders — people who want to write specifications, not code. The core idea:

.vibee specification → auto-generation of code + tests + documentation

But when we added support for language: varlog (a synonym for Verilog), it turned out that the same specification can generate both software and hardware.

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                    VIBEE FPGA PIPELINE                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Python/Rust/Go/TypeScript code → .vibee specification            │
│                             ↓                                    │
│                    VIBEE Compiler (Zig)                          │
│                             ↓                                    │
│              Verilog Generation (Synthesizable)                  │
│                             ↓                                    │
│          trinity/output/fpga/ module + testbench                 │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Advantage: You write logic in a language you understand (Python, Rust, Go, TypeScript), and VIBEE turns it into high-quality Verilog.

🧬 TECHNICAL DETAILS: From .vibee to FPGA

Step 1: Create a Specification

# specs/tri/neural_layer.vibee
name: neural_layer
version: "1.0.0"
language: varlog  # or verilog — they are synonyms
module: neural_layer

sacred_constants:
  phi: 1.618033988749895
  trinity: 3.0

types:
  LayerConfig:
    fields:
      width: Int
      depth: Int
      activation: String

behaviors:
  - name: forward_pass
    given: Input vector ready
    when: Clock rising edge
    then: Compute layer output

Step 2: Generate Verilog

./bin/vibee gen specs/tri/neural_layer.vibee
# Result: trinity/output/fpga/neural_layer.v

Step 3: Verify

verilator --lint-only --top-module neural_layer_top trinity/output/fpga/neural_layer.v

What is Generated Automatically:

Sacred Constants Module — A module with the Golden Ratio φ and the constant 3 (φ² + 1/φ² = 3).
Top Module — The top-level hierarchy with clocking and reset.
Behavior Modules — Separate modules for each behavior.
Testbench — A ready-to-use testbench for simulator verification.
Documentation — Doxygen-formatted comments.

🐍 REAL-WORLD EXAMPLE: Python → Verilog in 5 Minutes

Suppose you have a simple Python function:

def adder(a, b, carry_in):
    sum_val = a ^ b ^ carry_in
    carry_out = (a & b) | (a & carry_in) | (b & carry_in)
    return sum_val, carry_out

You can convert Python code into a .vibee specification manually or using the built-in py2vibee tool:

# py2vibee is already functional — it converts Python to .vibee specs
py2vibee adder.py --target varlog --output adder.vibee

You get a specification:

name: adder
version: "1.0.0"
language: varlog
module: adder
reset: none  # Optimization: No reset needed for data path

types:
  AdderInput:
    fields:
      a: Bool
      b: Bool
      carry_in: Bool

behaviors:
  - name: compute_sum
    given: Inputs a, b, carry_in
    when: Clock rising edge
    then: Compute sum and carry_out

Generate Verilog:

./bin/vibee gen adder.vibee

You get the module trinity/output/fpga/adder.v:

module adder(
    input wire a, b, carry_in,
    input wire clk,
    output reg sum, carry_out
);
    always @(posedge clk) begin
        sum <= a ^ b ^ carry_in;
        carry_out <= (a & b) | (a & carry_in) | (b & carry_in);
    end
endmodule

Time: For a simple adder, the savings are small. Real savings are seen in complex modules — for example, bitnet_top.vibee (305 lines) → 666 lines of Verilog with FSMs, AXI interfaces, a testbench, and SVA assertions.

⚡️ PORTABILITY — A MYTH? (PLL / DSP / Vendor Primitives)

Commenters often say: "Verilog is portable until you hit PLL or DSP blocks." And they're right. Xilinx uses MMCME2, Intel uses ALTPLL. Direct primitive portability does not exist.

VIBEE solves this through Unified Wrappers and the fpga_target field in the specification.

Example: Universal Clock Generator

name: top_system
fpga_target: xilinx  # Change to 'intel' for Altera/Intel FPGAs

behaviors:
  - name: clock_gen
    given: Input 50MHz
    then: Output 100MHz (locked)

Result for fpga_target: xilinx:
VIBEE inserts a template for Xilinx 7-series:

MMCME2_ADV #( .CLKFBOUT_MULT_F(10.0) ) mmcm_inst (
    .CLKIN1(clk_in), .RST(rst), .CLKOUT0(clk_out), .LOCKED(locked)
);

Result for fpga_target: intel:
The same .vibee file generates code for Intel:

altpll #( .inclk0_input_frequency(20000) ) pll_inst (
    .inclk({1'b0, clk_in}), .areset(rst), .clk(clk_out), .locked(locked)
);

VIBEE separates Logic (computations, FSMs) from Physics (primitives). You describe the intent; the compiler selects the implementation for specific silicon.

🏎️ HLS OUT OF THE BOX: Latency / Pipelining / Frequency

Another common question: "How can I know how many cycles it takes without reading the RTL?"

In VIBEE, we've implemented Cycle-Accurate Reporting. The compiler now analyzes the critical path and inserts metadata directly into the generated file header.

Example Extended Specification:

name: bitnet_core
fpga_target: xilinx
target_frequency: 250   # Target frequency in MHz
pipeline: auto         # Automatic pipelining

The Verilog Output will show:

// bitnet_core v1.0.0
// Latency:  6 cycles
// Target:   xilinx (250 MHz)
// Pipeline: auto

Instead of manually placing pipeline registers ("balancing the pipeline"), you define your Intent (Frequency + Mode), and VIBEE handles the routine. Our goal is to make looking at RTL no more necessary than looking at assembly listings after GCC.

📊 EXAMPLE: BitNet b1.58 — FPGA Accelerator for Neural Networks

The VIBEE repository includes a full example of an FPGA accelerator for the BitNet b1.58 neural network (Microsoft, arXiv:2402.17764).

Specification: `specs/tri/bitnet_top.vibee`

name: bitnet_top
version: "1.0.0"
language: varlog
module: bitnet_top

sacred_constants:
  phi: 1.618033988749895
  trinity: 3.0
  num_simd_cores: 16
  simd_width: 27

types:
  SystemConfig:
    fields:
      num_layers: Int
      neurons_per_layer: Int

behaviors:
  - name: system_init
    given: Reset released
    when: Power-on
    then: Initialize all submodules

Generated Verilog: `trinity/output/fpga/bitnet_top.v`

// ═══════════════════════════════════════════════════════════════════════════════
// bitnet_top v1.0.0 - Generated Verilog from .vibee specification
// ═══════════════════════════════════════════════════════════════════════════════

`timescale 1ns / 1ps

module bitnet_top_sacred_constants (
    output wire [63:0] phi,
    output wire [63:0] phi_sq,
    output wire [63:0] phi_inv_sq,
    output wire [63:0] trinity,
    output wire [31:0] phoenix
);
    assign phi        = 64'h3FF9E3779B97F4A8; // 1.6180339887...
    assign phi_sq     = 64'h4004F1BBCDCBF254; // 2.6180339887...
    assign phi_inv_sq = 64'h3FD8722D0E560419; // 0.3819660112...
    assign trinity    = 64'h4008000000000000; // 3.0
    assign phoenix    = 32'd999;
endmodule

// ... followed by 3000 lines of ready-to-synthesize code

Synthesis Results (Xilinx ZCU104):

Metric	Value
LUT utilization	5.00%
FF utilization	1.86%
BRAM utilization	8.88%
DSP utilization	3.16%
Clock frequency	300 MHz
Throughput	200 token/s
Energy Efficiency	8.0 token/J (6.4x better than NVIDIA A100)

Conclusion: A 305-line specification → 3000 lines of ready Verilog that synthesizes on real FPGA hardware.

🌍 MARKET: Why Now is the Best Time for FPGA

By the Numbers

$23.34 Billion — Projected FPGA market volume by 2030 (MarketsandMarkets, 2025 report).
+8.7% CAGR — Average annual growth rate.
Energy Efficiency — FPGAs consume 10–100x less energy than GPUs for similar tasks.
Latency — FPGAs provide deterministic latency in microseconds, critical for real-time applications.

Use Cases

Industry	FPGA Application	Why VIBEE Simplifies It
Edge AI	Model quantization, binary neural networks	Python → Verilog in minutes
Telecom	Packet processing, 5G	Rust → Verilog with safety guarantees
Automotive	ADAS, sensor processing	C++ → Verilog without vendor lock-in
Medical	ECG/MRI signal processing	MATLAB → Verilog (in development)
Crypto	Mining, zero-knowledge proofs	Specialized algorithms

🛠️ HOW TO TRY VIBEE NOW

Option 1: Quick Check (60 Seconds)

git clone https://github.com/gHashTag/vibee-lang
cd vibee-lang
./bin/vibee gen specs/tri/bitnet_top.vibee
ls -la trinity/output/fpga/bitnet_top.v

Option 2: Generate Your Own Module

Create a specification:

cat > my_fpga_module.vibee << 'EOF'
name: my_fpga_module
version: "1.0.0"
language: varlog
module: my_fpga_module

types:
  MyConfig:
    fields:
      width: Int
      max_value: Int

behaviors:
  - name: do_something
    given: Input ready
    when: Clock rising edge
    then: Process input
EOF

Generate Verilog:

./bin/vibee gen my_fpga_module.vibee

Verify syntax:

verilator --lint-only --top-module my_fpga_module_top trinity/output/fpga/my_fpga_module.v

Option 3: Full Cycle (Simulation)

cd trinity/output/fpga
iverilog bitnet_top.v bitnet_top_tb.v
./a.out
gtkwave dump.vcd  # View timing diagrams

🔧 Note on Platforms

Binaries in bin/ are built for Linux x86-64. If you are on macOS or a different architecture:

macOS ARM64: Rebuild the compiler:

   cd src/vibeec
   zig build -Doptimize=ReleaseFast
   cp zig-out/bin/vibeec ../../bin/vibee

Docker: Use the provided image:

   docker build -t vibee .
   docker run -v $(pwd):/app vibee gen specs/tri/bitnet_top.vibee

Windows WSL2: Works just like Linux.

Note: .vibee specifications are platform-independent. Verilog generation works anywhere you can rebuild or run the compiler.

📈 COMPARISON WITH TRADITIONAL TOOLS

Aspect	Traditional HLS (Xilinx/Intel)	VIBEE
Cost	$3,000–$50,000/year	$0
Input Languages	Only C/C++	Python, Rust, Go, TypeScript, Java, Zig, Swift, ... (33+ languages)
Development Time	Weeks–Months	Hours–Days
Vendor Lock-in	Yes	No (AMD, Intel, Lattice)
Code Quality	Depends on skills	Consistently high
Tests	Written manually	Generated automatically
Documentation	Manual or absent	Auto-generation
Golden Ratio φ Support	❌	✅ φ² + 1/φ² = 3

Conclusion: VIBEE lowers the barrier to entry for FPGA development from thousands of dollars and months of training to zero dollars and a few hours.

🔮 THE FUTURE: Where VIBEE is Headed

Plans for 2026–2027

VIBEE Cloud — A web interface for Verilog generation without installing the compiler.
VIBEE Marketplace — A library of pre-built .vibee specifications for common modules (UART, Ethernet, neural network accelerators).
VIBEE Studio — An IDE with a visual specification editor.
New Language Support — Adding MATLAB, Julia, and Swift for scientific computing.

Hardware Roadmap

Stage	Timeline	Expectation
FPGA Prototype	Q2 2026	Working BitNet on ZCU104
FPGA Product	Q4 2026	PCIe card with VIBEE accelerator
ASIC Tape-out	2027	Specialized chip with ternary logic

❓ FREQUENTLY ASKED QUESTIONS

1. Does it only work with ternary logic?

No. Ternary logic is an option, not a requirement. You can generate standard binary Verilog.

2. Do I need to know Verilog?

No. It's enough to understand basic digital design concepts (clocks, registers, state machines). VIBEE handles the syntax.

3. What is the quality of the generated code?

High. The code passes Verilator checks and is ready for synthesis in Vivado/Quartus. There are 10,000+ tests in the repository.

4. Can I use it in commercial projects?

Yes. VIBEE is released under the MIT license — you can use it anywhere, even in proprietary products.

5. What about support?

Community + Commercial Support. Core development is led by the team, but there are plans for corporate clients.

🎯 CONCLUSION

VIBEE breaks the barriers in FPGA development:

Financial — $0 instead of $3,000–$50,000.
Linguistic — 33 languages instead of just C/C++.
Vendorial — One code for AMD, Intel, and Lattice.
Temporal — Hours instead of weeks.

Check it out for yourself — it's free:

git clone https://github.com/gHashTag/vibee-lang
./bin/vibee gen specs/tri/bitnet_top.vibee

Links:

Model development of mobile applications React Native + AWS Amplify

Server Serverlesskiy — Thu, 11 Nov 2021 17:21:53 +0000

Model development of mobile applications React Native and sites on React Native Web.

Before we move on to the stages of "Model Development", let's look at the traditional method of application development - "Feature Development" is a method in which a task is set with a description of the functionality and with a link to Zepllin and, at best, links to prototype screens in the Marvel App. When a programmer receives a task to develop a feature, he divides it into three parts:

Layout UI
Creates screens with navigation
Implements the logic of interaction between local and cloud database storage

As a result, from the desired, we see a picture where UI components are laid out right on the screens and the layout layer merges with navigation and logic on one screen, which in turn goes beyond the boundaries of the Atomic design methodology and its slogan “Create systems, not pages. "

Insufficient elaboration of requirements at the first stage can lead to the fact that the implemented functionality will not work at all as expected by the analyst, but only as the developer understood it. That, unfortunately, in the modern world happens quite often and leads to the return of the task to the developer.

In order to eliminate this problem, I use an alternative development method, also known as the Model Development method. Its main difference from the "Feature Development" method is that initially we set the task in the form of a typed model schema TypeScript and GraphQL, which allows the developer to use code typing not by the residual principle, as is usually the case, but fundamentally at the level of creating a technical specification. And so we initially put a typed model of the database implementation into the task, which allows us to control the accuracy of the task throughout the entire life cycle of the task from the backlog to done.

And also by isolating the component layer from screens and business logic by the Storybook framework , an open source tool for building UI components and pages in isolation. It simplifies user interface development, testing, and documentation.

As a result, we divide the entire development into three stages and distribute it among three developers of the same tier:

Layout designer (Junior) - layout - UI Components
Assembler (Middle) - assembly of screens and navigation logic - Screens
Designer (Senior) - develops terms of reference in the form of TypeScript and GraphQL models - Logic.

The best way to explain something is to show an example myself, so I'll show you how I design stories for my mobile application Leela's Game using the Model Development method.

Now we will create a history for the decomposition of the ProfileScreen.

With this method, application development can be many times faster and it is called "Model Development", because any story is decomposed into three tasks, where one task implements the TypeScript model, the second GraphQL model, and in the third deploy it to the server:

Шаг 1 - UI Components - Layout - TypeScript component model

UI Components is a source-coded UI toolkit that isolates communication with screens and navigation, as well as a layer of logic, within a cross-platform UI component framework.

Building a React Native mobile app begins by creating the UI Components in the Storybook from which the app will be built. These are our building blocks, atoms, molecules, organisms, which make up the entire visual part of the application (screens).

Storybook - This development of robust user interfaces provides a sandbox for building user interfaces in isolation so you can develop hard-to-reach states and edge cases.

Due to the fact that we make the application according to the Storybook rules, our components are easily portable to React Native for Web. Because of this, we get a UI-kit not only for mobile development, but we can also use it on the site, getting the development process twice as fast in layout, since we do not need to layout components for the site separately from the mobile platform.

"Storybook is a powerful front-end tool that allows teams to design, build and organize UI components (and even full screens!) Without getting distracted from business logic and plumbing."

Brad Frost by Atomic Design

Nowadays, whoever you ask about Atomic design, then everyone is ready to follow its slogan “Create systems, not pages”, but unfortunately, in practice, developers continue to create pages to which they attach business logic.

The main benefits of creating UI Components in Storybook:

Insulation

The implementation of the components happens without fiddling with data, APIs or business logic, since the UI Components are isolated from the navigation layer with screens and application clients.

Simulate hard-to-find use cases

Rendering components in key states under load that are difficult to reproduce in an application.

Use case documentation as stories

Save use cases as stories in plain JavaScript to revisit during development, testing, and QC.

Speed up your workflow with add-ins

Use add-ons to customize your workflow, test automation, and integrate with your favorite tools.

Appearance of the visual test

Pinpoint's user interface changes with pixel precision by comparing snapshots of stories images.

Unit testing functionality

Stories are a practical, reproducible way to track UI edge cases. Write stories once and then reuse them in automated tests.

Accessibility test

Check out stories about WCAG and ARIA issues with the addon A11y.

Document the user interface to share with your team

The stories show how user interfaces actually work, not just how they are supposed to work. This makes it easier to collect testimonials and reproductions.
Storybook is a one-stop source of truth for your searchable user interface.

Get timely feedback during development

Publish your Storybook online to give your team a one-stop reference for feedback.

Sharing components between screens and applications

Each story is a use case that your team can find and reuse.

Automatic generation of user interface documentation

Write Markdown / MDX to create a custom site for Component Libraries and Design Systems using the Docs add-on.

Since we are typing components from the beginning, this is how we lay the foundation for creating a database model for local storage and on the backend side.

As well as separating the layout from the screens, this is a priority border in the first step of application development. This step sets up component development at the application design level. The programmer does not even need to come up with the names of the components, since they are written on artboards in the Sketch App or Figma program. On average, 3-6 components can be drawn up per day. Thanks to this, we can calculate the developer's man-hours to create a UI kit, and then the entire application.

When developing with React Native, you need to manually configure your app to look great on different screen sizes. This is a tedious job, so react-native-size-matters provides some simple tools that make scaling a lot easier. The idea is to design once on a standard mobile device with ~ 5 "screen and then just apply the utilities provided, so the artboard size in Sketch for the design is 320x568px.

Let's move on to the creation of technical specifications for the development of UI Components in the Storybook.

For this screen, we will implement two TypeScript models:

TypeScript Txt Component Model

import { StyleProp, TextStyle } from 'react-native'

type sizeType = 'xLarge' | 'large' | 'medium' | 'small'

interface TxtT {
  h0?: boolean
  h1?: boolean
  h2?: boolean
  h3?: boolean
  h4?: boolean
  h5?: boolean
  h6?: boolean
  color?: string
  textAlign?: string
  title: string
  numberOfLines?: number
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip'
  textStyle?: StyleProp<TextStyle>
}

TypeScript Avatar Component Model

import { StyleProp, ViewStyle, TextStyle } from 'react-native'

type sizeType = 'xLarge' | 'large' | 'medium' | 'small'

interface AvatarT {
  loading: boolean
  avatar: string 
  onPress?: () => void
  size?: sizeType
  viewStyle?: StyleProp<ViewStyle>
}

Speed - 3 - 6 components per day

Step 2 - Prototype - Navigation - GraphQL Screen Model

Compilation on Screens - The screen model is the sum of the screen models of the components on the screen. Screens are created, they are also artboards in Sketch, where we combine components and position them relative to each other. At this stage, navigation is connected. As a result, we have a ready-made prototype that can be agreed with the client. Thanks to the fact that the components are typed by TypeScript, we can lay down the component models on the screen and set the task to deploy the backend using the AWS Amplify framework .
Initially, GraphQL was designed to make frontend work easier and at the same time became the serverless language of AWS architects, where typed models became the building blocks.

Even if your plans do not have the opportunity or interest to use the AWS Amplify framework in the project, then the first two steps of this method are applicable to your project, even without typing models.

type History @model @auth(rules: [{ allow: owner, ownerField: "owner", operations: [create, update, delete] }]) {
  id: ID!
  step: Numbers! 
  cube: Numbers!
  plan: Numbers!
}

type UserProfile @model @auth(rules: [{ allow: owner, ownerField: "owner", operations: [create, update, delete] }]) {
  id: ID!
  avatar: String!
  firstName: String!
  lastName: String!
  plan: Numbers!
}

Speed - 3 - 6 screens per day

Step 3 - Logic - Deploy Model

Since the client code in AWS Amplify is generated automatically, just like the client to it, after the client has accepted the prototype, the client connects to the server by publishing schemas on the server with the amplify push command.

The speed is 5-10 minutes, since the scheme is immediately deployed from step two and at the same time there is no need to write code to create requests to the server, since code generation works. The whole deployment is the GraphQL model from step 2 sent with a single amplify push command.

Read more and how to deploy the scheme here

Sometimes you find yourself in a precarious situation, but you'd better wait longer than clearly fail the operation. Apollo has apollo-link-retry which provides exponential rollback and requests to the server between retries by default. True, it (currently) does not handle retrying for GraphQL errors in the response, only for network errors. Redux, MobX, of course, does not have this solution under the hood, since they are not clients and you have to use third-party middleware, due to the fact that REST is like a retired grandfather with the support of beloved grandchildren.

Detailed parsing of GraphQL vs REST.

AWS Amplify has a DataStore function , which is not only analogous to apollo-link-retry, but also has a built-in custom programming model with automatic version control, conflict detection and resolution in the cloud. In addition, you no longer need to write additional code to send a request to the server after the application goes online, since it comes out of the box in the form of code generation. The folder with models models and the folder graphql are generated automatically - this is the client layer for all possible CRUDs - Create Read Delete.

True in AWS Amplify Create and Update are one method DataStore.save.

Serverless

Creating a backend on AWS Amplify is working with serverless technology, so before proceeding, we'll figure out what is serverless computing and what are their advantages over server-side computing.

A prediction by the University of Berkeley pundits on how backend technology will evolve:

By providing a simplified programming environment, Serverless Computing makes the cloud much easier to use, thereby attracting more people who can and will use it. Serverless computing includes FaaS and BaaS offerings and marks an important milestone in the evolution of cloud programming. This eliminates the need for manual resource management and optimization that today's server-side computing imposes on application developers, which is like the transition from assembly language to high-level languages over four decades ago.

We forecast server-free usage to skyrocket. We also predict that on-premises hybrid cloud applications will shrink over time, although some deployments may persist due to regulatory and data governance constraints.

Serverless computing will become the standard computing paradigm in the cloud age, largely replacing server-side computing and thus ending the client-server era.

Cloud Programming Simplified: A Berkeley View on Serverless Computing

Serverless Computing

Cloud-native architecture that allows you to outsource most of your operational responsibility to AWS for more flexibility and innovation. Serverless computing allows you to build and run applications and services without worrying about servers. They eliminate the need to deal with infrastructure management issues such as provisioning servers or clusters, resource requirements, and operating system patching and maintenance. They can be used for virtually any type of back-end application or service, and everything that is required to run and scale a highly available application is done without client intervention.

In our definition, for a service to be considered serverless, it must scale automatically without the need for explicit provisioning and be billed based on usage.

Cloud Programming Simplified: A Berkeley View on Serverless Computing

To put it very simply, Serverless means not the physical absence of servers, but the absence of the headache of infrastructure management, maintenance and creation.

Advantages of serverless architecture:

There are many ways to create an application these days. Decisions made at an early stage can and will affect not only the lifecycle of an application, but also development teams and, ultimately, a company or organization. In this article, I advocate and outline ways to build your applications using serverless technologies using the Model Development methodology. What are the benefits of building an application this way, and why is serverless becoming so popular?

One programming language

With modern tools and methodologies such as AWS Amplify, one developer can leverage their existing set of skills and knowledge of a unified platform and ecosystem to build scalable applications, complete with all the features that would have required teams of highly skilled backend programmers and DevOps engineers to build and maintain in the past.

Less code

The only thing that has value is the function that the code provides, not the code itself. When you find ways to provide these functionality while limiting the amount of code you support and even ditching code entirely, you reduce the overall complexity of your application.
Less complexities mean fewer bugs, easier for new engineers, and overall less cognitive load for those supporting and adding new features.
A developer can connect to these services and implement functions without knowing the actual internal implementation and having little or no internal code.

No need to manage servers

No need to provision or maintain servers. No installation, maintenance or administration of software or runtime required.

Scalability

One of the main advantages of not having a server is scalability out of the box. When building an application, you don't have to worry about what happens if your application becomes extremely popular and you connect more new users and the cloud provider can handle it for you.
The cloud provider automatically scales your application by executing code in response to each interaction. In a serverless function, your code runs in parallel and handles each trigger individually (in turn, scales based on the size of the workload).
No need to worry about scaling your servers and databases.

Development speed

With fewer features, development speed increases. The ability to quickly deploy the types of functions that are typical of most applications (databases, authentication, storage, APIs), and with much less upfront time, allows you to quickly get started writing the core functions and business logic for the function you want to deliver to the end. to the client.

Experiments

If you don't spend a lot of time creating repetitive features, you can experiment more easily and with less risk.
When submitting a new feature, you often assess the risk (time and money involved in creating that feature) with a possible return on investment (ROI). As the risk associated with trying new things decreases, you may experience ideas that may not have seen the light of day in the past.
We can also test different ideas much easier.

Security and stability

Since the services you subscribe to are the core competency of the service provider, you get something much more polished and usually more secure than you could possibly create yourself.
Imagine a company whose core business model is focused on providing primary authentication services and has been using it for years, solving and fixing problems for thousands of companies and customers.
Now imagine that you are trying to replicate such a service in your own team or organization. While it is entirely possible and feasible, the chances are that choosing a service created and maintained by people whose only job is to create and maintain this exact thing is a safer and more reliable bet.
Another primary concern of these service providers is simply to keep downtime to a minimum. This means that they take on the burden of not only building, deploying and maintaining these services, but also do their best to ensure their stability and resilience.

Automatic availability control

Serverless computing provides built-in high availability and fault tolerance. These capabilities do not need to be specially designed because the services that run the application provide them by default.

Price

With the traditional approach, you often pay for computing resources whether they are being used or not. This means that if you want to ensure that your application will scale, you need to prepare for the largest workload you could see, regardless of whether it reaches that level. After all, this traditional approach meant that you pay for unused resources for most of your application's lifespan.
With serverless technologies, you only pay for what you use. With FaaS (Function-as-a-Service), you are billed based on the number of requests for your functions and the time it takes to execute your function code. With managed services like Amazon Rekognition, you only pay for rendered images, minutes for video processing, and more, again, paying only for what you use.
The bill from your cloud provider is only a fraction of the total cost of your cloud infrastructure, as well as salary. This cost decreases if you have fewer operational resources.
There are also development costs. Building applications in this way speeds time-to-market, reducing overall development time and therefore development costs.
In general, you pay for stable bandwidth or runtime, not for the number of servers you use.

More about pricing here

Output

The frontend / backend separation model itself is a thing of the past, together with feature developers in the era of serverless technologies, where full-stack developers implement model assembly of applications many times faster than feature developers.

JavaSript Bot

Server Serverlesskiy — Fri, 26 Mar 2021 08:19:00 +0000

With the help of this Telegram bot you can test your knowledge of JavaScript basics.

We use questions from 29 topics of our course on JavaScript basics. More details about us can be found in the previous publication.
As a result of answering all the questions, an assessment of your level of knowledge awaits you.

Telegraph.js

Our bot is implemented on the framework Telegraph.js

OpenSource

The source code of the project is available on GitHub, so you can participate in its development.

require('dotenv').config()
const { Telegraf, session, Stage, BaseScene } = require('telegraf')
const TelegrafI18n = require('telegraf-i18n')
const { level, getSticker, MyContext } = require('./helpers')
const { en, ru } = require('./quiz')
const path = require('path')

const i18n = new TelegrafI18n({
  defaultLanguage: 'en',
  directory: path.resolve(__dirname, 'locales')
})

let BOT_TOKEN

if (process.env.NODE_ENV === 'production') {
  BOT_TOKEN = process.env.BOT_TOKEN
} else {
  BOT_TOKEN = process.env.BOT_TOKEN_TEST
}

const bot = new Telegraf(BOT_TOKEN, { contextType: MyContext })

bot.use(i18n.middleware())

const jsRoom = new BaseScene('js-room')

let getQuiz = ctx => (ctx.i18n.locale() === 'en' ? en : ru)

let questions

jsRoom.enter(ctx => {
  questions = getQuiz(ctx)
  const questionIndex = 0
  const counter = 0
  ctx.session.counter = counter
  ctx.session.questionIndex = questionIndex

  const { title, random, correct_option_id } = questions[questionIndex]

  ctx.replyWithQuiz(`${ctx.i18n.t('Question')}: 1 ${ctx.i18n.t('from')} ${questions.length}\n${title}`, random, {
    correct_option_id,
    is_anonymous: false
  })
  ctx.reply(`${ctx.i18n.t('course')}: www.jscamp.app`)
})

jsRoom.on('poll_answer', ctx => {
  const questionIndex = ++ctx.session.questionIndex
  const result = questions[questionIndex - 1].correct_option_id === ctx.pollAnswer.option_ids[0]
  result && ++ctx.session.counter

  if (questionIndex !== questions.length) {
    const { title, random, correct_option_id } = questions[questionIndex]
    ctx.replyWithQuiz(
      `${ctx.i18n.t('Question')}: ${questionIndex + 1} ${ctx.i18n.t('from')} ${
        questions.length
      }\n${title}\n${ctx.i18n.t('score')} ${ctx.session.counter}`,
      random,
      {
        correct_option_id,
        is_anonymous: false
      }
    )
  } else {
    ctx.reply(
      `${ctx.i18n.t('score')} ${ctx.session.counter}. ${ctx.i18n.t('level')}: ${level(
        ctx.session.counter
      )} ${getSticker(ctx.session.counter)}`
    )
    ctx.reply(`${ctx.i18n.t('course')}: www.jscamp.app`)
  }

  ctx.scene.current.leave()
})

const stage = new Stage([jsRoom])
bot.context.questions = questions

bot.use(session())

bot.use((ctx, next) => next())
bot.use(stage.middleware())
bot.command('start', ctx => ctx.scene.enter('js-room'))
bot.launch()

Internationalization (i18n)

Bot Now communicates in English and Russian, but you can send a pull request in your native language.

What's next?

Next, we plan to implement testing on TypeScript, React Native, AWS Amplify, so subscribe to our Twitter to stay tuned.

The bot is free, but you can support our startup via Patreon

Java Script Camp

Server Serverlesskiy — Thu, 25 Feb 2021 08:27:25 +0000

“We predict that serverless will grow rapidly. We also predict that on-premises hybrid cloud applications will shrink over time, although some deployments may persist due to regulatory and data governance constraints.

Serverless computing will become the standard computing paradigm in the cloud age, largely replacing server-side computing and thus ending the client-server era. "

Cloud Programming Simplified: A Berkeley View on Serverless Computing, February 10, 2019

From this forecast, the demand for serverless technologies is obvious, and therefore for resources teaching these technologies. Therefore, we organized a programming school where we teach serverless technologies AWS Amplify, as well as prepare for them by teaching English using Emoji, JavaScript, React Native and Type Script.

For this, we have created a mobile application Sumerian School, a site JSCamp.app and YouTube channel, where for training we use 3D avatars available by default in Amazon Sumerian, thanks to which you can easily create exciting 3D -Interfaces. They also integrate with AWS services to provide easy access to machine learning, chatbots, code execution and more. With this tool we can create videos, educational materials in popular languages of the world and publish them on our site and on YouTube channel.

Purpose of the program

Prepare for the course on mobile development in the React Native / Type Script / AWS Amplify stack and for certification in AWS Certification, where in the process of preparation you will receive a wide range of expertise, resources and programs. We will help you effectively validate your cloud and mobile development expertise that every business needs today.

JavaScript Camp - JS Camp

We were inspired to create our online JavaScript course in popular languages from the book Code for Teens: JavaScript - Jeremy Moritz.

The uniqueness of the book is that it is adapted for children to study with its simplicity of presentation, its only drawback is that the number of topics set out in it is not enough to create real projects. Therefore, we set ourselves the task of creating a book JavaScript for Kids with preparation for studying the course on mobile development on the React Native library.

At this point in time, our mobile app implements English and JavaScript tests. To implement this case, we used the AWS Amplify services . You can read more about how we implemented the authentication service here, as well as how we connected the App Sync service here.

App Sync

AWS AppSync simplifies application development by allowing you to create a universal API for securely accessing, modifying, and merging data from multiple sources. AppSync is a managed service that uses GraphQL so that applications can easily retrieve only the data they need.

GraphQL

It is an API specification, a query language for the API, and a runtime for making those queries with your data. It shares some similarities with REST and is the best replacement for REST. GraphQL was introduced by Facebook in 2015, although it has been used internally since 2012.

English by Emoji

Since English is the basis of programming languages, and in Russia, where I come from, it is not my native language, understanding this, we prepared a program for learning English in a playful way using emoji. Emojis have entered our life so much that films are being made about them . At the moment, the course contains 700 words, which are divided into 12 topics: alphabet, numbers, food and drink, animals, activity, clothes, travel, objects, symbols, time, people, nature. The course is also suitable for those who want to navigate the entire emoji palette well to create emotional social media posts. A video playlist on this topic is available here.

React Native

Who doesn't know React Native is a library for creating interfaces for iOS and Android, AR / VR and creating websites from Facebook. Do you think we have succeeded in solving this problem? Write to me personally about this in Discord. We have created a course of 29 topics, which even schoolchildren from 10 years old are now taking. With React Native, it's a direct road to mobile development. Our course is aimed at those who are completely from scratch and it is better to start with us, as you will save time and you will not need to learn HTML and CSS, getting your hands on sites. With React Native, we typeset UI interfaces on JS objects, so with one knowledge of JavaScript, you can rush with us straight into mobile development.
This course contains the minimum knowledge you need to create mobile applications using the React Native library with AWS Amplify.

AWS Amplify

AWS Amplify – it is a set of tools and services that can be used together or separately by web and mobile developers to build scalable end-to-end applications on AWS. With Amplify, you can configure application backends and connect applications in minutes, deploy static web applications with a few clicks, and easily manage application content outside of the AWS console.
Amplify supports popular web platforms like JavaScript, React, Angular, Vue, Next.js, and mobile platforms like Android, iOS, React Native, Ionic, Flutter (preview). Fast time to market with AWS Amplify.

Type Script

JavaScript was originally created to make web pages live. Due to its ease of use, it gained popularity and began to be used on almost all platforms. JavaScript code is built on scripts, which are supposed to be small and fast. The developers didn't think that JavaScript would be used to write applications with a lot of code. In this connection, large applications written in JavaScript have problems. Here is some of them:

Due to the interpretability of the language, you can find out about the error only after executing the code;
The complexity of using the practices of object-oriented programming;
Dynamic typing.

To solve such problems, the TypeScript programming language was created.

TypeScript is a programming language introduced by Microsoft in 2012 and marketed as a web application development tool that extends JavaScript. TypeScript is backward compatible with JavaScript and compiles to the latter. In fact, once compiled, a TypeScript program can be executed in any modern browser or shared with the Node.js server framework. TypeScript code looks almost the same as JS code and if you have experience in frontend development, learning TypeScript is quite simple. Especially considering that you can write JS code directly in TS scripts. So we decided to teach him in our JS Camp it-camp.

Music album

The JS course consists of articles, video tutorials, podcasts, and music tracks. We created the first ever JavaScript music album. Which is available now at SoundCloud in Russian. I invite you to perform it in your own language.

Badges

In the last update of our application, a user loyalty system was released. Now everyone who has passed the English, JavaScript, ReactNative, TypeScript, AWS Amplify exams receive the corresponding badges in our Sumerian School application, which can be downloaded for free for iOS and Android here. True, tests are still available only in English and JavaScript, but this year they will be on all topics.

Open Source

Our project is available Open Source, so you can also participate in its development. We call for the translation of the site into languages other than English, Russian and Chinese, so everyone can contribute to it.

YouTube movies

We also launched a video series in Russian with the participation of children. If you want to engage in the development of your child by integrating him into our project in your native language with our franchise, then write to us at Discord.

JS Camp Program

We begin offline classes with the assembly of the Rubik's cube and those who collected the Rubik's cube enter the first grade.

💛 First class - Java Script, teacher Fiona Miller.

💚 Second class - React Native, development and layout of the system of atomic components in mobile applications iOS, Android, as well as AR / VR systems in augmented and virtual reality with a library from Facebook. Teacher Grace Willie.

💙 Third class - TypeScript, atomic component system typing, teacher Maya Lakshmi.

💜 Fourth class - AWS Amplify, serverless computing on AWS Amplify functions. Server Serverlesskiy teacher.

🤍 Optional Video Blogger Course - Piloting training avatars for our training video courses, hosts of AWS Sumerian technology. Preston Wild teacher.

💟 Preparatory class in English. Teacher Cris Brown.

Course author

The author of the Java Script course - Server Serverlesskiy, is the creator of the first React Native training course in the Russian Internet, as well as the first Russian blogger-programmer in the AWS Comunity Builders program from Amazon.

Learning process

Training takes place in the application Discord.

Payment

Training is free, but you can support our startup through Patreon.

AWS DataStore

Server Serverlesskiy — Wed, 29 Apr 2020 16:53:20 +0000

Goodbye Redux, MobX, Apollo!

Source post

The line between the backend and the frontend is broken! An innovative step in the evolution of state managers.

One of the most difficult tasks in developing web and mobile applications is to synchronize data between devices and perform offline operations. Ideally, when the device is offline, your customers should be able to continue to use your application not only to access data, but also to create and modify it. When the device returns online, the application must reconnect to the backend, synchronize the data and resolve conflicts, if any. Correct handling of all extreme cases requires a lot of undifferentiated code, even when using the AWS AppSync SDK cache on a device with autonomous mutations and delta synchronization.

Amplify DataStore provides persistent storage on the device for recording, reading and monitoring data changes if you are connected to the Internet or offline, and also makes it easy to synchronize data with the cloud and between devices.

Amplify DataStore allows developers to write applications using distributed data without writing additional code for an offline or online script.

You can use the Amplify DataStore for offline use in local-only mode without an AWS account or provide the entire backend using AWS AppSync and Amazon DynamoDB.

The DataStore includes Delta Sync using your GraphQL backend and several conflict resolution strategies.

Advantages of AWS Amplify DataStore over Redux, MobX, Apollo, Relay:

Comparing AWS Amplify with Redux, MobX is not correct, since AWS Amplify is not only a state manager, but also a client-server, so in the client-server class we will compare it with Apollo and Relay.

1. Real-time out of the box.

I don’t think that a business can be considered serious if his mobile application is not affected by subscription events implemented using web sockets technology.
And how many applications nowadays work on web sockets?
I think not, due to the fact that real-time is an additional work of developers on the back and front-end.
For us, fullStack serverless developers on AWS Amplify, real-time goes out of the box, both on the front and on the back and we don’t we need to write an implementation code for integrating web sockets for each model since it is generated automatically, as well as writing documentation for all of our generated code, implemented in our project based on the GraphQL schema instruction. In order not to scare with big words, I will show you an example from the last lesson, how Store is defined in AWS Amplify:

type Job
  @model
  @auth(
    rules: [
      {allow: owner, ownerField: "owner", operations: [create, update, delete]},
    ])
{
  id: ID!
  position: String!
  rate: String!
  description: String!
  owner: String
}

This determines the model in the store, not only for the frontend but also for the backend. One source of truth for frontend and backend. Yes, yes, I see that I will repeat it more than once in my life, since this is a killer feature and punch line vs Redux, MobX, Apollo, Relay.

It is this architecture, which is different from Redux, MobX, Apollo, which erases the line between the backend and frontend. And puts AWS Amplify DataStore over everyone

If you are from the backend, then you no longer need to write resolvers to the database and drag subscriptions to each data model.

Serverless - this is when the backend developers came to learn the frontend, as their services are needed exclusively for projects that do not keep up with the times, and from which they do not live real-time.

2. Code generation.

What is code generation you can read without me on Wikipedia unless of course you know its meaning, which in this punch reminds us of yourself.
Use fetch or axios?
By sending requests to the deep forest API, which we also write in conjunction with Redux, MobX, Apollo, Relay.
So here is another news of the day!
You no longer need to write these API calls, you only need to call them.
This means that you no longer need to create this rather big daddy with the server request code since in AWS Amplify DataStore they are also generated in your project based on your store, defined by the very same GraphQL diagram of their first item. And this is filled with one command:

npm run amplify-modelgen

As a result, we get the models folder with the generated code.

And the graphql folder after pushing to the server, with all the requests in Flow, TS, or vanilla JavaScript.

3. Offline data & cloud sync

No need to write additional code to send a request to the server after the application is online.
Sometimes you find yourself in an unreliable situation, but you better wait longer than obviously fail the operation.
Apollo has apollo-link-retry which provides exponential rollback and server requests between default attempts. True, he (currently) does not handle retries for GraphQL errors in the response, only for network errors.
Redux, MobX, of course, does not have this solution under the hood, since they are not clients and you have to use third-party middleware, because REST is like a retired grandfather with the support of any grandchildren. Detailed analysis of GraphQL vs REST.
AWS Amplify DataStore has not only an analog of apollo-link-retry, but also a built-in and customizable familiar programming model with automatic version control, conflict detection, and resolution in the cloud.

Among the disadvantages of AWS Amplify, I want to mention that Apollo hooks with its loading and error out of the box reduce the amount of code written on the front.

Official documentation

At the end of this lesson we will collect with you this mobile application using the Amplify DataStore:

Go!

Our AWS Amplify support chat Discord

The final code for this part can be found on Github.

Clone the repository

If you continue the last lesson, you can go directly to step 5.

git clone https://github.com/fullstackserverless/startup.git

Go to the project folder

cd startup

Install dependencies

yarn

npm install

Register your AWS account

Step For Those Not Yet AWS Registered
We register according to this instructions 📃 and by the video tutorial, we check all 5 steps.

You need a bank card 💳, where should be more than 1$ 💵 There we look and put the Amplify Command Line Interface (CLI)

Initializing AWS Amplify in a React Native Project

Initialize our AWS Amplify project in the root directory of the React Native project.

amplify init

We answer the questions:

The project was initialized 🚀

Connect the authentication plugin

Now that the application is in the cloud, you can add some features, such as allowing users to register with our application and log in.

We connect the authentication function.

amplify add auth

Submitting changes to the cloud 💭

amplify push

✔ All resources are updated in the cloud

We collect the project and check the operation of authentication.

amplify-app

The fastest way to get started with the DataStore is to use the npx script amplify-app.

npx amplify-app@latest

Installing dependencies

Detailed installation here

If you have a React Native CLI, then

yarn add @aws-amplify/datastore @aws-amplify/core @react-native-community/netinfo @react-native-community/async-storage

And if you use React Native> 0.60, then run the following command for iOS:

cd ios && pod install && cd ..

Connecting the API plugin (App Sync)

If you connected it in the last lesson, then skip this step.
If not, connect the API plugin

amplify add api

After the selected items, the GraphQL schema will open in amplify/backend/api/<datasourcename>/schema.graphql where we insert this model:

type Job
  @model
  @auth(
    rules: [
      {allow: owner, ownerField: "owner", operations: [create, update, delete]},
    ])
{
  id: ID!
  position: String!
  rate: String!
  description: String!
  owner: String
}

More about here

Model generation

Modeling your data and creating the models used by the DataStore is the first step to getting started. GraphQL is used as a common language for JavaScript, iOS, and Android for this process, and is also used as a network protocol when synchronizing with the cloud. GraphQL also supports some features, such as Automerge in AppSync. Model generation can be done using the NPX script or from the command line using the Amplify CLI.

You do not need an AWS account to run it and use DataStore locally, however, if you want to synchronize with the cloud, it is recommended to install and configure Amplify CLI as in the last lesson

Since we described the circuit in the last lesson, now it’s enough for us to run the command

npm run amplify-modelgen

and get the generated model in the src/models folder

Updating API

We include DataStore for all API

amplify update api

Submitting changes to the cloud 💭

amplify push

✔ All resources are updated in the cloud

READ

Create the JobsMain src/screens/Jobs/JobsMain.js screen

On this screen, we will make a Query query, with the pagination option, where the number is through the useQuery hook and it will return an array to us, which we will send to Flatlist.

import React, { useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import { Auth } from 'aws-amplify'
import { AppContainer, CardVacancies, Space, Header } from 'react-native-unicorn-uikit'
import { DataStore } from '@aws-amplify/datastore'
import { Job } from '../../models'
import { goBack, onScreen } from '../../constants'

const JobsMain = ({ navigation }) => {
  const [data, updateJobs] = useState([])

  const fetchJobs = async () => {
    const mess = await DataStore.query(Job)
    updateJobs(mess)
  }

  useEffect(() => {
    fetchJobs()
    const subscription = DataStore.observe(Job).subscribe(() => fetchJobs())
    return () => {
      subscription.unsubscribe()
    }
  }, [data])

  const _renderItem = ({ item }) => {
    const owner = Auth.user.attributes.sub
    const check = owner === item.owner
    return (
      <>
        <CardVacancies obj={item} onPress={onScreen(check ? 'JOB_ADD' : 'JOB_DETAIL', navigation, item)} />
        <Space height={20} />
      </>
    )
  }

  const _keyExtractor = (obj) => obj.id.toString()

  return (
    <AppContainer onPress={goBack(navigation)} flatlist>
      <FlatList
        scrollEventThrottle={16}
        data={data}
        renderItem={_renderItem}
        keyExtractor={_keyExtractor}
        onEndReachedThreshold={0.5}
        ListHeaderComponent={
          <Header
            onPress={goBack(navigation)}
            onPressRight={onScreen('JOB_ADD', navigation)}
            iconLeft="angle-dobule-left"
            iconRight="plus-a"
          />
        }
        stickyHeaderIndices={[0]}
      />
    </AppContainer>
  )
}

export { JobsMain }

To disclose the details of the vacancy, create the screen JobDetail src/screens/Jobs/JobDetail.js

import React from 'react'
import { Platform } from 'react-native'
import { AppContainer, CardVacancies, Space, Header } from 'react-native-unicorn-uikit'
import { goBack } from '../../constants'

const JobDetail = ({ route, navigation }) => {
  return (
    <AppContainer>
      <Header onPress={goBack(navigation)} iconLeft="angle-dobule-left" />
      <CardVacancies obj={route.params} detail />
      <Space height={Platform.OS === 'ios' ? 100 : 30} />
    </AppContainer>
  )
}

export { JobDetail }

CREATE UPDATE DELETE

Create the screen JobAdd src/screens/Jobs/JobAdd.js, where we perform the functions CREATE UPDATE DELETE

import React, { useState, useEffect, useRef } from 'react'
import { AppContainer, Input, Space, Button, Header, ButtonLink } from 'react-native-unicorn-uikit'
import { DataStore } from '@aws-amplify/datastore'
import { Formik } from 'formik'
import * as Yup from 'yup'
import { Job } from '../../models'
import { goBack } from '../../constants'

const JobAdd = ({ route, navigation }) => {
  const [loading, setLoading] = useState(false)
  const [check, setOwner] = useState(false)
  const [error, setError] = useState('')

  const [input, setJob] = useState({
    id: '',
    position: '',
    rate: '',
    description: ''
  })

  const formikRef = useRef()

  useEffect(() => {
    const obj = route.params
    if (typeof obj !== 'undefined') {
      setOwner(true)
      setJob(obj)
      const { setFieldValue } = formikRef.current
      const { position, rate, description } = obj
      setFieldValue('position', position)
      setFieldValue('rate', rate)
      setFieldValue('description', description)
    }
  }, [route.params])

  const createJob = async (values) => (await DataStore.save(new Job({ ...values }))) && goBack(navigation)()

  const updateJob = async ({ position, rate, description }) => {
    try {
      setLoading(true)
      const original = await DataStore.query(Job, input.id)
      const update = await DataStore.save(
        Job.copyOf(original, (updated) => {
          updated.position = position
          updated.rate = rate
          updated.description = description
        })
      )
      update && goBack(navigation)()
      setLoading(false)
    } catch (err) {
      setError(err)
    }
  }

  const deleteJob = async () => {
    try {
      setLoading(true)
      const job = await DataStore.query(Job, input.id)
      const del = await DataStore.delete(job)
      del && goBack(navigation)()
      setLoading(false)
    } catch (err) {
      setError(err)
    }
  }

  return (
    <AppContainer onPress={goBack(navigation)} loading={loading} error={error}>
      <Header onPress={goBack(navigation)} iconLeft="angle-dobule-left" />
      <Space height={20} />
      <Formik
        innerRef={formikRef}
        initialValues={input}
        onSubmit={(values) => (check ? updateJob(values) : createJob(values))}
        validationSchema={Yup.object().shape({
          position: Yup.string().min(3).required(),
          rate: Yup.string().min(3).required(),
          description: Yup.string().min(3).required()
        })}
      >
        {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
          <>
            <Input
              name="position"
              value={values.position}
              onChangeText={handleChange('position')}
              onBlur={() => setFieldTouched('position')}
              placeholder="Position"
              touched={touched}
              errors={errors}
            />
            <Input
              name="rate"
              keyboardType="numeric"
              value={`${values.rate}`}
              onChangeText={handleChange('rate')}
              onBlur={() => setFieldTouched('rate')}
              placeholder="Rate"
              touched={touched}
              errors={errors}
            />
            <Input
              name="description"
              value={values.description}
              onChangeText={handleChange('description')}
              onBlur={() => setFieldTouched('description')}
              placeholder="Description"
              touched={touched}
              errors={errors}
              multiline
              numberOfLines={5}
            />
            <Space height={40} />
            <Button title={check ? 'Update' : 'Create'} disabled={!isValid} onPress={handleSubmit} formik />
            {check && (
              <>
                <Space height={10} />
                <ButtonLink title="or" textStyle={{ alignSelf: 'center' }} />
                <Space height={15} />
                <Button title="DELETE" onPress={deleteJob} cancel />
              </>
            )}
          </>
        )}
      </Formik>
      <Space height={100} />
    </AppContainer>
  )
}

export { JobAdd }

and in screens/Jobs/index.js we export screens

export * from './JobsMain'
export * from './JobDetail'
export * from './JobAdd'

Navigation

Add import of Jobs screens and connect them to StackNavigator

import * as React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import { enableScreens } from 'react-native-screens' // eslint-disable-line
import { Hello, SignUp, SignIn, ConfirmSignUp, User, Forgot, ForgotPassSubmit } from './screens/Authenticator'
import { JobsMain, JobDetail, JobAdd } from './screens/Jobs'

enableScreens()

const Stack = createStackNavigator()

const AppNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
      initialRouteName="HELLO"
    >
      <Stack.Screen name="HELLO" component={Hello} />
      <Stack.Screen name="SIGN_UP" component={SignUp} />
      <Stack.Screen name="SIGN_IN" component={SignIn} />
      <Stack.Screen name="FORGOT" component={Forgot} />
      <Stack.Screen name="FORGOT_PASSWORD_SUBMIT" component={ForgotPassSubmit} />
      <Stack.Screen name="CONFIRM_SIGN_UP" component={ConfirmSignUp} />
      <Stack.Screen name="USER" component={User} />
      <Stack.Screen name="JOBS_MAIN" component={JobsMain} />
      <Stack.Screen name="JOB_DETAIL" component={JobDetail} />
      <Stack.Screen name="JOB_ADD" component={JobAdd} />
    </Stack.Navigator>
  )
}

export default AppNavigator

Jobs Button

Editing the User screen in screens/Authenticator/User/index.js

import React, { useState, useEffect } from 'react'
import { Auth } from 'aws-amplify'
import * as Keychain from 'react-native-keychain'
import { AppContainer, Button } from 'react-native-unicorn-uikit'
import { goHome, onScreen } from '../../../constants'

const User = ({ navigation }) => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    const checkUser = async () => {
      await Auth.currentAuthenticatedUser()
    }
    checkUser()
  })

  const _onPress = async () => {
    setLoading(true)
    try {
      await Auth.signOut()
      await Keychain.resetInternetCredentials('auth')
      goHome(navigation)()
    } catch (err) {
      setError(err.message)
    }
  }

  const _onPressJob = () => onScreen('JOBS_MAIN', navigation)() // переход на экран JOBS_MAIN

  return (
    <AppContainer message={error} loading={loading}>
      <Button title="Sign Out" onPress={_onPress} />
      <Button title="Jobs" onPress={_onPressJob} />
    </AppContainer>
  )
}

export { User }

Build the application and test

Source post

Done ✅

References:

https://aws-amplify.github.io

https://learning.oreilly.com/library/view/full-stack-serverless/9781492059882/

https://www.altexsoft.com/blog/engineering/graphql-core-features-architecture-pros-and-cons/

https://engineering.fb.com/core-data/graphql-a-data-query-language/

https://graphql.org/learn

CRUD (Create Read Update Delete) / AWS Amplify + GraphQL + React Native

Server Serverlesskiy — Tue, 10 Dec 2019 19:43:09 +0000

This part II is a logical continuation of part I, the series Full Stack Serverless.
At the end of this article, we will make this mobile application:

The final code for this part can be found on Github.

Introduction

Creating a backend on AWS Amplify is working with serverless technology, so before proceeding with coding, we will figure out what serverless computing is and what are their advantages over server computing.

Prediction of pundits from Berkeley University about how the backend technology will develop:

By providing a simplified programming environment, serverless computing makes the cloud much easier to use, thereby attracting more people who can and will use it. Serverless computing comprises FaaS and BaaS offerings, and marks an important maturation of cloud programming. It obviates the need for manual resource management and optimization that today’s serverful computing imposes on application developers, a maturation akin to the move from assembly language to high-level languages more than four decades ago.

We predict that serverless use will skyrocket. We also project that hybrid cloud on-premises applications will dwindle over time, though some deployments might persist due to regulatory constraints and data governance rules.

Serverless computing will become the default computing paradigm of the Cloud Era, largely replacing serverful computing and thereby bringing closure to the Client-Server Era.

Cloud Programming Simplified: A Berkeley View on Serverless Computing

Serverless computing is a natural cloud architecture that transfers most of AWS's operational responsibility, and thus provides more flexibility and innovative capabilities. Serverless computing allows you to create and run applications and services without worrying about servers. They eliminate the need to deal with infrastructure management issues, such as allocating servers or clusters, necessary resources, as well as installing patches and maintaining the operating system. They can be used for almost any type of application or server-side services, while everything that is required to run and scale an application with high availability is performed without client intervention.

Backend - Create an API

We will now create the GraphQL API, which interacts with the DynamoDB NoSQL database to perform CRUD operations (create, read, update, delete).

amplify add api

After the selected items, a diagram will open, which is always available for editing at ./amplify/backend/api/messaga/schema.graphql
Where we add the following code:

type Job 
  @model
  @auth(
    rules: [
      {allow: owner, ownerField: "owner", operations: [create, update, delete]},
    ])
{
  id: ID!
  position: String!
  rate: Int!
  description: String!
  owner: String
}

This is a GraphQL schema. GraphQL Transform provides an easy-to-use abstraction that helps you quickly create server parts for web and mobile applications in AWS. Using GraphQL Transform, you define the data model of your application using the GraphQL Schema Definition Language (SDL), and the library handles the conversion of the SDL definition to a set of fully descriptive AWS CloudFormation templates that implement your data model.

When used with tools like the Amplify CLI, GraphQL Transform simplifies the process of developing, deploying, and supporting GraphQL APIs. With it, you define your API using the GraphQL Schema Definition Language (SDL) and then use automation to transform it into a fully descriptive cloud information template that implements the specification.

GraphQL is an API specification. This is the query language for the API and the runtime to execute these queries with your data. It has some similarities with REST and is the best replacement for REST.

GraphQL was introduced by Facebook in 2015, although it has been used internally since 2012. GraphQL allows clients to determine the structure of the required data, and it is this structure that is returned from the server. Querying data in this way provides a much more efficient way for client-side applications to interact with APIs, reducing the number of incomplete samples and preventing excessive data samples.

Learn more about the benefits of GraphQL here.

Let us return to our scheme, where the main components of the GraphQL scheme are object types, which simply represent the type of object that you can extract from your service, and what fields it has.

Job is a type of a GraphQL object (GraphQL Object Type), that is, a type with some fields. Most types in your schema will be object types.

id position rate description owner - fields in type Job. This means that these are the only fields that can appear in any part of a GraphQL query that works with the Job type.

String is one of the built-in scalar types - these are types that are resolved into a single scalar object and cannot have subselects in the query. We will look at scalar types later.

String! - the field is not NULL, means that the GraphQL service promises to always give you a value when requesting this field. In general, this is a required field.

GraphQL comes with a set of default scalar types out of the box:

Int 32-bit signed integer.

Float double-precision floating point value.

String character sequence UTF - 8.

Boolean true or false.

ID scalar type ID is a unique identifier often used to retrieve an object or as a key for a cache. The type of identifier is serialized in the same way as a string; however, the definition of it as an identifier means that it is not intended for human perception.

Directives

@model — Object types marked with @model are top level objects in the generated API. Objects marked with @model are stored in Amazon DynamoDB and can be protected with @auth, linked to other objects via @connection

@auth - Authorization is required for applications to interact with your GraphQL API. API keys are best used for public APIs.
The @auth object types annotated by @auth are protected by a set of authorization rules that provide you with additional controls than top-level authorization in the API. You can use the @ auth directive to determine the types of objects and fields in your project schema.
When using the @ auth directive for object type definitions, which are also annotated by @model, all recognition tools that return objects of this type will be protected.

Other directives and details in official documentation.

`@auth` directive rules

@auth( rules: [ {allow: owner, ownerField: "owner", operations: [create, update, delete]} ])

mean that the operations CREATE, UPDATE, DELETE are allowed exclusively to the owner, and the read operation is for everyone.

It's time to test it in practice! Therefore, we write the command in the console:

amplify mock api

With this team, you can quickly test your achievements of change without the need to allocate or update the cloud resources that you use at each stage. In this way, you can configure unit and integration tests that can be performed quickly without affecting your cloud backend.

Three whales on which GraphQL stands:

Query (READ)

Simply put, queries in GraphQL are how you intend to query data. You will receive exactly the data that you need. No more no less.

Mutation (CREATE UPDATE DELETE)

Mutations in GraphQL are a way to change data on a server and get updated data back.

Subscriptions

A way to maintain a connection to the server in real time. This means that whenever an event occurs on the server and when this event is called, the server will send the appropriate data to the client.

You can see all available methods by clicking on Docs (Documentation Explorer) in the upper right corner. The values are clickable, so you can see all the possible queries.

CREATE

We open our API at the address that issued (each has its own) the result of the amplify mock api command

and execute the CREATE query by pressing the play button.

mutation Create {
  __typename
  createJob(input: {position: "React Native Developer", rate: 3000, description: "We are looking for a React Native developer (St. Petersburg) to develop from scratch a mobile version of the main cs.money platform  Our product is an international trading platform for the exchange of virtual items. (CS: GO, Dota 2) which is shared by more than 5 million users. The project has existed for more than 3 years. and takes a leading position in its field. The platform is used in more than 100 countries of the world.  Now we want to make a mobile application and decided to do it on React Native. You have to develop an application from scratch and this is a great opportunity to build a good architecture without resting on legacy.  Requirements:  Knowledge of react patterns Knowledge of SOLID principles Knowledge of the basics of mobile specifics (caching, working with the native API, rendering optimization) Knowledge of RN"}) {
    description
    id
    owner
    position
    rate
  }
}

To consolidate the material, create some more vacancies.

READ

We get a list of all the vacancies. Insert request:

query Read {
  __typename
  listJobs {
    items {
      description
      id
      owner
      position
      rate
    }
  }
}

UPDATE

To update, we need to take the vacancy ID (be sure to enter your own, and not from the example) and pass it to this request with the data changed. For example, update the position and rate fields

mutation Update {
  __typename
  updateJob(input: {id: "1a8a763f-28b8-450a-96f0-73e0d1d8ac04", position: "Full Stack Serverless", rate: 5000}) {
    id
    description
    owner
    position
    rate
  }
}

DELETE

To delete, as well as in the case of the update, we need to transfer the vacancy ID (be sure to enter your own, and not from the example).

mutation Delete {
  __typename
  deleteJob(input: {id: "1a8a763f-28b8-450a-96f0-73e0d1d8ac04"}) {
    id
  }
}

Permissions

Now let's check if our rules work, which we indicated in the scheme. Only the owner can update, delete and create.

@auth( rules: [ {allow: owner, ownerField: “owner”, operations: [create, update, delete]} ])

To change the user, click on UpdateAuth in the main menu. Where we randomly update Username and Email.

If we send a READ request, then it works, but if we send an UPDATE or DELETE request and we get an error.

The rules work, as required!

Now that we have tested the functionality of the API, we can publish it to the cloud with the command:

amplify push

Or immediately proceed to create a mobile interface to the created API in the React Native application.

FRONTEND

Preparation

To implement this workflow, we need the following libraries:
react-navigation-tabs
@aws-amplify/api
@aws-amplify/pubsub
aws-amplify-react-hooks

We put them at once:

yarn add react-navigation-tabs @aws-amplify/api@1.2.4 @aws-amplify/core@1.2.4 @aws-amplify/pubsub@1.2.4 aws-amplify-react-hooks

Creation and layout of components

Card

Create a Card Wrap Component
src/components/Card/index.js

import React, { memo } from 'react'
import { StyleSheet, View } from 'react-native'
import { BLUE } from '../../constants'

const styles = StyleSheet.create({
  card: {
    borderRadius: 17,
    borderWidth: 0.5,
    borderColor: BLUE,
    padding: 25,
    marginBottom: 20
  }
})

const Card = memo(({ children }) => {
  const { card } = styles
  return <View style={card}>{children}</View>
})

export { Card }

CardJob

Create the CardJob component
src/components/CardJob/index.js

import React, { memo } from 'react'
import { StyleSheet, TouchableWithoutFeedback, Text, View } from 'react-native'
import { BLUE } from '../../constants'

const styles = StyleSheet.create({
  card: {
    borderRadius: 17,
    borderWidth: 0.5,
    borderColor: BLUE,
    padding: 25,
    height: 200,
    marginBottom: 20
  },
  h1: {
    fontFamily: '3270Narrow',
    color: '#dbdbdb',
    fontSize: 18
  },
  h2: {
    fontFamily: '3270Narrow',
    color: '#6a676a',
    marginVertical: 15,
    fontSize: 13,
    letterSpacing: 0.92,
    flexGrow: 1
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  h3: {
    color: '#cfcfcf',
    fontFamily: '3270Narrow',
    textTransform: 'uppercase',
    fontSize: 18,
    letterSpacing: 0.97
  },
  h4: {
    color: '#cfcfcf',
    fontFamily: '3270Narrow',
    textTransform: 'uppercase',
    fontSize: 18,
    letterSpacing: 1.17
  }
})

const CardJob = memo(({ item: { position, description, rate, owner }, onPress }) => {
  const { card, h1, h2, footer, h3, h4 } = styles
  const userSlice = owner.slice(0, 10)
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={card}>
        <Text style={h1}>{position}</Text>
        <Text style={h2} numberOfLines={5} ellipsizeMode="tail">
          {description}
        </Text>
        <View style={footer}>
          <Text style={h3}>{userSlice}</Text>
          <Text style={h4}>{rate}$</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  )
})

export { CardJob }

CardJobDetail

Creating the CardJobDetail Component
src/components/CardJobDetail/index.js

import React, { memo } from 'react'
import { StyleSheet, TouchableWithoutFeedback, Text, View } from 'react-native'
import { BLUE } from '../../constants'

const styles = StyleSheet.create({
  card: {
    borderRadius: 17,
    borderWidth: 0.5,
    borderColor: BLUE,
    padding: 25,
    marginBottom: 20
  },
  h1: {
    fontFamily: '3270Narrow',
    color: '#dbdbdb',
    fontSize: 18
  },
  h2: {
    fontFamily: '3270Narrow',
    color: '#6a676a',
    marginVertical: 15,
    fontSize: 13,
    letterSpacing: 0.92,
    flexGrow: 1
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  h3: {
    color: '#cfcfcf',
    fontFamily: '3270Narrow',
    textTransform: 'uppercase',
    fontSize: 18,
    letterSpacing: 0.97
  },
  h4: {
    color: '#cfcfcf',
    fontFamily: '3270Narrow',
    textTransform: 'uppercase',
    fontSize: 18,
    letterSpacing: 1.17
  }
})

const CardJobDetail = memo(({ item: { position, description, rate, owner }, onPress }) => {
  const { card, h1, h2, footer, h3, h4 } = styles
  const userSlice = owner.slice(0, 10)
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={card}>
        <Text style={h1}>{position}</Text>
        <Text style={h2}>{description}</Text>
        <View style={footer}>
          <Text style={h3}>{userSlice}</Text>
          <Text style={h4}>{rate}$</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  )
})

export { CardJobDetail }

InputMuliline

Create InputMuliline
Edit src/screens/Authenticator/Form/index.js

import { Platform } from 'react-native'
import t from 'tcomb-form-native'
import FloatingLabel from 'react-native-floating-label'
import {
  LABEL_COLOR,
  INPUT_COLOR,
  ERROR_COLOR,
  HELP_COLOR,
  BORDER_COLOR,
  DISABLED_COLOR,
  DISABLED_BACKGROUND_COLOR
} from '../../../constants'

const formValidation = {
  email: t.refinement(t.String, value => /@/.test(value)),
  password: t.refinement(t.String, value => value.length >= 8)
}

+export const structJob = t.struct({
+  position: t.refinement(t.String, value => value.length >= 3 && value <= 30),
+  rate: t.Number,
+  description: t.String
+})

export const structSignIn = t.struct({
  email: formValidation.email,
  password: formValidation.password
})

export const structSignUp = t.struct({
  email: formValidation.email,
  password: formValidation.password,
  passwordConfirmation: formValidation.password
})

export const structForgot = t.struct({
  email: formValidation.email
})

export const structForgotPass = t.struct({
  email: formValidation.email,
  code: t.Number,
  password: formValidation.password,
  passwordConfirmation: formValidation.password
})

export const structConfirmSignUp = t.struct({
  code: t.Number
})

const FONT_SIZE = 17
const FONT_WEIGHT = '500'

// Fixme
const Form = t.form.Form // eslint-disable-line

const formStyles = {
  ...Form.stylesheet,
  fieldset: {},
  // the style applied to the container of all inputs
  formGroup: {
    normal: {
      marginBottom: 8
    },
    error: {
      marginBottom: 8,
      marginLeft: 5,
      marginRight: 5
    }
  },
  controlLabel: {
    normal: {
      color: LABEL_COLOR,
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      marginLeft: 5,
      marginBottom: 7,
      fontWeight: FONT_WEIGHT
    },
    // the style applied when a validation error occours
    error: {
      marginLeft: 5,
      marginRight: 5,
      fontFamily: '3270Narrow',
      color: ERROR_COLOR,
      fontSize: FONT_SIZE,
      marginBottom: 7
    }
  },
  helpBlock: {
    normal: {
      color: HELP_COLOR,
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      marginBottom: 2
    },
    // the style applied when a validation error occours
    error: {
      marginLeft: 5,
      marginRight: 5,
      color: HELP_COLOR,
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      marginBottom: 2
    }
  },
  errorBlock: {
    fontFamily: '3270Narrow',
    fontSize: 12,
    marginBottom: 2,
    marginLeft: 5,
    marginRight: 5,
    color: ERROR_COLOR
  },
  textboxView: {
    normal: {},
    error: {},
    notEditable: {}
  },
  textbox: {
    normal: {
      color: INPUT_COLOR,
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      height: 50,
      paddingVertical: Platform.OS === 'ios' ? 7 : 0,
      paddingHorizontal: 12,
      borderRadius: 4,
      borderColor: BORDER_COLOR,
      borderWidth: 0.5,
      marginLeft: 5,
      marginRight: 5
    },
    // the style applied when a validation error occours
    error: {
      color: INPUT_COLOR,
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      height: 50,
      paddingVertical: Platform.OS === 'ios' ? 7 : 0,
      paddingHorizontal: 12,
      borderRadius: 4,
      borderColor: ERROR_COLOR,
      borderWidth: 0.5,
      marginBottom: 5
    },
    // the style applied when the textbox is not editable
    notEditable: {
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      height: 50,
      paddingVertical: Platform.OS === 'ios' ? 7 : 0,
      paddingHorizontal: 7,
      borderRadius: 4,
      borderColor: BORDER_COLOR,
      borderWidth: 0.5,
      marginBottom: 5,
      color: DISABLED_COLOR,
      backgroundColor: DISABLED_BACKGROUND_COLOR
    }
  },
  checkbox: {
    normal: {
      marginBottom: 4
    },
    // the style applied when a validation error occours
    error: {
      marginBottom: 4
    }
  },
  pickerContainer: {
    normal: {
      marginBottom: 4,
      borderRadius: 4,
      borderColor: BORDER_COLOR,
      borderWidth: 0.5
    },
    error: {
      marginBottom: 4,
      borderRadius: 4,
      borderColor: ERROR_COLOR,
      borderWidth: 0.5
    },
    open: {
      // Alter styles when select container is open
    }
  },
  select: {
    normal: Platform.select({
      android: {
        paddingLeft: 7,
        color: INPUT_COLOR
      },
      ios: {}
    }),
    // the style applied when a validation error occours
    error: Platform.select({
      android: {
        paddingLeft: 7,
        color: ERROR_COLOR
      },
      ios: {}
    })
  },
  pickerTouchable: {
    normal: {
      height: 44,
      flexDirection: 'row',
      alignItems: 'center'
    },
    error: {
      height: 44,
      flexDirection: 'row',
      alignItems: 'center'
    },
    active: {
      borderBottomWidth: 1,
      borderColor: BORDER_COLOR
    },
    notEditable: {
      height: 44,
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: DISABLED_BACKGROUND_COLOR
    }
  },
  pickerValue: {
    normal: {
      fontFamily: '3270Narrow',
      fontSize: FONT_SIZE,
      paddingLeft: 7
    },
    error: {
      fontSize: FONT_SIZE,
      paddingLeft: 7
    }
  },
  datepicker: {
    normal: {
      marginBottom: 4
    },
    // the style applied when a validation error occours
    error: {
      marginBottom: 4
    }
  },
  dateTouchable: {
    normal: {},
    error: {},
    notEditable: {
      backgroundColor: DISABLED_BACKGROUND_COLOR
    }
  },
  dateValue: {
    normal: {
      color: INPUT_COLOR,
      fontSize: FONT_SIZE,
      padding: 7,
      marginBottom: 5
    },
    error: {
      color: ERROR_COLOR,
      fontSize: FONT_SIZE,
      padding: 7,
      marginBottom: 5
    }
  },
  buttonText: {
    fontFamily: '3270Narrow',
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    backgroundColor: INPUT_COLOR,
    borderColor: INPUT_COLOR,
    borderWidth: 0.5,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
}

export const options = {
  fields: {
    email: {
      stylesheet: formStyles,
      placeholder: 'Email',
      secureTextEntry: false,
      keyboardType: 'email-address',
      autoCapitalize: 'none',
      error: 'Without an email address how are you going to reset your password when you forget it?',
      factory: FloatingLabel
    },
    password: {
      stylesheet: formStyles,
      placeholder: 'Password',
      secureTextEntry: true,
      error: "Choose something you use on a dozen other sites or something you won't remember",
      factory: FloatingLabel
    },
    passwordConfirmation: {
      stylesheet: formStyles,
      placeholder: 'Confirm Password',
      secureTextEntry: true,
      error: "Choose something you use on a dozen other sites or something you won't remember",
      factory: FloatingLabel
    },
    code: {
      stylesheet: formStyles,
      placeholder: 'Verification code',
      secureTextEntry: false,
      keyboardType: 'numeric',
      error: 'Confident in their actions?',
      factory: FloatingLabel
    },
+    position: {
+      stylesheet: formStyles,
+      placeholder: 'Position',
+      secureTextEntry: false,
+      autoCapitalize: 'none',
+      error: 'Please enter position name',
+      factory: FloatingLabel
+    },
+    rate: {
+      stylesheet: formStyles,
+      placeholder: 'Rate',
+      secureTextEntry: false,
+      autoCapitalize: 'none',
+      keyboardType: 'numeric',
+      error: 'Please enter rate',
+      factory: FloatingLabel
+    },
+    description: {
+      stylesheet: {
+        ...Form.stylesheet,
+        controlLabel: {
+          normal: {
+            color: LABEL_COLOR,
+            fontFamily: '3270Narrow',
+            fontSize: FONT_SIZE,
+            marginLeft: 5,
+            marginBottom: 7,
+            justifyContent: 'center',
+            fontWeight: FONT_WEIGHT
+          },
+          error: {
+           color: ERROR_COLOR,
+            fontFamily: '3270Narrow',
+            fontSize: FONT_SIZE,
+            marginLeft: 5,
+            marginRight: 7,
+            fontWeight: FONT_WEIGHT
+          }
+        },
+        textbox: {
+          normal: {
+            height: 300,
+            color: INPUT_COLOR,
+            fontFamily: '3270Narrow',
+            fontSize: FONT_SIZE,
+            paddingHorizontal: 12,
+            borderRadius: 4,
+            textAlignVertical: 'top',
+            borderColor: BORDER_COLOR,
+            borderWidth: 0.5,
+            paddingTop: 13,
+            paddingBottom: 0,
+            marginLeft: 5,
+           marginRight: 5
+          },
+          error: {
+            ...Form.stylesheet.textbox.error,
+            height: 150
+          }
+        }
+      },
+      placeholder: 'Description',
+      secureTextEntry: false,
+      multiline: true,
+      autoCapitalize: 'none',
+      error: 'Please enter rate',
+      factory: FloatingLabel
+    }
  }
}

AmplifyProvider

Essentially the same as ApolloProvider for Apollo and Provider for Redux.
Provides the ability to pass Auth authentication parameters, access to the API, and conducting graphqlOperation from anywhere in the application.

API - This is the GraphQL client that we will use to interact with the AppSync endpoint (analogue to fetch or axios)

Auth - This is a class from AWS Amplify that handles user management. You can use this class for everything from registering a user to resetting his password. In this component, we will call the Auth.user.attributes.sub method, which will return the current user ID

graphqlOperation - This is a JavaScript utility that parses GraphQL operations

In order to connect it. Editing the src/index.js file

import React from 'react'
import { StatusBar } from 'react-native'
import Amplify from '@aws-amplify/core'
+ import { Auth, API, graphqlOperation } from 'aws-amplify'
import * as Keychain from 'react-native-keychain'
import AppNavigator from './AppNavigator'
import awsconfig from '../aws-exports'
+ import { AmplifyProvider } from 'aws-amplify-react-hooks'

const MEMORY_KEY_PREFIX = '@MyStorage:'
let dataMemory = {}

+ const client = {
+   Auth,
+   API,
+   graphqlOperation
+ }

+ AmplifyProvider(client)

class MyStorage {
  static syncPromise = null

  static setItem(key, value) {
    Keychain.setGenericPassword(MEMORY_KEY_PREFIX + key, value)
    dataMemory[key] = value
    return dataMemory[key]
  }

  static getItem(key) {
    return Object.prototype.hasOwnProperty.call(dataMemory, key) ? dataMemory[key] : undefined
  }

  static removeItem(key) {
    Keychain.resetGenericPassword()
    return delete dataMemory[key]
  }

  static clear() {
    dataMemory = {}
    return dataMemory
  }
}

Amplify.configure({
  ...awsconfig,
  Analytics: {
    disabled: false
  },
  storage: MyStorage
})

const App = () => {
  return (
    <>
+     <AmplifyProvider client={client}>
        <StatusBar barStyle="dark-content" />
        <AppNavigator />
+      </AmplifyProvider>
    </>
  )
}

export default App

Screens

JobsMain

Create a JobsMain screen
src/screens/Jobs/JobsMain.js

On this screen, we will make a Query query, with the pagination option, where the number is through the useQuery hook and it will return an array to us, which we will send to Flatlist.

import React from 'react'
import { FlatList } from 'react-native'
import { Auth } from 'aws-amplify'
import { useQuery, getNames } from 'aws-amplify-react-hooks'
import { listJobs } from '../../graphql/queries'
import { AppContainer, CardJob } from '../../components'
import { onScreen, BG } from '../../constants'
import { onCreateJob, onUpdateJob, onDeleteJob } from '../../graphql/subscriptions'

const JobsMain = ({ navigation }) => {
  const owner = Auth.user.attributes.sub

  const { data, loading, error, fetchMore } = useQuery(
    {
      listJobs,
      onCreateJob,
      onUpdateJob,
      onDeleteJob
    },
    {
      variables: { limit: 5 }
    },
    getNames({ listJobs, onCreateJob, onUpdateJob, onDeleteJob })
  )

  const _renderItem = ({ item }) => {
    const check = owner === item.owner
    return <CardJob item={item} onPress={onScreen(check ? 'JOB_ADD' : 'JOB_DETAIL', navigation, item)} />
  }

  const _keyExtractor = obj => obj.id.toString()

  return (
    <AppContainer
      flatlist
      message={error}
      loading={loading}
      iconRight="plus-a"
      colorLeft={BG}
      title=" "
      onPressRight={onScreen('JOB_ADD', navigation)}
    >
      <FlatList
        scrollEventThrottle={16}
        data={data}
        renderItem={_renderItem}
        keyExtractor={_keyExtractor}
        onEndReachedThreshold={0.5}
        onEndReached={fetchMore}
      />
    </AppContainer>
  )
}

export { JobsMain }

Flatlist - Productive interface for rendering lists
listJobs - GraphQL query operation to retrieve an array of data
limit - The number of elements in the pagination response.
useQuery - The hook to retrieve data per page.
onCreateJob onUpdateJob onDeleteJob - GraphQL query operations that implement real-time updating.
getNames - Function for obtaining names from generated Amplify queries

Next, we get the data through a hookQuery which has the following API:

useQuery

const { 
  data: Array<mixed>,
  loading: string,
  error: string,
  fetchMore: function
} = useQuery(query {}, options: { variables: {[key: string]: any }}, queryData: Array<string>)

query - The first argument is a GraphQL query READ operation, the second is a CREATE subscription operation, the third is an UPDATE subscription operation and the fourth is a DELETE subscription operation.

option - An object containing all the variables that your request should fulfill.

queryData - An array of GraphQL operation names in the READ, CREATE, UPDATE, DELETE sequence.

data — The returned data array.

loading - Loading indicator.

error - Error.

fetchMore - Often in your application there will be some views in which you need to display a list that contains too much data so that it can either be retrieved or displayed immediately. Pagination is the most common solution to this problem, and the useQuery hook has built-in functionality that makes it pretty simple. The easiest way to do pagination is to use the fetchMore function, which is included in the result object returned by the useQuery hook. This basically allows you to make a new GraphQL query and combine the result with the original result.

JobsDetail

Create a JobsDetail screen src/screens/Jobs/JobDetail.js

import React from 'react'
import {AppContainer, CardJobDetail} from '../../components'
import {goBack} from '../../constants'

const JobDetail = ({navigation}) => (
   <AppContainer title = "" onPress = {goBack (navigation)}>
     <CardJobDetail item = {navigation.state.params} />
   </AppContainer>
)

export { JobDetail }

JobAdd

Create a JobAdd screen
src/screens/Jobs/JobAdd.js

import React, { useRef, useEffect, useState } from 'react'
import t from 'tcomb-form-native'
import { useMutation } from 'aws-amplify-react-hooks'
import { AppContainer, Card, Button, Space, TextLink } from '../../components'
import { structJob, options } from '../Authenticator/Form'
import { goBack, PINK } from '../../constants'
import { createJob, updateJob, deleteJob } from '../../graphql/mutations'

const Form = t.form.Form // eslint-disable-line

const JobAdd = ({ navigation }) => {
  const [check, setOwner] = useState(false)
  const [input, setJob] = useState({
    position: '',
    rate: '',
    description: ''
  })

  const onChange = item => setJob(item)

  useEffect(() => {
    const obj = navigation.state.params
    typeof obj !== 'undefined' && setOwner(true)
    setJob(obj)
  }, [navigation])

  const [setCreate, setUpdate, setDelete, { loading, error }] = useMutation(input)

  const onCreate = async () => (await setCreate(createJob)) && goBack(navigation)()
  const onUpdate = async () => (await setUpdate(updateJob)) && goBack(navigation)()
  const onDelete = async () => (await setDelete(deleteJob)) && goBack(navigation)()

  const registerForm = useRef('')
  return (
    <AppContainer loading={loading} message={error} title="Add" onPress={goBack(navigation)}>
      <Card>
        <Form ref={registerForm} type={structJob} options={options} value={input} onChange={text => onChange(text)} />
        <Space height={40} />
        <Button title="DONE" onPress={() => (check ? onUpdate() : onCreate())} />
        {check && (
          <>
            <TextLink title="or" />
            <Space height={10} />
            <Button title="DELETE" color={PINK} onPress={onDelete} />
          </>
        )}
        <Space />
      </Card>
    </AppContainer>
  )
}

export { JobAdd }

useMutation

const [
  setCreate: Promise<{}>,
  setUpdate: Promise<{}>,
  setDelete: Promise<{}>
{ 
  loading: string,
  error: string
}
] = useMutation(input: {})

setCreate setUpdate setDelete - Functions CREATE, UPDATE, DELETE

loading - Loading indicator.

error - Error.

input - Mutation value.

Navigation

Connect screens in stack navigator
src/screens/Jobs/index.js

import { createStackNavigator } from 'react-navigation-stack'
import { JobsMain } from './JobsMain'
import { JobDetail } from './JobDetail'
import { JobAdd } from './JobAdd'

const Jobs = createStackNavigator(
  {
    JOBS_MAIN: { screen: JobsMain },
    JOB_DETAIL: { screen: JobDetail },
    JOB_ADD: { screen: JobAdd }
  },
  {
    headerMode: 'none'
  }
)

Jobs.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true

  if (navigation.state.index > 0) {
    tabBarVisible = false
  }

  return {
    tabBarVisible
  }
}

export { Jobs }

For the logic of navigation, we transfer the User component from Authenticator to the screens directory, where we edit the imports

-import { AppContainer, Button } from '../../../components'
-import { goHome } from '../../../constants'
+import { AppContainer, Button } from '../../components'
+import { goHome } from '../../constants'

and do not forget to remove the export from src/screens/Authenticator/index.js

export * from './Hello'
- export * from './User'
export * from './SignIn'
export * from './SignUp'
export * from './Forgot'
export * from './ForgotPassSubmit'
export * from './ConfirmSignUp'

Connect all created components to src/screens/index.js

export * from './User'
export * from './Jobs'

TabBar

Create a TabBar
src/components/TabBar/index.js

import React, { Component } from 'react'
import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import { ButtonTab } from './ButtonTab'
import { Device } from '../../constants'

const styles = StyleSheet.create({
  tabbar: {
    ...Device.select({
      iphone5: {
        height: 70
      },
      mi5: {
        height: 70
      },
      iphone678: {
        height: 100
      },
      googlePixel: {
        height: 90
      },
      redmiNote5: {
        height: 100
      }
    }),
    flexDirection: 'row',
    backgroundColor: '#0F0F0F',
    borderTopColor: '#0F0F0F',
    overflow: 'hidden',
    borderTopWidth: 1,
    paddingTop: 5,
    paddingBottom: 10
  },
  tab: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  }
})

const MainMenuIcons = ['user-secret', 'home']

class TabBar extends Component {
  render() {
    const { navigation, jumpTo, activeTintColor, inactiveTintColor } = this.props
    const { routes } = navigation.state
    const { tabbar, tab } = styles

    return (
      <View style={tabbar}>
        {routes.map((route, index) => {
          const { key } = route
          const focused = index === navigation.state.index
          const textColor = focused ? activeTintColor : inactiveTintColor
          return (
            <TouchableWithoutFeedback key={`${key}`} onPress={() => jumpTo(key)}>
              <View style={tab}>
                <ButtonTab icon={MainMenuIcons[index]} tintColor={textColor} />
              </View>
            </TouchableWithoutFeedback>
          )
        })}
      </View>
    )
  }
}
export { TabBar }

ButtonTab

Create a component ButtonTab
src/components/TabBar/ButtonTab.js

// @flow
import React, { memo } from 'react'
import Fontisto from 'react-native-vector-icons/Fontisto'

type Props = {
  icon: 'user-secret' | 'home',
  tintColor: string,
  mainTab: boolean
}

const ButtonTab = memo<Props>(({ icon, tintColor }) => <Fontisto name={icon} size={35} color={tintColor} />)

export { ButtonTab }

Add export to src/components/index.js

export * from './Localei18n'
export * from './AppContainer'
export * from './Header'
export * from './Loading'
export * from './Space'
export * from './Button'
export * from './TextLink'
export * from './TextError'
export * from './Input'
+export * from './TabBar'
+export * from './CardJob'
+export * from './CardJobDetail'
+export * from './Card'

AppNavigator

Editing the navigation configuration file for our custom authentication src/AppNavigator.js

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { ConfirmSignUp, Hello, SignIn, SignUp, Forgot, ForgotPassSubmit } from './screens/Authenticator'
import { User, Jobs } from './screens'
import { TabBar } from './components'
import { PURPLE } from './constants'

const TabNavigator = {
  screen: createBottomTabNavigator(
    {
      JOBS: { screen: Jobs },
      USER: { screen: User }
    },
    {
      initialRouteName: 'JOBS',
      tabBarComponent: TabBar,
      tabBarPosition: 'bottom',
      animationEnabled: true,
      lazy: true,
      backBehavior: 'initialRoute',
      tabBarOptions: {
        showLabel: false,
        activeTintColor: PURPLE,
        inactiveTintColor: '#390032'
      }
    }
  )
}

const AppNavigator = createStackNavigator(
  {
    HELLO: { screen: Hello },
    SIGN_IN: { screen: SignIn },
    SIGN_UP: { screen: SignUp },
    FORGOT: { screen: Forgot },
    CONFIRM_SIGN_UP: { screen: ConfirmSignUp },
    FORGOT_PASSWORD_SUBMIT: { screen: ForgotPassSubmit },
    MAIN: TabNavigator
  },
  {
    initialRouteName: 'HELLO',
    headerMode: 'none',
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  }
)

export default createAppContainer(AppNavigator)

Build the application and test

Done✅

REFERENCES:

Authentication 🔐 CUSTOM SETUP / AWS Amplify + React Native

Server Serverlesskiy — Mon, 09 Dec 2019 21:43:33 +0000

One of the most requested topics among my channel subscribers is authentication and authorization in the React Native application. Therefore, I decided to devote a separate post to this issue, but before we start coding, it is necessary to deal with the definition of Authentication/Authorization.

Authentication is a verification of the conformity of the subject and the one he is trying to impersonate using some unique information (fingerprints, iris color, voice, etc.), in the simplest case — with the help of mail and password.

Authorization is the verification and determination of the authority to perform certain actions in accordance with previously performed authentication
At the end of this article, we will make this mobile application:

Authentication is an integral part of almost any application. Knowing who the user is, the unique identifier of the user, what permissions the user has, and whether they are logged in, allows your application to display the correct views and return the correct data for the current logged in user.

Most applications require mechanisms for registering users, logging in, processing encryption and updating passwords, as well as many other tasks related to identity management. Modern applications often require things like OAUTH (open authentication), MFA (multi-factor authentication) and TOTP (time-based time passwords).

In the past, developers had to manually spin all of these authentication features from scratch. This task alone can take weeks or even months from the development team to do everything right and make it safe. In this article, you’ll learn how to correctly and securely implement authentication in a React Native application using Amazon Cognito with AWS Amplify.

Amazon Cognito is AWS’s fully managed identity service. Cognito provides easy and secure user registration, logon, access control, token updating, and user identity management. Cognito scales to millions of users and also supports logging in with social network providers such as Facebook, Google and Amazon.

Cognito consists of two main parts: user pools and identity pools.

User Pools — User pools provide a secure user directory that stores all of your users and scales to hundreds of millions of users. This is a fully managed service. Like serverless technology, user pools are easy to configure, without having to worry about supporting any infrastructure. User pools are what manage all the users who register and log in to the account, and is the main part that we will focus on in this article.

Identity pools — Identity pools allow you to authorize users who are logged into your application to access various other AWS services. Suppose you want to give a user access to a lambda function so that he can receive data from another API. You can specify this when creating the identity pool. User pools include the fact that Cognito or even Facebook or Google user pools can be the source of these identifiers.

A scenario where an Amazon Cognito user pool and an identity pool are used together.

See the diagram for the general Amazon Cognito script. The goal here is to authenticate your user and then give him access to another AWS service.

At the first stage, the user of your application enters the system through the user pool and receives the tokens of the user pool after successful authentication.
Your application then exchanges user pool tokens for AWS credentials through the identity pool.
Finally, your application user can then use these AWS credentials to access other AWS services such as Amazon S3 or DynamoDB.
Cognito User Pools allows your application to call various methods for a service to manage all aspects of user authentication, including things like:
User registration
User Login
User Logout
Change user password
Reset User Password
MFA Code Verification
Amazon Cognito Integration with AWS Amplify

AWS Amplify supports Amazon Cognito in a variety of ways. First of all, you can create and configure Amazon Cognito services directly from the AWS Amplify command-line interface. By creating an authentication service through the CLI, you can call various methods (for example, signUp, signIn and signOut) from a JavaScript application using the Amplify JavaScript client library.

Amplify also has pre-configured user interface components that allow you to build entire authentication flows in just a couple of lines of code for environments such as React, React Native, Vue, and Angular.

You ask how much does it all cost?

Using Amazon Cognito Identity to create a user pool, you pay only for the number of active users per month (MAU). MAUs are users who have performed at least one authentication operation during a calendar month: registration, authorization, token renewal, or password change. Subsequent sessions of active users and inactive users in this calendar month are not paid.

CODING TIME 👨🏼‍💻👩🏻‍💻

PART 1
All the code for this part can be found on Github.

Step 1

Create a new project ⚛️

react-native init messaga

We start the project 🚀
iOS

cd messaga && react-native run-ios

Android

cd messaga && react-native run-android

Step 2

We connect icons👾

Since the icons are used by the AWS Amplify framework, we therefore connect them according to this instruction 📃.

Check for errors. Add to App.js

import Icon from 'react-native-vector-icons/FontAwesome5'

const App = () => {
  return (
    <>
      <Icon name="comments" size={30} color="#900" />
    </>
  )
}

Step 3

Register your AWS account

We register according to this instruction 📃 and check all 5 steps according to the video tutorial..
Attention!!! You will need a bank card 💳, where should be more than 1 $ 💵
There we look and put the Amplify Command Line Interface (CLI)

Step 4

Initializing AWS Amplify in a React Native Project

Initialize our backend in the root directory of the React Native project.

amplify init

We answer the questions:

Next is the initialization of the project. 🚀
⠧ Initializing project in the cloud…
Your project has been successfully initialized and connected to the cloud!

Step 5

Connecting Authentication Plugin — Auth 🔐

Now that the application is in the cloud, you can add some features, such as allowing users to register with our application and log in.
We connect the authentication plugin.

amplify add auth

Select the default configuration. This adds auth resource configurations locally to your amplify/backend/auth directory.
Select the profile we want to use. default. Enter and how users will log in. Email (write off money for SMS).

Select the profile we want to use. default. Enter and how users will log in. Email (write off money for SMS).

Successfully added resource yourname locally
Send changes to the cloud 💭

amplify push

✔ All resources are updated in the cloud

Step 6

Connect AWS Amplify to React Native Project ⚛️

Details in this manual 📃, and briefly and in a straight line like this:

yarn add aws-amplify@1.2.4 @aws-amplify/core@1.2.4 aws-amplify-react-native amazon-cognito-identity-js

After installation, be sure to go to the ios folder and set the pods

cd ios && pod install && cd ..

Step 7

Editing the project structure

Create the /src directory and transfer the App.js file there, renaming it to index.js with this content
Edit import in root /yourname/index.js

- import App from './App'
+ import App from './src'

Step 8

Minimal project configuration and Authenticator module

Amplify.configure - project configuration
Authenticator - The AWS Amplify Authentication Module provides authentication APIs and building blocks for developers who want to create user authentication capabilities.

import React from 'react'
import {StatusBar} from 'react-native'
import Amplify from '@aws-amplify/core'
import {Authenticator} from 'aws-amplify-react-native'
import awsconfig from '../aws-exports'

Amplify.configure({
  ...awsconfig,
  Analytics: {
    disabled: true,
  },
})

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <Authenticator usernameAttributes="email" />
    </>
  )
}

export default App

Run the simulator

Step 9

Edit Inputs in App.js

const signUpConfig = {
  hideAllDefaults: true,
  signUpFields: [
    {
      label: 'Email',
      key: 'email',
      required: true,
      displayOrder: 1,
      type: 'string',
    },
    {
      label: 'Password',
      key: 'password',
      required: true,
      displayOrder: 2,
      type: 'password',
    },
  ],
}


      <Authenticator
        usernameAttributes="email"
+       signUpConfig={signUpConfig}
      />

Step 10

Change the theme of UI🖌

We create an export point for our future components /src/components/index.js with the content

export * from './AmplifyTheme'

and accordingly create the /src/components/AmplifyTheme/index.js file itself with the content

import {StyleSheet} from 'react-native'

export const deepSquidInk = '#152939'
export const linkUnderlayColor = '#FFF'
export const errorIconColor = '#30d0fe'

const AmplifyTheme = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 20,
    width: '100%',
    backgroundColor: '#FFF',
  },
  section: {
    flex: 1,
    width: '100%',
    padding: 30,
  },
  sectionHeader: {
    width: '100%',
    marginBottom: 32,
  },
  sectionHeaderText: {
    color: deepSquidInk,
    fontSize: 20,
    fontWeight: '500',
  },
  sectionFooter: {
    width: '100%',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 15,
    marginBottom: 20,
  },
  sectionFooterLink: {
    fontSize: 14,
    color: '#30d0fe',
    alignItems: 'baseline',
    textAlign: 'center',
  },
  navBar: {
    marginTop: 35,
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  navButton: {
    marginLeft: 12,
    borderRadius: 4,
  },
  cell: {
    flex: 1,
    width: '50%',
  },
  errorRow: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  errorRowText: {
    marginLeft: 10,
  },
  photo: {
    width: '100%',
  },
  album: {
    width: '100%',
  },
  button: {
    backgroundColor: '#30d0fe',
    alignItems: 'center',
    padding: 16,
  },
  buttonDisabled: {
    backgroundColor: '#85E4FF',
    alignItems: 'center',
    padding: 16,
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  formField: {
    marginBottom: 22,
  },
  input: {
    padding: 16,
    borderWidth: 1,
    borderRadius: 3,
    borderColor: '#C4C4C4',
  },
  inputLabel: {
    marginBottom: 8,
  },
  phoneContainer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  phoneInput: {
    flex: 2,
    padding: 16,
    borderWidth: 1,
    borderRadius: 3,
    borderColor: '#C4C4C4',
  },
  picker: {
    flex: 1,
    height: 44,
  },
  pickerItem: {
    height: 44,
  },
})

export {AmplifyTheme}

And plug the theme into the Authenticator src/index.js component

+import {AmplifyTheme} from './components'

      <Authenticator
        usernameAttributes="email"
        signUpConfig={signUpConfig}
+       theme={AmplifyTheme}
      />

Step 11

Connecting language support

Add export to /src/components/index.js

export * from './Localei18n'

Create the file /src/components/Localei18n/index.js with the contents

import {NativeModules, Platform} from 'react-native'
import {I18n} from '@aws-amplify/core'

let langRegionLocale = 'en_US'

// If we have an Android phone
if (Platform.OS === 'android') {
  langRegionLocale = NativeModules.I18nManager.localeIdentifier || ''
} else if (Platform.OS === 'ios') {
  langRegionLocale = NativeModules.SettingsManager.settings.AppleLocale || ''
}

const authScreenLabels = {
  en: {
    'Sign Up': 'Create new account',
    'Sign Up Account': 'Create a new account',
  },
  ru: {
    'Sign Up': 'Создать аккаунт',
    'Forgot Password': 'Забыли пароль?',
    'Sign In Account': 'Войдите в систему',
    'Enter your email': 'Введите email',
    'Enter your password': 'Введите пароль',
    Password: 'Пароль',
    'Sign In': 'Вход',
    'Please Sign In / Sign Up': 'Войти / Создать аккаунт',
    'Sign in to your account': 'Войдите в свой аккаунт',
    'Create a new account': 'Cоздайте свой аккаунт',
    'Confirm a Code': 'Подтвердите код',
    'Confirm Sign Up': 'Подтвердите регистрацию',
    'Resend code': 'Еще отправить код',
    'Back to Sign In': 'Вернуться к входу',
    Confirm: 'Подтвердить',
    'Confirmation Code': 'Код подтверждения',
    'Sign Out': 'Выход',
  },
}

// "en_US" -> "en", "es_CL" -> "es", etc
const languageLocale = langRegionLocale.substring(0, 2)
I18n.setLanguage(languageLocale)
I18n.putVocabularies(authScreenLabels)

const Localei18n = () => null

export { Localei18n }

And we connect the Localei18n component in src/index.js

import {
   AmplifyTheme,
+  Localei18n
} from './components'

+ <Localei18n />
    <Authenticator
      usernameAttributes="email"
      signUpConfig={signUpConfig}
      theme={AmplifyTheme}
    />

Part 1 done ✅

PART 2

All the code for this part can be found on Github.

Firstly, in the official documentation Amplify says:

Data is stored unencrypted when using standard storage adapters (localStorage in the browser and AsyncStorage on React Native). Amplify gives you the option to use your own storage object to persist data. With this, you could write a thin wrapper around libraries like:
react-native-keychain
react-native-secure-storage
Expo’s secure store

that the data is stored in an unencrypted form, and this is a risk 🕷 information security with possible negative consequences 🕸.

Secondly, the standard UI from Amplify does not always satisfy the UX coming from the customer, so we will solve these two problems in this part.

👉🏻To be continued

DEV Community: Server Serverlesskiy

A Universal FPGA Compiler that Understands 42 Programming Languages

🚀 TL;DR

💸 THE PROBLEM: Why is FPGA Acceleration only for Giants?

HLS Tool Pricing

Traditional HLS Limitations

🔧 THE SOLUTION: VIBEE — A Specification-First Compiler

How It Works

🧬 TECHNICAL DETAILS: From .vibee to FPGA

Step 1: Create a Specification

Step 2: Generate Verilog

Step 3: Verify

What is Generated Automatically:

🐍 REAL-WORLD EXAMPLE: Python → Verilog in 5 Minutes

⚡️ PORTABILITY — A MYTH? (PLL / DSP / Vendor Primitives)

Example: Universal Clock Generator

🏎️ HLS OUT OF THE BOX: Latency / Pipelining / Frequency

Example Extended Specification:

📊 EXAMPLE: BitNet b1.58 — FPGA Accelerator for Neural Networks

Specification: specs/tri/bitnet_top.vibee

Generated Verilog: trinity/output/fpga/bitnet_top.v

Synthesis Results (Xilinx ZCU104):

🌍 MARKET: Why Now is the Best Time for FPGA

By the Numbers

Use Cases

🛠️ HOW TO TRY VIBEE NOW

Option 1: Quick Check (60 Seconds)

Option 2: Generate Your Own Module

Option 3: Full Cycle (Simulation)

🔧 Note on Platforms

📈 COMPARISON WITH TRADITIONAL TOOLS

🔮 THE FUTURE: Where VIBEE is Headed

Plans for 2026–2027

Hardware Roadmap

❓ FREQUENTLY ASKED QUESTIONS

1. Does it only work with ternary logic?

2. Do I need to know Verilog?

3. What is the quality of the generated code?

4. Can I use it in commercial projects?

5. What about support?

🎯 CONCLUSION

Model development of mobile applications React Native + AWS Amplify

Шаг 1 - UI Components - Layout - TypeScript component model

The main benefits of creating UI Components in Storybook:

Insulation

Simulate hard-to-find use cases

Use case documentation as stories

Speed up your workflow with add-ins

Appearance of the visual test

Unit testing functionality

Accessibility test

Document the user interface to share with your team

Get timely feedback during development

Sharing components between screens and applications

Automatic generation of user interface documentation

TypeScript Txt Component Model

TypeScript Avatar Component Model

Step 2 - Prototype - Navigation - GraphQL Screen Model

Step 3 - Logic - Deploy Model

Serverless

Serverless Computing

Advantages of serverless architecture:

One programming language

Less code

No need to manage servers

Scalability

Development speed

Experiments

Security and stability

Automatic availability control

Price

Output

JavaSript Bot

Telegraph.js

OpenSource

Internationalization (i18n)

What's next?

Java Script Camp

Purpose of the program

JavaScript Camp - JS Camp

Specification: `specs/tri/bitnet_top.vibee`

Generated Verilog: `trinity/output/fpga/bitnet_top.v`

`@auth` directive rules