Hi! I'm

Federico Calò

Software Developer | Technical Writer

I create modern web applications and custom digital tools to help businesses grow through technological innovation. My passion is combining computer science and economics to generate real value.

Contact Me

About Me

My passion for computer science was born at the Technical Commercial Institute of Maglie, where I discovered the power of programming and the fascination of creating digital solutions. From the start, I understood that computer science was not just code, but an extraordinary tool for turning ideas into reality.

During my studies in Business Information Systems, I began to interweave computer science and economics, understanding how technology can be the engine of growth for any business. This vision accompanied me to the University of Bari, where I obtained my degree in Computer Science, deepening my technical skills and passion for software development.

Today I put this experience at the service of businesses, professionals and startups, creating tailor-made digital solutions that automate processes, optimize resources and open new business opportunities. Because true innovation begins when technology meets the real needs of people.

My Skills

Data Analysis & Predictive Models

I transform data into strategic insights with in-depth analysis and predictive models for informed decisions

Process Automation

I create custom tools that automate repetitive operations and free up time for value-added activities

Custom Systems

I develop tailor-made software systems, from platform integrations to customized dashboards

const federico = {
  nome: "Federico Calò",
  ruolo: "Sviluppatore Software",
  città: "Bari, Italia",
  missione: "Aiutare attraverso l'informatica",
  passioni: [
    "Codice Pulito",
    "Innovazione",
    "Crescita Continua"
  ]
};

La Mia Missione

Credo fermamente che l'informatica sia lo strumento più potente per trasformare le idee in realtà e migliorare la vita delle persone.

🚀

Democratizzare la Tecnologia

La mia missione è rendere l'informatica accessibile a tutti: dalle piccole imprese locali alle startup innovative, fino ai professionisti che vogliono digitalizzare la propria attività. Ogni realtà merita di sfruttare le potenzialità del digitale.

💡

Unire Informatica ed Economia

Non è solo questione di scrivere codice: è capire come la tecnologia possa generare valore reale. Intrecciando competenze informatiche e visione economica, aiuto le attività a crescere, ottimizzare processi e raggiungere nuovi traguardi di efficienza e redditività.

🎯

Creare Soluzioni su Misura

Ogni attività è unica, e così devono esserlo le soluzioni. Sviluppo strumenti personalizzati che rispondono alle esigenze specifiche di ciascun cliente, automatizzando processi ripetitivi e liberando tempo per ciò che conta davvero: far crescere il business.

Trasforma la Tua Attività con la Tecnologia

December 2024

View

Master SQL

RoadMap.sh

Novembre 2024

View

Oracle Certified Foundations Associate

Oracle

October 2024

View

People Leadership Credential

Connect

Settembre 2024

💻 Languages & Technologies

☕Java

🐍Python

📜JavaScript

🅰️Angular

⚛️React

🔷TypeScript

🗄️SQL

🐘PHP

🎨CSS/SCSS

🔧Node.js

🐳Docker

🌿Git

💼

12/2024 - Presente

Custom Software Engineering Analyst

Accenture

Bari, Puglia, Italia · Ibrida Analisi e sviluppo di sistemi informatici attraverso l'utilizzo di Java e Quarkus in Health and Public Sector. Formazione continua su tecnologie moderne per la creazione di soluzioni software personalizzate ed efficienti e sugli agenti.

💼

06/2022 - 12/2024

Analista software e Back End Developer Associate Consultant

Links Management and Technology SpA

Esperienza nell'analisi di sistemi software as-is e flussi ETL utilizzando PowerCenter. Formazione completata su Spring Boot per lo sviluppo di applicazioni backend moderne e scalabili. Sviluppatore Backend specializzato in Spring Boot, con esperienza in progettazione di database, analisi, sviluppo e testing dei task assegnati.

💼

02/2021 - 10/2021

Programmatore software

Adesso.it (prima era WebScience srl)

Esperienza nell'analisi AS-IS e TO-BE, evoluzioni SEO ed evoluzioni website per migliorare le performance e l'engagement degli utenti.

🎓

2018 - 2025

Laurea in Informatica

Università degli Studi di Bari Aldo Moro

Bachelor's degree in Computer Science, focusing on software engineering, algorithms, and modern development practices.

📚

2013 - 2018

Diploma - Sistemi Informativi Aziendali

Istituto Tecnico Commerciale di Maglie

Technical diploma specializing in Business Information Systems, combining IT knowledge with business management.

Contattami

Hai un progetto in mente? Parliamone! Compila il form qui sotto e ti risponderò al più presto.

* Campi obbligatori. I tuoi dati saranno utilizzati solo per rispondere alla tua richiesta.

Flutter Performance: Impeller, Rendering Pipeline and Jank Elimination

The jank — those annoying stutters in the animation, those missing frames in the scroll — and the number one enemy of mobile user experience. In Flutter, the historical cause the most common was the shader compilation: the first time the GPU had to render a graphical effect, it compiled the shader JIT, causing a freeze visible. With Impeller — the new Flutter renderer, now default on iOS since Flutter 3.10 and on Android 10+ since Flutter 3.24 — this problem and solved at the root.

But Impeller doesn't eliminate all performance problems. Useless reconstructions of the widget tree, heavy operations on the UI thread, unoptimized images: these problems exist regardless of the renderer. This guide covers it both the Impeller architecture and the practical tools to identify and resolve performance bottlenecks in your app.

What You Will Learn

Impeller vs Skia: how the new renderer works and why it eliminates shader jank
The Flutter rendering pipeline: UI threads, raster threads, frame budgets
Performance Overlay: Read graphs in real time
Flutter DevTools - Timeline profiler to identify slow frames
Useless rebuilds: const, RepaintBoundary, selectContext to reduce them
Heavy images: cacheWidth, cacheHeight, precacheImage
Optimized ListView: itemExtent, prototypeItem, addRepaintBoundaries

Impeller: How it works and why it's better than Skia

Skia (the previous renderer) compiled OpenGL/Vulkan shaders JIT at runtime: The first time an effect was rendered, it compiled the shader, causing a 50-500ms freeze visible to the user. This was the "first-frame jank" characteristic of pre-Impeller Flutter apps.

Impeller solves this by compiling everyone the shaders at compile time during app build. At runtime, all shaders are already ready: zero JIT compilation, zero first-frame jank. Impeller also uses a more modern rendering pipeline (Metal on iOS, Vulkan on Android).

// Verifica se Impeller e attivo nella tua app

// Option 1: controlla in runtime
import 'package:flutter/foundation.dart';

void checkRenderer() {
  // Solo in debug/profile mode
  if (kDebugMode || kProfileMode) {
    debugPrint('Flutter renderer: ${FlutterView.rendererInfo}');
  }
}

// Option 2: flutter run con flag esplicito
// flutter run --enable-impeller    (forza Impeller)
// flutter run --disable-impeller   (forza Skia, per confronto)

// Option 3: controlla nel pubspec o AndroidManifest

// Per iOS: Impeller e ON per default (Flutter 3.10+)
// Per Android: ON per default su Android 10+ (Flutter 3.24+)
// Per Android < API 29: ancora Skia (Impeller richiede Vulkan 1.1)

// android/app/src/main/AndroidManifest.xml
// Per disabilitare Impeller su Android (debugging):
// <meta-data
//   android:name="io.flutter.embedding.android.EnableImpeller"
//   android:value="false" />

The Rendering Pipeline: UI Thread and Raster Thread

Flutter uses two main threads for rendering. Understand how they interact and essential for debugging performance issues:

// Due thread, un obiettivo: 60fps (16ms per frame) o 120fps (8ms per frame)

// UI Thread (Dart main isolate):
// - Esegue il tuo codice Dart
// - Gestisce gestures, layout, build() dei widget
// - Crea i "layer trees" da inviare al raster thread
// Budget: metà del frame budget (8ms per 60fps)

// Raster Thread (C++ renderer):
// - Prende il layer tree dal UI thread
// - Renderizza su GPU (Impeller o Skia)
// - Invia il frame completato alla GPU
// Budget: l'altra metà del frame budget (8ms per 60fps)

// Se uno dei due thread supera il suo budget:
// - UI thread lento: build() troppo pesante, layout complesso
// - Raster thread lento: shader compilation (Skia), clipping complesso, immagini grandi

// Performance Overlay: abilita in DevTools o nel codice
MaterialApp(
  showPerformanceOverlay: true, // Mostra i grafici in app
  // ...
)

// I due grafici:
// - Grafico superiore: UI thread (rosso = frame slow)
// - Grafico inferiore: GPU/Raster thread (rosso = frame slow)
// La linea verde = 16ms (60fps budget)
// Ogni barra sopra la linea verde = frame dropped

Flutter DevTools: Identify Slow Frames

// Come usare Flutter DevTools per il profiling

// 1. Avvia in profile mode (non debug: ottimizzazioni attive)
// flutter run --profile

// 2. Apri DevTools
// flutter pub global activate devtools
// flutter pub global run devtools

// 3. Tab "Performance" > Timeline

// Cosa cercare nel timeline:
// - Frame droppati: barre rosse/gialle nella overview
// - Clic su un frame lento per vedere breakdown
// - UI thread: quali widget hanno build() lento?
// - Raster thread: quali layer causano overdraw?

// Strumento "Widget Rebuild Stats" in DevTools:
// Mostra quante volte ogni widget e stato ricostruito
// Cerca widget con rebuild count elevato senza motivo

// Identificare rebuild inutili nel codice:
// Aggiungi questo in debug mode:
class DebugBuildCounter extends StatelessWidget {
  final Widget child;
  const DebugBuildCounter({required this.child, super.key});

  @override
  Widget build(BuildContext context) {
    debugPrint('BUILD: ${child.runtimeType} at ${DateTime.now().millisecondsSinceEpoch}');
    return child;
  }
}

Reduce Unnecessary Rebuilds

// 1. const: il widget piu efficiente possibile

// SBAGLIATO: ricreato ad ogni rebuild del parent
Text('Hello World')

// CORRETTO: const = immutabile, mai ricostruito
const Text('Hello World')

// Usa const il piu possibile:
const SizedBox(height: 16)
const Divider()
const Icon(Icons.star)

// 2. RepaintBoundary: isola porzioni del widget tree

// Senza RepaintBoundary: tutta la pagina viene ridisegnata
// quando l'animazione aggiorna il contatore
class AnimatedCounterPage extends StatefulWidget { ... }

// Con RepaintBoundary: solo il contatore viene ridisegnato
class AnimatedCounterPage extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Contenuto statico: non viene ridisegnato
        const PageHeader(),
        const PageContent(),
        // Solo questa parte e re-painted ogni frame
        RepaintBoundary(
          child: AnimatedCounter(),
        ),
      ],
    );
  }
}

// 3. select() con BLoC/Riverpod: rebuild solo per i dati che cambiano

// SBAGLIATO: il widget si ricostruisce per qualsiasi cambiamento dello UserState
BlocBuilder<UserBloc, UserState>(
  builder: (context, state) => Text(state.name),
)

// CORRETTO: rebuild solo quando state.name cambia
BlocSelector<UserBloc, UserState, String>(
  selector: (state) => state.name,
  builder: (context, name) => Text(name),
)

// Con Riverpod:
// SBAGLIATO
ref.watch(userProvider);

// CORRETTO: rebuild solo per la proprieta name
ref.watch(userProvider.select((user) => user.name));

ListView optimization

// ListView.builder: non costruisce mai widget fuori dalla viewport
// Ma puoi ottimizzarlo ulteriormente:

// 1. itemExtent: se tutti gli elementi hanno la stessa altezza
// Flutter salta il layout e usa solo l'aritmetica per posizionare gli elementi
ListView.builder(
  itemExtent: 72.0, // Altezza fissa in pixel
  itemCount: items.length,
  itemBuilder: (context, index) => ItemTile(item: items[index]),
)

// 2. prototypeItem: per altezze uguali ma non conosciute a priori
ListView.builder(
  prototypeItem: const ItemTile(item: Item.empty()),
  itemCount: items.length,
  itemBuilder: (context, index) => ItemTile(item: items[index]),
)

// 3. addRepaintBoundaries: abilita automaticamente (default: true)
// Mette ogni elemento in una RepaintBoundary separata
// Performance win per liste con elementi che si animano

// 4. Immagini nella lista: usa cacheWidth e cacheHeight
// Per evitare di decodificare immagini piu grandi del necessario
ListView.builder(
  itemBuilder: (context, index) => Image.network(
    items[index].imageUrl,
    cacheWidth: 150,  // Decodifica a 150px invece che alla dimensione originale
    cacheHeight: 150,
  ),
)

// 5. precacheImage: pre-carica le immagini prima che siano visibili
// Utile per le prime N immagini della lista
@override
void initState() {
  super.initState();
  // Pre-carica le prime 10 immagini
  for (final item in widget.items.take(10)) {
    precacheImage(NetworkImage(item.imageUrl), context);
  }
}

Measuring Improvement

// flutter_frames_package: misura FPS in produzione

// Oppure usa PerformanceMonitor manuale
class FrameMonitor extends StatefulWidget {
  final Widget child;
  const FrameMonitor({required this.child, super.key});

  @override
  State<FrameMonitor> createState() => _FrameMonitorState();
}

class _FrameMonitorState extends State<FrameMonitor> {
  int _droppedFrames = 0;
  DateTime? _lastFrame;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addTimingsCallback(_onTimings);
  }

  void _onTimings(List<FrameTiming> timings) {
    for (final timing in timings) {
      final frameDuration = timing.totalSpan.inMilliseconds;
      if (frameDuration > 16) {
        setState(() => _droppedFrames++);
        debugPrint('Dropped frame: ${frameDuration}ms');
      }
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeTimingsCallback(_onTimings);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => widget.child;
}

Flutter Performance Checklist

Use const for all static widgets
Wrap heavy animations in RepaintBoundary
Use select() in BLoC/Riverpod for granular rebuilds
ListView with itemExtent if items have fixed height
Set cacheWidth/cacheHeight for images in lists
Profile in --profile mode, not debug mode
Check FPS with Performance Overlay before release

Conclusions

Impeller solved the most annoying historical problem of Flutter apps: the jank compilation shader. But the performance of an app also depends on how many useless reconstructions take place, how the images are managed and how the widget tree is structured. The instruments — Performance Overlay, DevTools timeline, FrameTiming callbacks — make each identifiable bottleneck with sub-frame precision.