Tiagoperes

Problema

Considere uma aplicação com dois módulos:

• Client: código local
• Vendor: lib terceira

Precisamos implementar a ideia de fluxo server driven. Os seguintes cenários devem ser contemplados (considere que os fluxos no lado direito devem retornar uma resposta para o fluxo do lado esquerdo):

1. Fluxo Server Driven no módulo Client -> Outro fluxo Server Driven no módulo Client
2. Fluxo nativo no módulo Cliente -> Fluxo Server Driven no módulo Client
3. Fluxo Server Driven no módulo Client -> Fluxo nativo no módulo Client

Tiagoperes

{
  "_:component": "material:button",
  "properties": {
    "text": "This is an invalid json (extra comma right here)",
  }
}

Tiagoperes

import SwiftUI

func safeAt<T>(array: [T], position: Int) -> T? {
    return (position <= array.count - 1) ? array[position] : nil
}

protocol Navigator {
    func push(url: String) -> Void
    func pop() -> Void
}

Tiagoperes

type int = number
type double = number

interface Margin {
    margin?: double,
    marginStart?: double,
    marginEnd?: double,
    marginTop?: double,
    marginBottom?: double,
    marginHorizontal?: double,

Tiagoperes

//
//  ContentView.swift
//  layout-tests
//
//  Created by Tiago Peres França  on 15/04/22.
//

import SwiftUI

struct Example1: View {

Tiagoperes

import { BeagleJSX, createContext } from '@zup-it/beagle-backend-core'
import { Container, GridView, ScreenComponent, Template } from '@zup-it/beagle-backend-components'
import { Screen } from '@zup-it/beagle-backend-express'
import { contains, insert, length, sum } from '@zup-it/beagle-backend-core/operations'
import { alert } from '@zup-it/beagle-backend-core/actions'
import { Product } from '../../models/product'
import { listProducts } from '../network/product'
import { ProductItem } from '../components/product-item'
import { formatPrice } from '../operations'
import { globalContext } from '../global-context'

Tiagoperes

{
  "_beagleComponent_": "beagle:container",
  "context": {
    "id": "status",
    "value": "loading"
  },
  "onInit": [
    {
      "_beagleAction_": "beagle:sendRequest",
      "url": "https://gist.githubusercontent.com/Tiagoperes/704d3c9512f4d3fd95eb331de400812b/raw/f6c8a515792f879ba4078cd5008421ab066aabe4/success.json",

Tiagoperes

{
  "message": "Hello World"
}

Tiagoperes

Deep dive: Beagle styles in Flutter

Styling in Beagle works similarly to CSS in a web environment. The Style is not specific to each component, but a set of rules defined for every component. e.g. every component must support corner radius, which is style property. The same is valid for flex, size, position, positionType, borderWidth, borderColor and display. In summary, every component must support every property, which can be very challenging.

For Beagle Web we used CSS, which is easy. For iOS and Android, we used Yoga for iOS and Yoga for Android, which, can simulate CSS. Although not very simple, implementing this with Yoga was very doable. But what can we do in Flutter where there's no CSS and no Yoga?

We first tried to port the native Yoga (C#) to Flutter using dart:ffi. It took us a long time and everything was very hard. Although Yoga has a very good documentation for using its final libraries for iOS and Android, there's no documentation for using its core lib. With no documentation and no suppor

Tiagoperes

{
  "_beagleComponent_": "beagle:container",
  "children": [
    {
      "_beagleComponent_": "beagle:container",
      "style": {
        "flex": {
          "flexDirection": "ROW",
          "justifyContent": "SPACE_BETWEEN",
          "alignItems": "CENTER"