An Introduction to ReactJS

51 likes12,806 views

The document serves as an introduction to React, outlining its declarative programming style and component-based architecture for building user interfaces. It discusses the concepts of state, props, and component lifecycle, providing examples of how to create components and manage data flow in a React application. Additionally, it emphasizes the importance of the virtual DOM and uni-directional data flow in efficient UI rendering.

Technology

An Introduction to React
JAMES PEARCE 
@jamespearce

toddler 
imperative programming 
describe computation in terms
of statements that change a
program state
teenager 
declarative programming 
express the logic of a
computation without
describing control ﬂow

A JavaScript Library For 
Building User Interfaces

http://todomvc.com/

Simple
!
Declarative
http://reactjs.org

state describe
for every
change of
the whole
user interface

<!DOCTYPE html>
<html>
<head>
<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>
<script src="labelapp.js" type="text/jsx"></script>
</head>
<body/>
</html>

var LabelApp = React.createClass({
render: function () {
return <div>Hello World!</div>;
}
});
!
React.render(
<LabelApp />,
document.body
);

var LabelApp = React.createClass({
render: function () {
return <div>{this.props.message}</div>;
}
});
!
React.render(
<LabelApp message="Hello Raleigh!" />,
document.body
);

props
!
passed in from parent
!
<MyComp foo="bar" /> 
 
this.props read-only within
!
can be defaulted & validated
state
!
created within component
!
getInitialState
 
this.state to read 
 
this.setState() to update

var MyComponent = React.createClass({
!
propTypes: {}, 
getDefaultProps: function () {},
getInitialState: function () {},
!
componentWillMount: function () {},
componentWillUnmount: function () {},
... 
render: function () {
// only read props & state -> return UI
},
});

var MyComponent = React.createClass({
!
iGotClicked: function () {...},
!
render: function () {
return <div onClick={this.iGotClicked}>Click</div>;
},
});
Or a parent’s method passed in via props

var LabelApp = React.createClass({
getDefaultProps: function () {
return {message: 'Hello World!'};
},
!
getInitialState: function () {
return {message: this.props.message};
},
!
render: function() {
return <div>{this.state.message}</div>;
}
});

onClick: function () {
this.setState({message: 'Hello Raleigh!'});
},
!
render: function () {
return (
<div onClick={this.onClick}>
{this.state.message}
</div>
);
}

Component
Component
Component
Component
Component Component
props
props
setState

Component
Component
Component
Component
Component Component
props
props
setState
event 
callback

state 
stored as high up as it needs to be  
to pass down to aﬀected children

Table
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
state is 
on cells

Table
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Total
Total
Total
state is 
on rows

Table
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Total
Total
Total
Row Total Total Total Total Total
state is 
on table

var Table = React.createClass({
getInitialState: function () {
var data = [];
for (var r = 0; r < this.props.rows; r++) {
data[r] = [];
for (var c = 0; c < this.props.columns; c++) {
data[r][c] = 0;
}
}
return {data: data};
},
render: function () {return <table>...</table>;}
});
!
React.render(<Table columns={4} rows={3} />, ...

var Row = React.createClass({
render: function () {
return <tr>{this.props.children}</tr>;
}
});
!
var Total = React.createClass({
render: function () {
return <th>{this.props.value}</th>;
}
});

var Cell = React.createClass({
onChange: function (e) {
this.props.onChange(
this.props.row,
this.props.column,
parseInt(e.target.value) || 0
);
},
render: function () {
return (<td>
<input type="number" value={this.props.value} 
onChange={this.onChange} />
</td>);
},
});

var Table = React.createClass({
onCellChange: function(row, column, value) {
this.state.data[row][column] = value;
this.setState({data: this.state.data});
},
!
render: function() {
// for rows & columns, append <Row>s containing 
// <Cell row={r} column={c}  
// value={this.state.data[r][c]} 
// onChange={this.onCellChange} />
//
// also append to each row and in a final row: 
// <Total value={total} /> 
},
...

Component-based UI 
Virtual DOM
Uni-directional data ﬂow

“Give it 5 minutes”
http://reactjs.org

JAMES PEARCE 
@jamespearce
https://www.flickr.com/photos/matthewpaulson/6773801511
https://www.flickr.com/photos/johnath/5358512977

React JS is a JavaScript library for building user interfaces, focusing on component-based and declarative programming. It uses a virtual DOM to optimize updates and offers state management through Redux, which implements a predictable state container pattern. The document also covers key topics like React Router for handling navigation and various middlewares for Redux, such as Redux Thunk and Redux Promise.

Intro to ReactJustin Reock

The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.

Introduction to react_jsMicroPyramid .

React is a JavaScript library for building user interfaces. It was created by Facebook and is best for building dynamic websites like chat applications. React uses a virtual DOM for efficiently updating the view after data changes. Components are the building blocks of React and can contain state and props. The document provides an example of a simple component class and demonstrates how to add state and props. It also includes links to example code and MicroPyramid's social media profiles.

React workshopImran Sayed

The document introduces React, a JavaScript library for building interactive user interfaces, detailing its features such as the virtual DOM, state management, and component architecture. It outlines the history of React, its component lifecycle, and the differences between state and props, while also addressing advanced concepts like higher-order components and context for state management. The document serves as a foundational guide for understanding and using React effectively across various applications.

Introduction to React JS for beginners Varun Raj

- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes. - Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements. - Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes. - The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.

An introduction to React.jsEmanuele DelBono

This document provides an introduction to React.js, including: - React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change. - The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way. - Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.

Introduction to ReactJSKnoldus Inc.

This document is an introduction to ReactJS, a declarative, component-based JavaScript library for building single-page applications. It covers key concepts such as JSX, components, props, lifecycle hooks, and events, providing practical examples for creating and handling React components. The document emphasizes the flexibility of React and best practices for utilizing props and component functions.

Reactjs Neha Sharma

Introduction to ReduxIgnacio Martín

React jsOswald Campesato

ReactJS for Beginners provides an overview of ReactJS including what it is, advantages, disadvantages, typical setup tools, and examples of basic React code. Key points covered include: - ReactJS is a JavaScript library for building user interfaces and is component-based. - Advantages include high efficiency, easier JavaScript via JSX, good developer tools and SEO, and easy testing. - Disadvantages include React only handling the view layer and requiring other libraries for full MVC functionality. - Examples demonstrate basic components, properties, events, conditional rendering, and lists in ReactJS.

react redux.pdfKnoldus Inc.

The document presents an introduction to React-Redux, emphasizing the importance of etiquette in sessions, including punctuality and feedback. It covers the architecture of modern web applications, highlighting state management and the benefits of using Redux for centralized data handling. Additionally, it explains how Redux works with React through views, actions, reducers, and selectors, showcasing its advantages like predictability and debuggability.

Introduction to React JS for beginners | Namespace ITnamespaceit

React is a JavaScript library for building user interfaces using reusable components. It is used to create single page applications that dynamically update the current page with new data from the server. React uses a component-based approach and one-way data binding to build interfaces simply and allow for easy testing. Key concepts in React include components, props, state, lifecycles, hooks, JSX, and the virtual DOM. Major companies using React include Facebook, Netflix, Instagram, and WhatsApp.

React stateDucat

The document explains how state is managed in React components, highlighting its accessibility through the 'useState' hook and 'this.state' in class components. It details the initialization of state, the importance of using constructors, and provides an example of a counter application to illustrate how state changes can be tracked. Additionally, it mentions the asynchronous nature of 'setState' and the necessity of using callback functions to manage updates effectively.

React js - The Core ConceptsDivyang Bhambhani

The document discusses React's virtual DOM and how it allows for more efficient DOM updates compared to directly manipulating the real DOM. It explains that the virtual DOM is an in-memory representation of the real DOM that allows React to calculate efficient DOM changes before applying them to the real DOM. This avoids unnecessary re-renders and improves performance. It also describes how React uses a diff algorithm and DOM traversal with breadth-first search to determine the minimal number of operations needed to transform the virtual DOM before updating the real DOM in a batched way.

React JS - A quick introduction tutorialMohammed Fazuluddin

This document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.

Workshop 21: React RouterVisual Engineering

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!

WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu

React 중운 박

The document describes React, a JavaScript library for building user interfaces. It introduces some key concepts of React including components, props, state, and the virtual DOM. Components are the building blocks of React apps and can be composed together. Props provide immutable data to components, while state provides mutable data. The virtual DOM allows React to efficiently update the real DOM by only changing what needs to be changed. Data flows unidirectionally in React from parent to child components via props, and state updates within a component are handled via setState().

Spring Boot and REST API07.pallav

Spring Boot is a framework for creating stand-alone, production-grade Spring-based applications that can be started using java -jar without requiring any traditional application servers. It is designed to get developers up and running as quickly as possible with minimal configuration. Some key features of Spring Boot include automatic configuration, starter dependencies to simplify dependency management, embedded HTTP servers, security, metrics, health checks and externalized configuration. The document then provides examples of building a basic RESTful web service with Spring Boot using common HTTP methods like GET, POST, PUT, DELETE and handling requests and responses.

React JS - IntroductionSergey Romaneko

React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.

Its time to React.jsRitesh Mehrotra

The document provides an overview of React.js, a flexible and efficient JavaScript library for building user interfaces, created by Facebook's Jordan Walke in 2011 and open-sourced in 2013. It highlights React's strengths including building reusable components, reactive updates, and performance through the virtual DOM, which allows efficient UI updates. Additionally, it includes links for further exploration, such as tutorials, examples, and case studies from prominent companies using React.

[Final] ReactJS presentation洪鹏发

React JS is a JavaScript library for building user interfaces. It uses a virtual DOM to efficiently update the real DOM and render user interfaces from components. Components are reusable pieces of UI that accept input data via properties but maintain private state data. The lifecycle of a component involves initialization, updating due to state/prop changes, and unmounting. React uses a single-directional data flow and the concept of components makes code modular and reusable.

Lets make a better react formYao Nien Chung

The document discusses the complexities of handling forms in React, highlighting the need for a better form system to simplify validations, manage states, and reduce verbosity. It introduces alternatives like Formik and React Final Form, which address common issues with traditional form handling, such as controlled vs uncontrolled components and validation methods. Additionally, it compares various form libraries and their features, emphasizing the importance of separating UI from logic for better form management.

ReactjsMallikarjuna G D

React jsJai Santhosh

This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.

React jsRajesh Kolla

This document provides an overview of React including: - React is a JavaScript library created by Facebook for building user interfaces - It uses virtual DOM to efficiently re-render components on updates rather than entire page - React supports ES6 features and uses classes, arrow functions, and other syntax - Popular tools for React include Create React App for setting up projects and React Dev Tools for debugging

Full Stack Toronto - the 3R StackScott Persinger

The document discusses the 3R stack for building real-time, RESTful applications using React, emphasizing its evolution from traditional web apps to AJAX single-page applications. It highlights the importance of real-time features for collaboration and monitoring, as well as the architectural choices involving backend technologies like Node.js, Redis, and WebSockets. The presentation concludes with insights on managing state with the Flux architecture and the benefits of a real-time API for improved user experience.

JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JSFestUA

The document discusses React Hooks, a feature introduced in React 16.8 that allows developers to use state and other React features in function components instead of class components. It provides examples of state management, component rendering, and using hooks like useState and useEffect, highlighting their benefits in code organization and logic reuse. Additionally, it touches on best practices, rules for using hooks, and testing methods.

More Related Content

What's hot (20)

Reactjs Neha Sharma

Introduction to ReduxIgnacio Martín

React jsOswald Campesato

react redux.pdfKnoldus Inc.

Introduction to React JS for beginners | Namespace ITnamespaceit

React stateDucat

React js - The Core ConceptsDivyang Bhambhani

React JS - A quick introduction tutorialMohammed Fazuluddin

Workshop 21: React RouterVisual Engineering

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!

WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu

React 중운 박

Spring Boot and REST API07.pallav

React JS - IntroductionSergey Romaneko

Its time to React.jsRitesh Mehrotra

[Final] ReactJS presentation洪鹏发

Lets make a better react formYao Nien Chung

ReactjsMallikarjuna G D

React jsJai Santhosh

React jsRajesh Kolla

Reactjs Neha Sharma

Introduction to ReduxIgnacio Martín

React jsOswald Campesato

react redux.pdfKnoldus Inc.

Introduction to React JS for beginners | Namespace ITnamespaceit

React stateDucat

React js - The Core ConceptsDivyang Bhambhani

React JS - A quick introduction tutorialMohammed Fazuluddin

Workshop 21: React RouterVisual Engineering

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!

WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu

React 중운 박

Spring Boot and REST API07.pallav

React JS - IntroductionSergey Romaneko

Its time to React.jsRitesh Mehrotra

[Final] ReactJS presentation洪鹏发

Lets make a better react formYao Nien Chung

ReactjsMallikarjuna G D

React jsJai Santhosh

React jsRajesh Kolla

Similar to An Introduction to ReactJS (20)

Full Stack Toronto - the 3R StackScott Persinger

JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JSFestUA

JDBC – Java Database ConnectivityInformation Technology

The document discusses Java Database Connectivity (JDBC) which allows Java applications to connect to databases. It describes the JDBC architecture including drivers, loading drivers, connecting to databases, executing queries and updates using Statement and PreparedStatement objects, processing result sets, and handling exceptions. It also covers transactions, result set metadata, and cleaning up resources.

React state managmenet with ReduxVedran Blaženka

The document discusses Redux as a state management tool for React applications, highlighting its principles such as a single source of truth, read-only state, and unidirectional data flow. It outlines the role of actions, reducers, and the importance of immutability in managing state effectively without side effects. Additionally, the pros and cons of using Redux are briefly noted, along with resources for further learning.

Java Web Programming [5/9] : EL, JSTL and Custom TagsIMC Institute

This document provides an overview of Expression Language (EL), JSTL (JSP Standard Tag Library) 1.1, and custom tags. It describes EL expressions, implicit objects, and attributes. It explains core JSTL tags for looping, conditionals, and URL manipulation. It also discusses using JSTL tags to connect to a database and format output. Finally, it outlines how to create a custom tag library with a TLD file, tag handler class, and JSP file to implement a simple tag.

Executing Sql Commandsleminhvuong

Executing Sql Commandsphanleson

React/ReduxDurgesh Vaishnav

Sqlapi0.1jitendral

This document outlines the objectives and content of a training module on the csql database, detailing how to interface with it using the sqlapi. It includes instructions on executing SQL statements, handling errors, and managing data types, alongside examples of database transactions and operations. The csql database is marketed as a high-performance caching solution with various functionalities for application developers.

Connect.js - Exploring React.Nativejoshcjensen

The document is a comprehensive guide to exploring React Native, detailing setup instructions, code snippets for building applications, and features such as live reload and navigation. It covers the installation process, creating a simple todo app, using various UI components, and extending capabilities with native modules. Additionally, it highlights the pros and cons of using JavaScript for mobile app development and provides contact information for further inquiries.

ReactJSRam Murat Sharma

The Exciting Future Of Reactkristijanmkd

The document discusses upcoming features and changes in React, including React 16 and the React Fiber architecture. Some key points covered are: 1) React 16 includes features like error boundaries, fragments, portals, and improved server-side rendering. 2) React Fiber completely rewrites the core React algorithm for improved performance and responsiveness. 3) Other new features discussed include context API, hooks, error handling improvements, and deprecation of some lifecycle methods. 4) The author demos several new features like fragments, portals, context API, and explains use cases for them. He advocates trying out new React features once they are stable.

React, Redux and es6/7Dongho Cho

The document discusses React, Redux, and ES6/7 features. It begins with an overview of React lifecycles and class components. It then provides a brief introduction to Redux, including core concepts like actions, reducers, and unidirectional data flow. The document also includes an example to demonstrate how React and Redux can work together, with Redux managing application state in the store and React components interacting via container components.

Lec7Handout.pptMOMEKEMKUEFOUETDUREL

This document provides an overview and instructions for a web programming course that covers React.js. It includes: - An announcement about an exam due date and a walkthrough screencast - Instructions for an assignment to create a responsive grid layout using Bootstrap - An overview of React.js and how it can efficiently update and render components when data changes - Steps for getting set up with React, including installing developer tools and packages - An introduction to React components, properties, state, functions, and refs - Information on mapping arrays and arrow functions - Directions for creating a React app using Create React App through Node.js

Dive into React PerformanceChing Ting Wu

The document discusses performance optimization techniques in React, emphasizing the importance of using the production version and minimizing unnecessary renders. It covers strategies such as utilizing React's lifecycle methods, handling state updates efficiently, and leveraging the React performance tool for profiling. Additionally, it briefly introduces React Fiber and its capabilities for rendering elements more effectively.

Advanced reduxBoris Dinkevich

This document provides an overview and introduction to Redux. It discusses key Redux concepts like the single store, state, actions, and reducers. It also covers tools and libraries that work with Redux like middleware, thunks, and immutable data structures. Implementation examples are provided, including a mini counter app and using Redux with React components. Asynchronous actions and API integration with middleware are explained.

Advance Java Programs skeletonIram Ramrajkar

The document provides templates and examples for creating Swing-based GUI applications, servlets, Java Server Pages (JSP), Java Database Connectivity (JDBC), Java Server Faces (JSF), Enterprise Java Beans (EJB), Hibernate, Struts, and web services in Java. It includes templates for common GUI components, servlets, JSP tags, database queries, managed beans, navigation rules, entity beans, Hibernate mappings, actions, and web service providers/consumers.

Rails vs Web2pyjonromero

Rails vs Web2Py compares the popular web frameworks Ruby on Rails and Web2Py. Some key differences include: - Controllers are defined as classes in Rails and functions in Web2Py. - Routing is defined in a routes.rb file in Rails and routes.py in Web2Py, which supports reversed routing and regex. - Views use ERB templates in Rails and native Python templates in Web2Py. - Web2Py has built-in support for forms, validation, users/roles, caching, translations and more while these require additional gems/plugins in Rails. - Web2Py is designed to be easier to install

JDBC TutorialInformation Technology

React lectureChristoffer Noring

This document provides an overview of React and Redux concepts including: - React basics like components, props, state, and lifecycle methods - Flux architecture and how data flows through actions, dispatcher, and stores - Redux as an alternative to Flux that uses a single store updated by reducers in response to actions - Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.

Full Stack Toronto - the 3R StackScott Persinger

JS Fest 2019. Glenn Reyes. With great power comes great React hooks!JSFestUA

JDBC – Java Database ConnectivityInformation Technology

React state managmenet with ReduxVedran Blaženka

Java Web Programming [5/9] : EL, JSTL and Custom TagsIMC Institute

Executing Sql Commandsleminhvuong

Executing Sql Commandsphanleson

React/ReduxDurgesh Vaishnav

Sqlapi0.1jitendral

Connect.js - Exploring React.Nativejoshcjensen

ReactJSRam Murat Sharma

The Exciting Future Of Reactkristijanmkd

React, Redux and es6/7Dongho Cho

Lec7Handout.pptMOMEKEMKUEFOUETDUREL

Dive into React PerformanceChing Ting Wu

Advanced reduxBoris Dinkevich

Advance Java Programs skeletonIram Ramrajkar

Rails vs Web2pyjonromero

JDBC TutorialInformation Technology

React lectureChristoffer Noring

More from All Things Open (20)

Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines o...All Things Open

Presented at All Things Open RTP Meetup Presented by William Hill - Developer Advocate, NVIDIA Title: Agentic AI for Developers and Data Scientists Build an AI Agent in 10 Lines of Code and the Concepts Behind the Code Abstract: In this talk we will demonstrate building a working data science AI agent in 10 lines of basic Python code in a Colab notebook. Our AI Agent will perform LLM prompt-driven visual analysis using open-source libraries. In this session we will show how to develop an AI Agent using GPUs through NVIDIA’s developer program and Google Colab notebooks. After coding our AI Agent, we will break down the 10 lines of code. We will show the key components and open source library integrations that enable the agent's functionality, focusing on practical implementation details and then the theoretical concepts. The presentation concludes with a survey of current LLM technologies and the latest trends in developing AI applications for enthusiasts and enterprises

Big Data on a Small Budget: Scalable Data Visualization for the Rest of Us - ...All Things Open

Presented at All Things Open 2024 Presented by Robert Gove - CrowdStrike Title: Big Data on a Small Budget: Scalable Data Visualization for the Rest of Us Abstract: As large-scale data has become commonplace, developing scalable data visualizations for common data sizes is increasingly inaccessible for many teams. Typical solutions require a big team and expensive compute clusters; other solutions, like WebGL, require specialized skills that can hurt maintainability. Furthermore, commonly proposed solutions often don’t solve performance bottlenecks teams encounter in practice. In this talk, Robert will discuss common backend, algorithmic, data transfer, and rendering bottlenecks for data visualization web apps and how to diagnose them. He will demonstrate intermediate and advanced solutions using open source technology that anyone can use, even if they don’t have the resources of a big tech company. Audience members will come away with a suite of solutions accessible to teams with a range of sizes, budgets, and skill sets. Many of these solutions also apply to other types of data-intensive applications. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2024 conference: https://2024.allthingsopen.org/

AI 3-in-1: Agents, RAG, and Local Models - Brent LasterAll Things Open

Presented at All Things Open RTP Meetup Presented by Brent Laster - President & Lead Trainer, Tech Skills Transformations LLC Talk Title: AI 3-in-1: Agents, RAG, and Local Models Abstract: Learning and understanding AI concepts is satisfying and rewarding, but the fun part is learning how to work with AI yourself. In this presentation, author, trainer, and experienced technologist Brent Laster will help you do both! We’ll explain why and how to run AI models locally, the basic ideas of agents and RAG, and show how to assemble a simple AI agent in Python that leverages RAG and uses a local model through Ollama. No experience is needed on these technologies, although we do assume you do have a basic understanding of LLMs. This will be a fast-paced, engaging mixture of presentations interspersed with code explanations and demos building up to the finished product – something you’ll be able to replicate yourself after the session!

Let's Create a GitHub Copilot Extension! - Nick Taylor, PomeriumAll Things Open

Presented at All Things Open AI 2025 Presented by Nick Taylor - Pomerium Title: Let's Create a GitHub Copilot Extension! Abstract: Get hands-on in this talk where we'll create a GitHub Copilot Extension from scratch. We'll use the Copilot Extensions SDK, https://github.com/copilot-extensions/preview-sdk.js, and Hono.js, covering best practices like payload validation and progress notifications and error handling. We'll also go through how to set up a dev environment for debugging, including port forwarding to expose your extension during development as well as the Node.js debugger. By the end, we'll have a working Copilot extension that the audience can try out live. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Leveraging Pre-Trained Transformer Models for Protein Function Prediction - T...All Things Open

Presented at All Things Open AI 2025 Presented by Tia Pope - North Carolina A&T Title: Leveraging Pre-Trained Transformer Models for Protein Function Prediction Abstract: Transformer-based models, such as ProtGPT2 and ESM, are revolutionizing protein sequence analysis by enabling detailed embeddings and advanced function prediction. This talk provides a hands-on introduction to using pre-trained open-source transformer models for generating protein embeddings and leveraging them for classification tasks. Attendees will learn to tokenize sequences, extract embeddings, and implement machine-learning pipelines for protein function annotation based on Gene Ontology (GO) or Enzyme Commission (EC) numbers. This session will showcase how pre-trained transformers can democratize access to advanced protein analysis techniques while addressing scalability and explainability challenges. After the talk, the speaker will provide a notebook to test basic functionality, enabling participants to explore the concepts discussed. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Gen AI: AI Agents - Making LLMs work together in an organized way - Brent Las...All Things Open

Presented at All Things Open AI 2025 Presented by Brent Laster - Tech Skills Transformations Title: Gen AI: AI Agents - Making LLMs work together in an organized way Abstract: AI Agents are combinations of LLMs, tools, and custom roles that can autonomously perform tasks and make decisions based on context and user input. Multiple agents can be managed together to cooperatively handle individual tasks that are part of a larger project to accomplish an overall goal. By combining capabilities like tool access, multi-step reasoning, and real-time adjustments, agents can construct and complete complex workflows and intelligent solutions. In this presentation, we'll look at what AI agents are, how they work, and how you can create and put them to work. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

You Don't Need an AI Strategy, But You Do Need to Be Strategic About AI - Jes...All Things Open

Presented at All Things Open AI 2025 Presented by Jessica Hall - Hallway Studio Title: You Don't Need an AI Strategy, But You Do Need to Be Strategic About AI Abstract: There’s so much noise about creating an “AI strategy,” it’s easy to feel like you’re already behind. But here’s the thing: you don’t need an AI strategy or a data strategy. Those things need to serve your business strategy and that requires strategic thinking. Here’s what you’ll get: A clear understanding of why AI is a means to an end—not the end itself—and how to use it to solve problems traditional methods can’t touch. How to align AI with strategy using questions like “Where do we play? How do we win?” from Roger L. Martin and A.G. Lafley. What successful AI initiatives have in common: clear value, smart use of unique data, and meaningful business impact. A checklist to evaluate AI opportunities—covering metrics, workflows, and the human factors that make or break AI efforts. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

DON’T PANIC: AI IS COMING – The Hitchhiker’s Guide to AI - Mark Hinkle, Perip...All Things Open

Presented at All Things Open AI 2025 Presented by Mark Hinkle - Peripety Labs Title: DON’T PANIC: AI IS COMING – The Hitchhiker’s Guide to AI Abstract: AI is coming of age, and much like discovering intergalactic travel, it’s equal parts thrilling and terrifying. Fears of job loss, doomsday scenarios, and bureaucratic AI overlords dominate the conversation—but I think the reality is far less apocalyptic and far more exciting. With the right guide, you can navigate this new universe, adapt, and even thrive. That’s what AllThingsOpen.AI is all about—building a community where people and businesses don’t just survive AI’s rise but flourish in it. So grab your towel, keep an open mind, and let’s explore the future—without the panic. Listen to Conference Co-Producer and publisher of the Artificially Intelligent Enterprise, Mark Hinkle, provide a vision on how AI will play out in our lives. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Fine-Tuning Large Language Models with Declarative ML Orchestration - Shivay ...All Things Open

Presented at All Things Open AI 2025 Presented by Shivay Lamba - Couchbase Title: Fine-Tuning Large Language Models with Declarative ML Orchestration Abstract: Large Language Models used in tools like ChatGPT are everywhere; however, only a few organisations with massive computing resources are capable of training such large models. While eager to fine-tune these models for specific applications, the broader ML community often grapples with significant infrastructure challenges. In the session, the audience will understand how open-source ML tooling like Flyte (a Linux Foundation open-source orchestration platform) can be used to provide a declarative specification for the infrastructure required for a wide array of ML workloads, including the fine-tuning of LLMs, even with limited resources. Thus the attendee will learn how to leverage open-source ML toolings like Flyte's capabilities to streamline their ML workflows, overcome infrastructure constraints, reduce cost and unlock the full potential of LLMs in their specific use case. Thus making it easier for a larger audience to leverage and train LLMs. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Leveraging Knowledge Graphs for RAG: A Smarter Approach to Contextual AI Appl...All Things Open

Presented at All Things Open AI 2025 Presented by David vonThenen - DigitalOcean Title: Leveraging Knowledge Graphs for RAG: A Smarter Approach to Contextual AI Applications Abstract: In the ever-evolving field of AI, retrieval-augmented generation (RAG) systems have become critical for delivering high-quality, contextually relevant answers in applications powered by large language models (LLMs). While vector databases have traditionally dominated RAG applications, graph databases, specifically knowledge graphs, offer a transformative approach to contextual AI that’s often overlooked. This approach provides unique advantages for applications requiring deep insights, intelligent search, and reasoning over both structured and unstructured sources, making it ideal for complex business scenarios. Attendees will leave with an understanding of how to build a RAG system using a graph database and practical skills for data querying and insights retrieval. By comparing graph and vector database approaches, we’ll highlight when and why graph databases may offer superior benefits for managing complex data relationships. The session will provide concrete examples and advanced techniques, empowering participants to incorporate knowledge graphs into their AI systems for better data-driven outcomes and improved LLM performance. This discussion will conclude with a live demo showcasing key techniques and insights covered in this talk. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Artificial Intelligence Needs Community Intelligence - Sriram Raghavan, IBM R...All Things Open

Presented at All Things Open AI 2025 Presented by Sriram Raghavan - IBM Research AI Title: Artificial Intelligence Needs Community Intelligence Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Don't just talk to AI, do more with AI: how to improve productivity with AI a...All Things Open

Presented at All Things Open AI 2025 Presented by Sheng Liang - Acorn Labs Title: Don't just talk to AI, do more with AI: how to improve productivity with AI agents Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Open-Source GenAI vs. Enterprise GenAI: Navigating the Future of AI Innovatio...All Things Open

Presented at All Things Open AI 2025 Presented by Dr. Ruth Akintunde - SAS Institute Inc. Title: Open-Source GenAI vs. Enterprise GenAI: Navigating the Future of AI Innovation Abstract: This talk explores the critical differences between Open-Source Generative AI and Enterprise Generative AI, highlighting their respective strengths and challenges. Open-Source GenAI fosters innovation through community collaboration, accessibility, and adaptability, while Enterprise GenAI prioritizes security, scalability, and reliability. Key aspects such as cost, ethical considerations, and long-term sustainability are examined to understand their impact on AI development and deployment. Ultimately, the talk advocates for a hybrid approach, leveraging the best of both worlds to drive AI innovation forward. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

The Death of the Browser - Rachel-Lee Nabors, AgentQLAll Things Open

Presented at All Things Open AI 2025 Presented by Rachel-Lee Nabors - AgentQL Title: The Death of the Browser Abstract: In ten years, Internet Browsers may be a nostalgic memory. As enterprises face mounting API costs and integration headaches, a new paradigm is emerging. The internet's evolution from an open highway into a maze of walled gardens and monetized APIs has created significant challenges for businesses—but it has also set the stage for accessing and organizing the world’s information. This lightning talk traces our journey from the invention of the browser to the arms race of scraping for data and access to it to the dawn of AI agents, showing how the challenges of today opened the door to tomorrow. See how technologies refined by the web scraping community are combining with large language models to create practical alternatives to costly API integrations. From the rise of platform monopolies to the emergence of AI agents, this timeline-based exploration will help you understand where we've been, where we are, and where we're heading. Join us for a glimpse of how AI agents are enabling a return to the era of free information with the web as the API. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen Bluesky: https://bsky.app/profile/allthingsopen.bsky.social 2025 conference: https://2025.allthingsopen.org/

Making Operating System updates fast, easy, and safeAll Things Open

The document discusses streamlining operating system updates through an open-source approach, likening system management to a performance art. It emphasizes the use of container images and registries to manage deployments across various environments, including servers and cloud platforms. Additionally, it includes links to resources and acknowledgments to contributors and artists involved in the project.

Reshaping the landscape of belonging to transform communityAll Things Open

The document discusses Winstina Hughes and her organization, Support Inclusion in Tech, aimed at fostering a sense of belonging and diversity in the tech community. It emphasizes the importance of support in overcoming barriers, particularly for underrepresented individuals, and outlines structured processes for inclusive participation in events. Key highlights include the focus on transparency, community partnerships, and adaptive leadership in pursuing diversity and inclusion within open-source projects.

The Unseen, Underappreciated Security Work Your Maintainers May (or may not) ...All Things Open

The document discusses the challenges of unpaid security work in open-source software, emphasizing the importance of maintaining security practices like two-factor authentication, vulnerability scanning, and support for both old and new software versions. It highlights findings from interviews with over 400 maintainers, indicating that paid maintainers are more effective in implementing critical security measures. The document calls for sustained investment in open-source projects to improve their security and support the developers behind them.

Integrating Diversity, Equity, and Inclusion into Product DesignAll Things Open

The document emphasizes a culture-driven approach to designing inclusive products that resonate with diverse audiences. It discusses practical strategies for integrating inclusivity at every stage of the design process and highlights the benefits of companies embracing diversity. Denitresse Ferrell, founder and CEO of Culture Refinery, advocates embedding empathy in product development for creating connections, rather than just adding features.

The Open Source Ecosystem for eBPF in KubernetesAll Things Open

The document discusses eBPF (enhanced Berkeley Packet Filter), a powerful technology that allows for the extension and observation of kernel behavior in Linux without modifying the kernel source code. It highlights the challenges of using eBPF within Kubernetes environments, particularly regarding the privilege requirements for application pods and the distribution of bytecode. The document introduces BPFMan, an open-source project designed to simplify the use of eBPF in Kubernetes by handling privileges and bytecode management, while promoting community engagement and collaboration.

Open Source Privacy-Preserving Metrics - Sarah Gran & Brandon PitmanAll Things Open

Divvi Up, launched in October 2020 by a nonprofit focused on privacy-preserving metrics, enables the private aggregation of sensitive data while ensuring that original measurements are never visible to unauthorized parties. Its applications include telemetry and survey results, with notable deployments by Mozilla and Horizontal for sensitive measurement collection. The service is grounded in the Distributed Aggregation Protocol (DAP), which is currently undergoing standardization at the IETF, and incorporates techniques like Oblivious HTTP and differential privacy to enhance data security.