Parallel computing in ReactJS

User is working with your application, suddenly, UI freezes and probably, one of the CPU cores is burning! They cannot do anything. The only perception you can feel is as hot as a hell metal case of the laptop. Although this sounds like a horror movie, this is your application that cannot leverage modern APIs to lift heavy computation to a different thread where consequently user suffers the pain.
Modern features like Web Workers, WebAssembly, Worklets, and Service Worker allow us to leverage multithreading computing to run tasks parallelly which at the end, makes the user feel like in a rainbow paradise instead of a nightmare, even though JavaScript is a single-threaded programming language!
In this session, I am going to show my experience running jobs in parallel on a React.Js application that will provide a pleasant user experience and exciting development.

1- Introduction to problem
2- walkthrough to WebWorkers and examples
3- running to WebAssembly, show an introduction and show a real problem that web assembly solved, show the demo
4- Worklets and how they will help our application in real-world, showing an example (demo application) that how we have achieved better performance and solved problems
5- And finally PWA and Service Worker, in fact, this doesn't help directly in browsers but will help to handle processes like offline browsing, push notification and etc. I built an application that works offline and accepts web push notification.

Things in the PWA Era!

In daily basis where billions of billion devices are connected to the internet, browsers can actually take control Things like lightbulbs, robots, printers, NFC tags, toys, drones, and many more Things via web standard APIs such as WebBluetooth, WebUSB, WebNFC, Shape Detection API and etc. How about connecting to IoT gateway which supports Wifi via BLE ?!

On the other hand, Progressive web apps open a new era to build web apps that work offline and resemble native apps. PWAs are installable too, therefore, your solution to controlling Things in the real world can be written once for web and reuse everywhere.

In this session, I am going through some of the web capabilities to connect devices into a progressive web app and demonstrate how the web, eventually, could go beyond the browsers. There will be lots of demos such as Connect to IoT gateway via BLE over Wifi, Drone controller, NFC reader, Android ADB connector to Web and more.

Initial Outline which its goal is to show interesting demos in addition to theory:

- PWA Era explained!

- Web Hardware abilities APIs explanation

- The WebBluetooth API, WebUSB, WebNFC explained

-- Demos (Depends on the time I will select some of the demos below)

--- Connect to IoT gateway (Mozilla WebThings Gateway) via BLE over Wifi and start to control some devices which are connected to the gateway.
--- a simple fitness app that shows your heart rate while exercising
--- possible a drone that flies, controlled by a wristband
-- connect to a Thermal Printer via webUSB/webBluetooth
-- connect to my Android Device via ADB and control run shell command via my PWA using WebUSB.
-- connect to an Arduino Via USB and print on an LED, and do other actions via Android phone!!
-- NFC ring and NFC tags
-- Webshop that you can scan your NFC tag and be authenticated, then you can scan items and then print via BLE printer, which is a mix of few different Web Standard APIs, There will be in the integration of ShapeDetectionAPI for this example too.

- Possibility to download from Google play as a demo and show to users to impress them that they actually can download PWA from GooglePlay and from MicrosoftStore.

- Future capabilities such as project Fugu!

----------------

Why This talk:

IoT and especially connected hardware to the web is an interesting subject that most web developers know very little of, or even do not know at all that this is possible as these APIs are fairly new and recently has better support in browsers. At the same time, Hardware is usually a scary topic for many developers which I hope this talk can demystify where they can become comfortable and inspired. This presentation will hopefully provide lots of fun with demos during the presentation which I hope not only developers learn but also they enjoy and get excited too.

Flutter Engineering - Architectural path

This session will explore critical architectural decisions, the variables influencing these choices, and how to cultivate an architectural mindset.

We'll navigate various architectural styles, such as layered, event-driven, and microkernel architectures at the enterprise level. Additionally, you'll learn about prominent and custom UI architecture patterns for Flutter, including clean architecture and balancing trade-offs.

This session is perfect for developers looking to deepen their understanding and elevate their app architecture.

Taste of web with Flutter

The web is the largest application-delivery platform in existence and introducing progressive web applications takes it into the next level.

Flutter, a UI toolkit to create beautiful cross-platform applications, supports standard web technologies like HTML, DOM, Canvas, JavaScript, and runs PWA on the browser; Not surprisingly, with only one language, Dart!

In this session, I will fly you from a typical Javascript, CSS, HTML web development to Dart side with Flutter through live-coding of a beautiful progressive web app!

Agenda,
1- Introduce to Flutter and Flutter architecture
2- Dart and Flutter fundamentals
3- Responsive web applications
4- PWA with Flutter
5- Sharing code between several platforms.
6- Live-coding

Securing Flutter Apps

Robust mobile app security on devices people carry around is a special responsibility that is an undeniable aspect of mobile development, and Flutter is no exception. A security strategy with critical pillars such as Identify, Detect, Protect, Respond and Recover must be taken into account from day one.

Reviewing OWASP's top 10 for mobile, reporting vulnerabilities, best practices to minimize risk, preventing reverse engineering, staying up to date, and identifying and blocking attacks in real-time with technology such as RASP (Runtime Application Self-Protection) are the topics you will take away from this talk.

Scaling Flutter architecture by Leveraging strategic Domain-Driven Design

Architecting software, especially on a large-scale where it needs to meet the business requirements is always a challenge and Flutter apps are not an exception.

Strategic Domain-Driven Design techniques ensure your application is optimized to support business goals while identifying cohesive modules, known as bounded context which creates a maintainable, comprehensible codebase by isolating dependencies and describe business value.

In this talk, I share my knowledge of architecting a large scale flutter app by exploring the ubiquitous language, the bounded context, sub-domains while they are being implemented in an application. I will go through Layered architecture by touching Clean and Onion architecture. All in all, You'll learn how I attempted to architect a (large-scale) Flutter application by technical solution and appropriate methodology in order to have a sustainable app.

Running automated Flutter integration tests on a device farm

Integration testing (end-to-end or GUI testing) attempts to simulate a user interacting with your app by doing things like pushing buttons, selecting items, and typing on the keyboard to avoid having humans do that kind of repetitive work. A device farm like Firebase Test Lab or AWS Device Farm services allows you to run tests across various devices and device configurations simultaneously to check whether the app works or performs well.
In this talk, you'll learn how to use the new package integration_test, a more straightforward way to test your Flutter apps supporting Firebase Test Lab and running it on the cloud.

PWA, advanced patterns and strategies!

Building progressive web apps become the norm of web development these days! In fact, we are being introduced to more complex patterns and strategies to create a PWA. For example, When I build my book's website pwawithangular.com, I considered several caching strategies and patterns to deliver fully offline and high-performance web applications that can load under 2 seconds with 3G internet. In this talk, I will share how I could manage to build a fast and reliable PWA by using different caching strategies, advanced PWA architecture, and patterns.

One Plugin, Six Platforms!

Building and maintaining an open-source project comes with many challenges, but it's fun and rewarding! Plugins and packages are an essential part of any framework, and  Flutter is not an expectation for development to make a cross-platform application with a single code base!

You can develop a plugin package that connects the API to the platform-specific implementation(s) using a platform channel to provide calls into platform-specific APIs.

In this session, you will learn how to start developing a plugin for Flutter, the best practices from my experience of being the maintainer of great plugins such as Plus plugins, FlutterFire, and the importance of Federated plugins and their architecture together with platform channel API.

Leveraging Stream APIs within Service Worker

The Streams API provides an interface for reading or writing asynchronous chunks of data, only a subset of which might be available in memory at any given time.
The API helps to enhance UX both in a SPA or MPA (Multi-page) architecture. Using the Streams API within our service worker makes that possible. Workbox Streams abstracts the details of how streaming works.
In this short talk, you will learn how to leverage the powerful Stream to enhance UX and boost the web page's performance.

Let’s Talk About Memory Leaks In Dart And Flutter

Memory leaks can be annoying as they are hard to spot and recreate compared to syntax errors or logic bugs usually appearing in the development phase. Memory leaks in Flutter applications are getting even more complex with the addition of layers of widgets and controllers combined with listeners over time, which may result in performance issues or unexpected crashes for users after prolonged use.
In this talk, I will explore Dart and Flutter memory leaks and memory bloating, how they occur, their importance in coding practices, solutions to debug memory leaks and identify them, such as DevTools and Leak Tracker, and shifting left by relying on static analyzer tools and how they can prevent such leaks from sneaking into your code base.
This talk includes many examples from real applications I have worked on in the last few years.

Let the main thread breathe!

The main thread, on the web, has a lot of responsibilities. At the same time, web apps are getting more sophisticated every day. Therefore, the main thread gets too busy that will disappoint our user by showing janky frames! The off-main-thread architecture ensures apps run smoothly on every device for everyone.

In this talk, we will go through the possibilities in browsers such as WebWorker, Worklet, and WebAssembly by introducing practical tools that allow us to boost our user experiences.

Talk Agenda:
1- Introducing the problem, event loop and how the problem occurs
2- Example of Web worker, an old friend and underestimated feature
3- Introducing a new Solution to work with WebWorkers
4- WebAssembly, a new friend and powerful, it made easy to write it with AssemblyScript.
5- Worklets, a baby that is growing in the browsers, accessing low-level rendering pipeline and it's very performant.
5- And finally PWA and Service Worker, in fact, this doesn't help directly in browsers but will help to handle processes like offline browsing, push notification and etc. I built an application that works offline and accepts web push notification.

Efficient debugging with Dart DevTools

Debugging takes a big portion of development time; hence, it's crucial to become an efficient and effective developer with an appropriate tool that could, ultimately, save our time.
Dart DevTools is a web suite of debugging and performance tools that can work standalone or integrated into your IDE, aiming to ease debugging different Flutter and Dart application parts, including layout issues, performance problems, Network requests, and many more.
In this talk, you'll learn what a Flutter developer can do with these tools and how you can get the most out of your development time using Dart DevTools.

CQRS Pattern in Dart

CQRS stands for Command and Query Responsibility Segregation, a pattern that separates read and update operations for a data store. One of the promises of the CQRS is that it can maximize the performance, scalability, and security of the application. The CQRS usually appears in Domain-driven design development and is often used along with the Event Sourcing pattern. However, you can still leverage it with your application in any architecture style.
This talk will discuss what CQRS is and how you can leverage using it in your Dart application. I also will elevate it with task-based UI components and show how beneficial it might be in the presentation layer of your application.

Architectural Patterns in Flutter

In this session, I'll explore the critical decisions that shape our apps. We'll start with the basics, discussing how simple yet crucial choices can impact the project. You'll learn to pick the suitable structures, balancing easy solutions with more complex, powerful options. My talk will highlight the importance of learning from feedback and gradually improving your app's architecture.

Moving on, I'll tackle more advanced topics in Flutter, like different UI patterns (such as BLoC and MVVM) and why they matter. I'll also touch on the 'system architectures' in Flutter, including Mikrokernel or Layered architectures. By the end of our session, you'll have practical insights and a solid grasp of building more robust, efficient Flutter applications.

Architectural thinking on Flutter State Management

Sometimes state management shapes the application architecture, which we even interchangeably call state management, app architecture. State management is a controversial topic among all developers, and it's, at the same time, one of the most complex topics that developers should decide on when they are building a Flutter app. Many developers say one solution is the best, whereas some disagree! What if I tell you that, in my opinion, there is no right and wrong answer! If you ask a software architect, which state management is the best for an application? The answer is evident; It Depends.
This talk discusses how to think like an architect and understand, recognize, and analyze tradeoffs and characteristics when choosing state management. I will show you why all state management might be best and worst, at the same time for your application which eventually helps you to make your mind to determine your appropriate solution.

Applying DevOps in Flutter mobile development

Adopting DevOps in mobile app development can be a game-changer and ensures teams become more productive in terms of execution and collaboration. Flutter is known for its fast and practical development experience, which is a great candidate to deliver your applications quicker to your customer.
However, there are many challenges while developing a mobile app for Android and iOS, such as automatically bumping build or release versions, running tests, checking code coverage, formatting, code signing, sharing keys among team members effortlessly, and writing changelogs, and more. These are just some repetitive, time-consuming tasks that may lead to inconsistency.
In this talk, I will demonstrate several approaches and tools to address the issues above.

Problem: Some things in the mobile development world, such as code signing for iOS apps, are complex and time-consuming.
Solutions: Automate as much as possible and create a consistent environment for building on all platforms.
Result: Save time and money, and at the end of the day since delivery and development are faster, your customer will see the result quicker.

The outline for the talk consists of the following:

1- Develop fast, Deliver fast an Android or iOS app
2- Consistency in Mobile development app codebase (Git Hooks and more)
3- Sharing Code signing profiles and certificates among team members!
4- Automate build and version number
5- Automate deploying to Google Play and Apple Connect
6- Automate Writing changelog
7- Automate Enterprise deployment to Apple Connect with several schemas and flavors!
8- last but not least, deploy consistently on all platforms and CI tools

Exploring cutting-edge models: LLMs, SLMs and more

Today, there are many Generative AI models to choose from: Large Language Models (LLMs), Small Language Models (SLMs), proprietary models, open models, models in the cloud, models on devices, text models, code models, image models, and multimodal models.
In this session, I'll provide guidance to help you choose the right model to fit your needs, and tools you can use to evaluate and compare models for your specific tasks.

Productive and Collaborative AI with Semantic Kernel

There’s a wide range of ways to integrate AI into your applications, including but not limited to proprietary or open-source, on-premises or in the cloud, small or large models, and more.
In this session, I’ll show you how Semantic Kernel unifies these approaches by providing a universal AI language that bridges machine learning and application development. Then, I'll explore how Semantic Kernel’s agentic features enable you to build adaptive, context-aware solutions.
This session has practical demos and tools to help you select the right methods for your needs.

Designing and Building Agentic AI Systems from End to End

The world of AI is advancing every day, and Agentic AI systems, in particular, represent the next level of how we interact with software and applications by independently pursuing sophisticated objectives and orchestrating complex workflows with minimal human oversight. It's fascinating.
In this session, I’ll explore the core concepts and baseline architecture for designing and building these systems. Then, we go through practical design patterns such as RAG, RAG2 for Agents, Code Generation Agents, Multi-Domain Agents, and more. And finally, you will learn how frameworks like AutoGen, Magentic-One, and TinyTroupe simplify development and deployment. I'll provide examples and demos that you can use in your next or existing agentic AI systems development.