An Overview of the React Ecosystem
with Rami Sayar
OVERVIEW
React has been named the front-end library to learn in 2016 however few people talk about the React without mentioning Flux (or Redux or React Native or Relay). In this talk, we will explore the ecosystem of tools and libraries that surround React. We will look at the various Flux implementations (including a short explanation of Flux) like Redux, at some of the React routing libraries, at some of the reactive database or reactive API libraries and finally at everyday tools and techniques that make the React developer happy. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.
OBJECTIVE
Learn about the React Ecosystem
TARGET AUDIENCE
Front-End Developers with knowledge of JavaScript, React Beginners
ASSUMED AUDIENCE KNOWLEDGE
JavaScript, Front-End Dev, Beginner React
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is Flux?
What is Redux
What is React Native
What is Relay (and other Reactive Databases/APIs)
Useful React Dev Tools
Building Modern Web Applications using React and ReduxMaxime Najim
React and Redux are latest evolution in modern web application development. This talk covers the concepts and set of technologies of modern web application development.
This document discusses using React and Redux to build an app for managing conferences. It describes building a conference scheduling app with React components to define the UI and Redux to manage shared state. Redux uses a central store with actions and reducers to update the state, which is then mapped to props and passed to React components. Key aspects covered include creating React components, action creators, reducers, connecting React to Redux with the connect function, and rendering the app with a Provider component wrapping the connected components.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
This document provides an overview of Redux, an architecture for managing state in JavaScript applications. It discusses the main components of Redux including actions, reducers, and middleware. Actions are described as pure functions that return data but do not dispatch changes. Reducers are pure functions that take the previous state and an action to return a new immutable state. Middleware allows for asynchronous logic and logging. The document also discusses React bindings and an example of refactoring an application to use Redux.
This document provides an overview of how to build applications with React Native. It discusses React Native's core components like React, ReactDOM and React Native. It also covers topics like JavaScript implementation, building components, styles, platform specific code, animations, navigation libraries and working with data using Redux.
React is a JavaScript library for building user interfaces and applications. It uses components rather than templates, implements a one-way data flow downwards and re-renders components on data changes rather than mutating them directly. The virtual DOM in React allows for simple and fast re-rendering. Key aspects of React include components, one-way data flow, re-rendering without mutation, the virtual DOM, JSX syntax and React Native for building mobile apps. Flux is an architecture pattern used for state management in React, implementing unidirectional data flow through actions, a dispatcher, stores and views.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
The document provides an introduction and overview of ES6, React, and Redux. It begins with an in-depth section about new features and syntax in ES6, including variable types, arrow functions, modules, classes, and more. It then discusses React, explaining concepts like the virtual DOM, one-way data flow, JSX syntax, props, nested components, conditionals, and state/setState. Finally, it briefly introduces Redux and mentions using React components on the server and in mobile apps with React Native.
React is a fantastic Javascript rendering framework with a steep learning curve. One of the reasons is understanding state. We explore unidirectional flow, props, state Immutability and Redux.
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304
We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
This document provides an overview of React and Redux. It introduces React as a component-based library for building user interfaces using JavaScript and JSX. Key aspects of React include its lifecycle methods, use of a virtual DOM for fast updates, and functional stateless components. Redux is introduced as a state management library that uses a single immutable store with actions and reducers. It follows the Flux architecture pattern without a dispatcher. Hands-on demos are provided for key React and Redux concepts. Resources for further learning are also listed.
The document discusses advanced Redux concepts including higher order components, middleware, and the decorator pattern. It provides examples of how middleware can be used to log actions, modify actions before they reach the reducer, and compose independent and reusable behaviors. Code samples are given for middleware structure, a simple logger middleware, and a "superstitious" middleware that modifies actions conditionally. Popular middleware libraries like redux-promise, redux-thunk, and Redux-logger are also mentioned.
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.
The document summarizes Kiran Abburi's presentation on React. It covers:
1. The agenda includes basics of React, composition, data flow, JSX, React APIs, and building a todo app.
2. React is a JavaScript library for building user interfaces and uses a component-based approach to build encapsulated pieces.
3. Data in React flows in a uni-directional way through properties (props) and state, where props are passed from parent to child components and state is internal to a component.
Redux is an exciting Javascript framework where you get things done by modifying nothing! More seriously, Redux is a flux-like way to manage UI state deterministically, with logical state transitions. This talk will explore how New Relic's APM product is using Redux to build interfaces at the future of software analytics. Here's to code we can understand and reason about!
---
Talk originally from New Relic FutureStack 2015!
This document provides an overview and introduction to React. It discusses components, JSX syntax, the virtual DOM, rendering, state and props, and the component lifecycle. It also includes examples of building components, integrating with APIs, and where to go from the basics. The key topics covered are building reusable UI with components, using JSX to write HTML-like code, how the virtual DOM enables efficient re-rendering, updating the UI via state and props, and the various lifecycle methods components can implement. Hands-on examples demonstrate basic components, fetching external data, and managing state.
Supporting slides of my introductory workshop about React Native in React Alicante 2017.
Source code & Exercises: https://github.com/Limenius/workshop-react-native
Some of the ES6+ features are great companions when using React. This presentation introduces you to some of them.
This talk was inspired by Steven Luscher's blog post: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/
This document discusses server-side rendering with Redux. It explains the benefits of universal/isomorphic rendering like improved SEO and perceived performance. It covers rendering the initial HTML on the server, handling async logic, and using the redux-universal library to synchronize rendering and async actions on client and server.
Flux is an application architecture for building User Interfaces (UI). A data flow application architecture created and used by Facebook for client-side web applications. React JS is An open source JavaScript library for building user interfaces
The document discusses the state of JavaScript and opportunities for its responsible use. It encourages learning JavaScript properly rather than copying code without understanding. It argues against workarounds for browser issues and urges focusing on standards compliance. Updating tools and libraries, removing legacy code, and embracing modern JavaScript features like those in ES6 can help address past issues and enable further innovation on the web.
Rami Sayar presented on ECMAScript 6 (ES6) features including block scoping with let and const, destructuring, modules and classes, and iterators and generators. ES6 is targeted for ratification in mid-2015 and brings significant updates to JavaScript. Browser and Node.js support is emerging for ES6 features through experimental flags or transpilation to ES5.
The document discusses the ES6 (ECMAScript 2015) specification and challenges with adopting it. Some key points:
- ES6 provides many new features but poses issues as browsers have varying support levels
- Transpiling ES6 to ES5 allows use of new features but adds steps and browsers never get the native code
- Feature testing can be used but has limitations and complexity
- Options like libraries introduce dependencies rather than using the standard
- Widespread testing and use of ES6 is needed to improve support and performance in browsers
Babel is a general purpose JavaScript compiler that allows code written for modern versions of JavaScript to be compiled into a backwards compatible format that can run on older JavaScript environments. It uses parsing, traversing an abstract syntax tree (AST), and code generation to transform code. Key parts of Babel include its parser, types module for working with AST nodes, visitor pattern for traversing nodes, and ability for third-party code (plugins) to transform the AST during parsing.
This document provides an agenda for discussing JavaScript ES6 features such as promises, arrow functions, constants, modules, classes, transpilation, default parameters, and template strings. It also discusses how to use ES6 today via transpilation with tools like Babel and Traceur, and which companies are using ES6 and those transpilation tools.
This document discusses ES6 features such as let, destructuring, template strings, arrow functions, default parameters, spread parameters, promises, modules, export, import, classes, and weak maps. It is presented by René Olivo, who has 15 years of software development experience and enjoys beer. Links are provided to resources about ES6 features, compatibility, BabelJS, and examples of let, destructuring, promises, and weak maps.
From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang
The document discusses the challenges of front-end development without proper tools and methodologies. It describes tag soup code that is difficult to read and maintain. It also discusses issues like duplicate code, global variables, lack of module loading and dependencies. The document then introduces concepts like package management, CSS preprocessors, JavaScript module loaders, transpilers and build tools that help address these issues. It argues these tools help create a foundation for building user interfaces and applications in a more efficient and sustainable way.
The document discusses building modern web applications with React and Flux. It begins with introductions and an agenda. It then covers React components, lifecycle methods, and Flux architecture including actions, dispatcher and stores. It discusses common mistakes, other view libraries like Vue and Riot, and takes questions.
Flux is an architecture for building JavaScript applications that promotes unidirectional data flow. The key elements of Flux are the Dispatcher, Stores, and Views. The Dispatcher centralizes the flow of data and dispatches actions to the Stores. Stores contain application state and logic. Views are React components that subscribe to Stores and listen for changes to re-render. Actions define activities and are dispatched by action creators through the Dispatcher to the Stores to update state.
JavaScript, React Native and Performance at react-europe 2016Tadeu Zagallo
With React Native, some of your applications core functionalities, that would previously be written in native code, are now implemented in JavaScript. And that's great! Now you can use things like Hot Module Reloading and ship updates to your app whenever you want. But what about performance and User Experience? Is JavaScript fast enough to replace native code? I'm going to talk about some of the challenges we are working on at the React Native Performance team.
This document outlines an agenda for a workshop on React and Flux. The workshop will begin with light introductions to React and Flux concepts, followed by demos of building applications with each. More details on React and Flux will be provided. Code repositories for the demos will be shared. The workshop aims to convey high-level concepts like components, one-way data flow, and separation of concerns between views and data. Recipes for conditional content and collections will be demonstrated.
Adobe Animate CC provides 100% creative freedom for animators and developers. It allows for creation, animation, and interactivity across print, web, mobile, and 3D printing. Animate CC exports to HTML5, SVG, WebGL and 4K video, allowing animations to reach all devices without plugins. It also integrates with Adobe Stock and Typekit for graphic and font resources.
Graphic Designer to Object Designer: Your 3D Printing EvolutionFITC
Graphic Designer to Object Designer: Your 3D Printing Evolution
with Paul Trani
Presented at FITC Toronto 2015
More info at www.fitc.ca
OVERVIEW
3D printing with Photoshop is here. Find out how Photoshop 3D printing capabilities let you create, perfect, preview and print your 3D designs. Also learn what you need to know to bring your images and designs into the physical world. In this fun and fast-moving session, Paul covers:
The fundamentals of 3D printing and the 3D printing industry
3D printing functionality in Photoshop CC
Finding and importing 3D models
Photoshop techniques for getting great-looking 3D printed objects
Ideas and inspiration to get you started and on your way
Untangle The Mess In Your Team’s Process
with Daniel Schutzsmith
Presented at FITC Toronto 2015
More info at www.fitc.ca
OVERVIEW
Project management in a studio or agency seems to be a black art. Some do it well, others struggle. There are numerous methodologies and frameworks out there to manage your projects well, but what about just managing the entire process, from conception to execution?
The truth is, we can learn a lot about managing our projects better by looking at how the programming world is evolving. We’ll learn to stay DRY, not become WET and define how each of us can individually lead our teams to better communication and morale.
We’ll take a look at some of the main ingredients behind a good creative and programming process, how to interact with clients and the team, look at some tools that will help (but not overwhelm us), and establish some really easy techniques that will make the whole thing run much smoother.
OBJECTIVE
Open the audiences eyes to following their own process that works best for their team.
TARGET AUDIENCE
Ideally a great session for freelancers, smallish studios, or teams at an agency. Designers, programmers, project managers, producers, etc…
ASSUMED AUDIENCE KNOWLEDGE
Have worked in a client – vendor relationship before. Familiar with the general creative process.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Some of the main ingredients behind a good creative and programming process.
How to interact with clients and the team.
Look at some tools that will help (but not overwhelm us)
Establish some really easy techniques that will make the whole thing run much smoother.
Give the audience member a good direction to go in to simplify their own process.
Presented at FITC Toronto 2016
See details at www.fitc.ca
Overview
The dreaded moment: you feel stagnant, creatively uninspired, maybe even, dare I say it… burnt out? Whether it’s a result of long hours or boredom through familiarity, being blocked can be disheartening —something we all experience in varying degrees. How can you bounce back from a creative block as a developer? How can you re-discover your own motivation and desire to make work that interests you?
This session will propose ideas and strategies to ban your inner critic and to embrace your inner 5 year old to stomp through creative blocks. We will look at the output of some of these ideas a from slightly burnt out developer – from programming experiments to mentoring initiatives.
Objective
Inspire attendees to find ways to keep their technical skills fresh by employing fun in their every day practice.
Target Audience
Developers and Designers looking for ways to re-discover motivation, and find ways to express what they want to say.
Five Things Audience Members Will Learn
How to identify the feeling of being burnt out
How to create a schedule that encourages play
How to get buy in from your employer
How to get work doing things you like
How to face the mundane stuff you need to do on a day to day
PageCloud Reimagines The Future of Website Creation with Craig FitzpatrickFITC
The way we publish to the Web is broken. For years, we’ve relied on pre-built HTML templates inside content management systems as our only way to publish content online. Designers hand off their creations to developers who meticulously hand-code basic templated layouts that take days or weeks. A lot of the magic of a design gets lost in translation due to the limiting technology of the day. When you simply want to move an image 1 inch to the right, the technology tells you you can’t.
What if you could crack open your browser, hit New Page, and just create? Straight from brain to page? No hand-coding? (Unless you want to!). What if every page on the Web was a starting point that you could use to take it in another direction and make it your own? What if the browser acted just like every other desktop publishing or design app you’ve ever used?
Now it does.
Objective
To show a brand new technology that is re-inventing what it means for anyone to create and publish to the Web.
Target Audience
Anyone involved at the front-end of web publishing (developers, designers, content folks), as well as any professional who has need of a website.
Five Things Audience Members Will Learn
Brief context of where web publishing came from, and how we got here
Demonstrations of a new technology that will dramatically improve the lives of those wishing to create original content on the Web
That web design, is in fact not dead
How to create an original (i.e. non templated) website as fast as you can dream it up
Show a whole new way to use a web browser, not just to surf the web, but to create it
An Intense Overview of the React EcosystemRami Sayar
React has been named the front-end library to learn in 2016 however few people talk about the React without mentioning Flux (or Redux or React Native or Relay). In this talk, we will explore the ecosystem of tools and libraries that surround React. We will look at the various Flux implementations (including a short explanation of Flux) like Redux, at react-router, at some of the reactive database or reactive API libraries and finally at everyday tools and techniques that make the React developer happy. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.
React has been named the front-end library to learn in 2016! React Native has also picked up tremendous steam as a way to build cross-platform apps with React. In this talk, Rami will do a quick 5 minute introduction to React's core concepts. Following, Rami will introduce React Native, discuss the differences between React & React Native, and show you how to build a simple Android application. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.
This document provides an introduction to React.js, including:
- React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture.
- Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React.
- Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.
Marcin Grzywaczewski, co-author of successful "Rails meets React.js" and "React.js by Example" books describes React in a friendly way to all Rails developers who'd like to learn React, but can't find generic tutorials friendly enough.
In this presentation you'll learn React.js basics by comparing it to a typical Rails views stack - and recognize the problem React.js solves for you. There are also 'mental transition' stages of thinking about frontend explained.
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community
Поговорим об эволюции в мире вэб-приложений, современных технологиях и фреймворках, которые используют в вэб-разработке сегодня.
Обсудим основные архитектурные принципы при создании вэб-решений для разных клиентов. Обсудим, как сделать и запустить бэк-энд на Asp.NET.Core в Visual Studio 2017. Далее поговорим, как написать и запустить фронт-энд с использованием React.JS, Redux, Routing, Bootstrap в IntelliJ IDEA 2017.
В конце доклада немного заглянем в будущее, что нас ждет в вэб-разработке завтра?
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon
This document discusses React, a JavaScript library for building user interfaces. It notes that React uses virtual DOM for faster rendering. React components render on state changes and use props and state as inputs. Scaling with React involves using Flux architecture and stores instead of MVC controllers. React can also be integrated with other frameworks like Backbone and Angular by triggering re-renders on data changes.
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon
This document discusses React, a JavaScript library for building user interfaces. It notes that React uses virtual DOM for faster rendering. React components render on state changes and use props and state as inputs. Scaling with React involves using Flux architecture and stores instead of MVC controllers. React can also be integrated with other frameworks like Backbone and Angular by triggering re-renders on data changes.
This document summarizes the Rails request lifecycle and describes various middlewares used in Rails. It begins by explaining what a request is and how it travels from the browser to the Rails application. It then discusses the roles of the web server and app server. The bulk of the document describes each middleware in the Rails stack, from Rack middlewares to ActionDispatch middlewares to ActiveRecord middlewares. It explains what each middleware does to filter requests and responses. Finally, it outlines how the request travels through the middleware stack to the routes, controller, and back out again to complete the response sent to the client.
This document introduces React on Rails, which allows using React, Redux, and React-Router within Ruby on Rails views. It discusses using Webpack and NPM to manage front-end assets, integrating React components with Rails, supporting features like hot reloading and server rendering, and sharing Redux stores between components. React on Rails provides helpers, configuration, and documentation to facilitate building JavaScript-rich UIs with Rails.
How To Upgrade The React 18 Release Candidate.pptxBOSC Tech Labs
The new react 18 release candidate is here. Here in this article you will learn how to upgrade to the react 18 release candidate. Read the article more details.
Ever wondered what React.js or its more common term ‘React’ is and why there is such a buzz about it in the software development community? Well, React is an open-source JavaScript framework and library developed by Facebook and it’s used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript. But we are sure, this won’t be enough for you and to know more about React and learn about its amazing features, GDSC NIT Silchar brings its next session “KICKSTART TO REACT” where we will explore React and how it can be used to build modern and interactive UI websites.
Introduction to react native with reduxMike Melusky
This document provides an introduction and overview of React Native with Redux. It begins with an introduction to React components, props, and state. It then covers building a sample React Native app and advanced concepts like navigation and Redux. The document compares React Native to other native frameworks and provides resources for learning more. It was presented at Philly.NET on March 24, 2018 and discusses topics like React basics, React Native, native navigation solutions, and integrating Redux.
React is a JavaScript library for building user interfaces using reusable components. The core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM. Everything in React is components that can interact with each other and maintain state. Data flows unidirectionally via state and props from parent to child components. The virtual DOM selectively re-renders the UI when the state changes, improving performance. Redux follows a similar unidirectional data flow architecture, with data moving from actions to reducers to the store.
This document summarizes a presentation about building modern web parts with React and Redux. It discusses why Microsoft is using React in Office 365 applications and how React combined with Redux helps build single page applications. It provides an overview of React components and state management. It also summarizes the basic principles of Redux, including how data is contained in the application and views are contained separately. The document shares code for an example FAQ web part built with React and Redux and diagrams the overall application structure and data flow.
Slide deck from React Native talk for Central Penn DotNet user group on 01/23/2018.
https://www.meetup.com/Central-Penn-Dot-Net-User-Group/events/245677212/
Similar to An Overview of the React Ecosystem (20)
1) The document discusses code splitting strategies for bundling JavaScript applications, including route-based code splitting, splitting on-demand components, and using the Split Chunks plugin.
2) It recommends optimizing lazy loading through techniques like prefetching and using IntersectionObserver to preload resources the user may visit.
3) The key code splitting strategies discussed are route-based splitting, splitting common dependencies, and splitting asynchronous or on-demand components.
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Andréa Crofts
League
Overview
Examining our responsibility as creators to design for disconnection.
The “restore connection” alert isn’t just for devices– it applies to people too. And it’s more important now than ever before.
Digital creators, we need to talk. The rise in mental health as a result of situational stress is a prevailing theme in today’s society, and some of the products we’re building are the root cause. But we have the power to change this. As creators of digital products, how might we enable our users to be more present in their lives? How might we invest in features like Instagram’s activity timer, despite the fact that they’re fundamentally counterintuitive to the usage metrics most behemoth tech companies are driving towards?
We have a responsibility as creators of digital products to enable others to disconnect …and re-connect with themselves, physically and mentally. This intersection is an emerging category Andrea likes to call digital health, and it’s something we can create together.
Objective
To share actionable strategies, principles and considerations for designing with digital health top of mind. Andrea will get into some #realtalk about how we can collectively create more balance and presence for the humans using our products.
Target Audience
Designers and digital creators of all kinds – especially those building digital products at scale!
Level
Open to audience members of any skill level (this is a more high-level talk)
Five Things Audience Members Will Learn
Tips and best-in-class examples of designing for digital health
Design guidelines and principles for designing with digital health in mind
Evidence-based practices to ground your future design decisions
Strategies for re-framing the success metrics of digital products
Design ethics resources
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Luke DeWitt
REDspace
Overview
JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it.
A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience.
The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements.
Objective
To help developers understand how to better make use of the JavaScript profiler.
Target Audience
Any JavaScript developers
Assumed Audience Knowledge
Basic JavaScript
Level
Beginner / intermediate
Five Things Audience Members Will Learn
Javascript inner-workings
Profiling concepts
Identifying bottlenecks
Profiling node applications
Tooling
presented at Web Unleashed 2019
For more info see https://fitc.ca/event/webu19/
Kevin Daly RBC Ventures
Every developer has faced the difficult choice of deciding what tech stack they should use for a new project. Should you use the latest tech or something that everyone knows? Which framework is the best for your team? To survive your tech stack, developers must make trade-offs with developing on new tech stacks and the ability to maintain and scale their applications.
In this presentation, you’ll learn how to evaluate your tech stack and understand the pros and cons of using bleeding edge technology. Using his past experiences, Kevin will also share his lessons learned and how his team tackles managing their tech stack today.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Bushra Mahmood
Unity Technologies
Overview
In this talk, Bushra Mahmood will explain how to articulate and pitch augmented reality as a viable medium to help solve problems. Learn about what makes an AR application come together on both mobile devices and headsets. Uncover different tools and methodologies for problem-solving and making a compelling story.
By properly understanding this technology and its parts, creatives can take an active role in shaping and defining this new space in computing.
Objective
Learn the tools and techniques required to pitch an augmented reality project.
Target Audience
Designers, product managers, product stakeholders.
Assumed Audience Knowledge
An understanding of product design and an awareness of AR
Five Things Audience Members Will Learn
The right language to use when explaining ‘spatial’ design
The different requirements and considerations for scoping an AR project
The tools that are currently available for AR authoring
Insights into what the near and far future will hold for this medium.
An example of an AR application pitch
Start by Understanding the Problem, Not by Delivering the AnswerFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Karri Ojanen
RBC Royal Bank of Canada
Overview
Over the past number of years companies have adopted the idea of customer-centricity. People across functions can fluently talk about the importance of paying special attention to end-user needs and overall customer experience.
But innovation and forward-thinking ideas that connect both customer and business needs can’t simply be squeezed out of brainstorm sessions and sticky notes if the organization doesn’t learn how to effectively look outside of its own silos. In this session, Karri will show how to move from jumping to solutions to driving innovation by understanding the question first.
Target Audience
Designers, researchers, strategists, product managers, and technology leads
Three Things Audience Members Will Learn
Methodologies and tools to form insights out of a holistic understanding of customer challenges
How to synthesize data to form a vision of the better future
How to break the vision into manageable chunks that drive value for the business and the customer at every launch
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Alan Williams
Imaginary Forces
Overview
During dailies as an intern at Imaginary Forces, Alan’s director, Karin Fong, would follow her animation feedback with one of the scariest and empowering questions of his career, “what do you think?” Over the last eight years, Alan’s transition from technician to creative director came from a dramatic shift in how he approached and answered that question. By examining larger conceptual principles to practical application in commercial and tv/film design, such as HBO’s Vinyl and Netflix’s Anne with an E, he will share hard-learned lessons that can empower you, whether in Photoshop, behind a camera, or pitching to clients, in developing and selling your creative voice.
Target Audience
Visual communicators eager to become more evocative storytellers
Five Things Audience Members Will Learn
‘Method branding’ in a selfie culture
O.C.D. (observe, collect, dissect) & the imagination
The resuscitating power of rearrangement
Pertinence vs pipeline: the crippling cage of routine
Less pitching, more poetry
Everyday innovation is defined as a daily process of introducing new ideas, devices, or methods through small improvements. There are different types of innovation, including empowering, sustaining, efficiency, and disruptive innovation. Everyday innovation focuses on making incremental improvements through collaboration, identifying opportunities by listening for user needs, and building habits of innovation. Effective collaboration and feedback are important to driving everyday innovation, with feedback working best when it is specific, goal-oriented, organized, relevant and timely.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Chris Zacharias
imgix
Overview
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way to than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
Objective
Learn a process for building a hyper-lightweight version of your website for establishing reasonable performance budgets, grounded in reality, to work from.
Target Audience
Web developers
Assumed Audience Knowledge
HTML, CSS, Javascript, some server-side awareness.
Level
Intermediate
Five Things Audience Members Will Learn
How to analyze a web page for performance issues
A holistic approach to deconstructing an existing website
A clear process for building a hyper-lightweight version of your website
Translating your findings into real performance priorities
Establishing a realistic performance budget
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Michael Fullman
VT Pro Design
Overview
An exploration of the process of creation. We live in a time where technology and inspiration are more readily available and accessible than ever before. That being said we also live in a time that mostly highlights the successes of projects and process. In this particular talk Michael wants to touch on the process of creation with technology at VT Pro, to further explore a full circle approach to inspiration and creation where often times our next project is inspired by something learned in the process of creating something else.
By exploring what went wrong and what went right in a number of different projects he’s created, Michael will touch on points where inspiration can be found in this world of seemingly endless technology; the importance of collaboration; what can be learned from the moments that don’t necessarily go as planned; and how often projects come close to failure than the audience ever knows. Lastly he wants to touch on the process of finding personal inspiration to inspire an audience, and the momentum to push further that comes from their energy.
Objective
Things often don’t go as planned, but often that’s the fun part.
Target Audience
Creative technologists and experience designers
Five Things Audience Members Will Learn
Collaborative process
Giving personality to a piece of technology
How to learn from the unexpected
We all start somewhere (the journey is just as important as the destination)
Everything is possible now
Post-Earth Visions: Designing for Space and the Future HumanFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Sands Fish
MIT Media Lab
Overview
Today, the environments that humans occupy in space are designed for survival. Humans are carefully shuttled to and from space, and during their relatively short stays, they are provided with minimum supplies to remain alive and able to perform experiments. As we begin to plan less for short visits and more for life in space (such as a six to eight month trip to Mars and beyond) the question becomes: What does human culture look like in space?
This talk will explore how human culture, design, and creativity might evolve as we begin to live in space, and the unique environmental conditions that might guide us in certain directions, just as the environment on Earth has. It will discuss space tourism, living in zero gravity, and some experiments in art and design that hint at future aesthetics.
Objective
Convey what opportunities exist at the outset of a more democratized New Space age, and call out the aesthetics, ethics, and cultural frontiers we find ourselves faced with at the end of the second decade of this century.
Target Audience
Those interested in the future of human life in space
Five Things Audience Members Will Learn
The history of human culture in space
Unique design constraints and considerations when designing for zero gravity
The experience of flying in a zero-g flight
The aesthetics at play in human spacefaring — (what has been)
New forms, new materials, new ideas — (what might be)
The Rise of the Creative Social Influencer (and How to Become One)FITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Lindsay Munro
Adobe XD
Overview
Your social network could be more valuable than the work you’re doing today, because it could (and should) lead to the opportunities you get tomorrow. Your next post could result in your next recommendation, job, collaboration, exhibit, and next level experience.
In this session, you’ll learn how to hone and build your online social media presence to attract brands and engage in the modern-day endorsement deal. Get a behind-the-scenes perspective on the things brands look for in creative profiles and the rules of engagement.
Objective
Teach the ins and outs of what it means to be a creative social influencer.
Target Audience
Creatives looking to up level their social media presence and strike brand partnerships.
Things Audience Members Will Learn
How to set yourself up for “success” on social media
The importance of working with the right brands
Figuring out compensation and negotiating contracts
The ins and outs of disclosure and liability
How to not mess it up
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Amelie Rosser
Jam3
Overview
For the past two years Jam3 worked alongside Joy Kogawa and the NFB to create East of the Rockies, an augmented reality storytelling experience.
East of the Rockies is the first interactive AR game of its kind. The story takes users through a piece of Canadian history where Japanese Canadians were forced to leave their homes and live at internment camps during WWII.
This talk will cover the creation of the game: from concept and storyboarding, to the development process in Unity and various challenges and questions to consider from a creator’s perspective.
Objective
To let the audience in on the behind the scenes of developing an AR experience like East of the Rockies.
Target Audience
For those interested in Augmented Reality storytelling and game development.
Five Things Audience Members Will Learn
AR techniques using Unity
Storytelling in AR
Prototyping interactions in AR
Game state management using Unidux
Game optimization techniques in Unity
The Knowledge Society: Three Talks About the Future
Futurism Innovation Science
Isabella Grandic
The Knowledge Society
Overview
Join three incredible, young, and brilliant minds as they present their findings on topics that we’ll all have to deal with in the not so distant future. This series of talks will explore how exponential technologies like synthetic farming, nanotechnology, and quantum computing can be used to solve some of the world’s most difficult problems.
The speakers are all students of The Knowledge Society (TKS), a human accelerator for high school students designed to help them impact billions. TKS encourages students to take risks and think big.
Ayaan Esmail‘s talk will cover creating a proactive healthcare system
World Transformation: The Secret Agenda of Product DesignFITC
R.C. Woodmass
Crescendo
Overview
The reports are in: how we relate to technology directly affects how we relate to other humans, to our environments, and to ourselves. Are we headed for a technological dystopia, where robots are in charge and empathy is just a word for the history books? Not necessarily! Learn how the interfaces we interact with can teach us how to be better communicators, increase our understanding of each other, and how product design might be the key to building a positive future for all.
Objective
Directly address fear and skepticism about technology, inspiring all who design and build tech to think more empathetically when building UX and UI.
Target Audience
Product designers, HR specialists, and anyone skeptical about technology
Three Things Audience Members Will Learn
How to create user interfaces that are flexible enough to include everyone, even if they can’t keep up with all the different identities and new labels that people are using
What is conversation design, and how it has the power to teach people how to communicate
How AI has the potential to be more inclusive than previous data analysis systems, if we leverage its weaknesses to the human advantage
This document discusses various topics related to video games and digital media including the power of now, video games from PlayStation and PC demos, games editors, live events featuring popular musicians, current uses of augmented reality, and real-time ray tracing technology. It features various images related to the topics.
Hasan Ahmad
Aquent DEV6
Overview
PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective.
Target Audience
Web development teams
Assumed Audience Knowledge
Web Development fundamentals
Objective
Large enterprise applications
Five Things Audience Members Will Learn
Why PWA’s require performance engineering
What tools are available to measure performance metrics
Offline caching strategies
Host device considerations: desktop and mobile
Taking advantage of background code: Service Workers
The document discusses the rise of the JAMstack, which stands for JavaScript, APIs, and Markup. It describes how the JAMstack architecture uses static sites, content managed by headless CMSes, and APIs to provide performance and security benefits compared to traditional monolithic frameworks. Key advantages of the JAMstack include faster load times, higher security since there are fewer moving parts, and easier scalability using CDNs. The document outlines the various ingredients that make up the JAMstack like static site generators, hosting providers, and serverless functions, and provides examples of how popular sites have benefited from adopting this architecture.
From Closed to Open: A Journey of Self DiscoveryFITC
Midge “Mantissa” Sinnaeve
Mantissa
Overview
Midge will be speaking about his experience of switching to open source applications for his freelance work. From ditching expensive software subscriptions to going down the linux rabbit hole, he’ll take you along for the ride and show you some cool stuff along the way.
It’s an in-depth look at what happens when your digital tools become an extension of yourself and how that can in turn inspire you to get better as an artist and find your style.
Objective
Taking a critical look at how you work and why.
Target Audience
(Motion) designers, 3D & VFX artists
Four Things Audience Members Will Learn
Open Source Design Tools
Self-criticism
Inspiration
Letting go
This document discusses several art projects including 42 SKULLS which offers limited edition prints, THE LIGHTS, and SOFT BOTS. It also mentions UWATELA's new materials and presentation as well as AMERDAHL.
MangoHost.net is a premier hosting provider known for its high-quality, reliable, and
secure hosting solutions. With a focus on customer satisfaction and technological
innovation, MangoHost.net offers a wide range of services, including dedicated
servers, VPS hosting, and now RDP VPS Hosting, to meet the diverse needs of
businesses and individuals around the globe
Best CSS Animation Libraries for Web DevelopersShrestha Raaz
Best CSS Animation Libraries for Web Developers. CSS animations have revolutionized web design by adding dynamic and engaging elements to websites without relying on JavaScript. These animations enhance user experience, making websites more interactive and visually appealing. There are several CSS animation libraries available that can simplify the process of implementing animations on your website. This blog post will explore ten of the best CSS animation libraries, each with more than 300 words dedicated to explaining their features, benefits, and how to use them.
Do it again anti Republican shirt Do it again anti Republican shirtexgf28
Do it again anti Republican shirt
https://www.pinterest.com/youngtshirt/do-it-again-anti-republican-shirt/
Do it again anti Republican shirt,Do it again anti Republican t shirts,Do it again anti Republican sweatshirts Grabs yours today. tag and share who loves it.
This presentation about Software Defined Networking including Understanding the problem, Traditional network vs. SDN,Basic Concepts,Role of OpenFlow Protocol
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...QingjieDu1
**SisAi = Software is AI**
SisAiWorld is a versatile software platform based on AI models. By using templates provided by AI experts, users can effectively utilize various software functions and services.
**Benefits for General Users:**
Users can instantly apply expert knowledge to their own needs and business, and customization to fit their requirements is easy. By entering background information in advance, efficiency is improved, and collaborative work with other users is possible. Additionally, users can share their own ideas.
**Benefits for AI Experts:**
By hiding critical parts of the prompt from users, intellectual property rights are protected, and the service is used continuously rather than just once. Improvements can be quickly provided to users, and multi-language support makes it available to users worldwide. The platform supports both public and restricted access to specific users or organizations. Upcoming features will include support for both pay-per-use and subscription models.
Trump fist pump t shirts Trump fist pump t shirtsexgf28
Trump fist pump t shirts
https://www.pinterest.com/youngtshirt/trump-fist-pump-t-shirts/
Trump fist pump t shirts,Trump fist pump shirt,Trump fist pump sweatshirts Grabs yours today. tag and share who loves it.
Choosing the right web hosting provider can be a daunting task, especially with the plethora of options available. To help you make an informed decision, we’ve compiled comprehensive reviews of some of the top web hosting providers for 2024, with a special focus on Hosting Mastery Hub. This guide will cover the features, pros, cons, and unique offerings of each provider. By the end, you’ll have a clearer understanding of which hosting service best suits your needs.
Trump Assassination Shirt
https://www.pinterest.com/youngtshirt/trump-assassination-shirt/
Trump Assassination Shirt,Trump Assassination T Shirts,Donald Trump Assassination Shirt,Trump Assassination sweatshirts Grabs yours today. tag and share who loves it.
3. • Introduction to React & the Ecosystem
• What is Flux
• What is Redux
• What is Relay (and other Reactive Databases/APIs)
• What is React Native
• Useful React Dev Tools
@RAMISAYAR
7. • React is a UI *library* developed at Facebook.
• Lets you create interactive, stateful & reusable UI components.
• React can be used on both the client and server side.
• Uses a Virtual DOM to selectively render subtrees of
components on state change.
@RAMISAYAR
8. • Adds this weird thing to your HTML called JSX.
• Let’s you write HTML-ish tags in JavaScript to simplify creating
components.
var HelloWorldComponent = React.createClass({
render: function(){
return ( <h1>Hello, world!</h1> );
}
});
@RAMISAYAR
9. • Added attributes are called props and can be used to render
dynamic data.
var HelloNameComponent = React.createClass({
render: function(){
return ( <h1>Hello, {this.props.name}!</h1> );
}
});
ReactDOM.render(<HelloNameComponent name="Rami"
/>, document.getElementById('app'));
@RAMISAYAR
10. • Every component has a state object and a props object.
• Functions & Objects:
• getInitialState – Return value is the initial value for state.
• setState – Sets the state and triggers UI updates.
• getDefaultProps – Sets fallback props values if props aren’t supplied.
• mixins – An array of objects, used to extend the current component’s
functionality.
@RAMISAYAR
11. • React events are attached as properties and can trigger
methods.
• Data flows unidirectionally via the state and props objects.
• React seams to rerender the whole app on every data change
but really it only ends up rerendering the parts that changed.
• To assign CSS classes you have to use className.
• You can use ES6 Classes instead of the createClass function.
@RAMISAYAR
13. • Flux is the architecture that Facebook uses for building client-
side web apps.
• More of a pattern rather than a framework.
• Flux doesn’t follow MVC in favor of a unidirectional data flow.
• Flux architecture is composed of four major parts: Dispatchers,
Stores, Views and Actions.
@RAMISAYAR
14. • Dispatchers are the central hubs that manage data flow.
• Essentially registry of callbacks into Stores.
• When Actions passed into the central Dispatcher, they are
redistributed to the Stores.
• Dispatchers manage dependencies between Stores.
• Stores contain the application state and logic (sort of like the
Model in MVC)
• Stores register themselves with the Dispatcher to receive Actions via a
callback.
• Actions describe state changes in the Store.
• Stores broadcast an event saying they have changed so Views can
update.
@RAMISAYAR
15. • Views are the React Components.
• React Components are composable and are typically nested in a tree
hierarchy.
• A special “App View” behaves like a controller-view and provides glue
code to propagate states down the chain.
• Events cause Views to request the State from a Store to setState() so
that render() will be executed.
• Actions describe a change and include a payload of data.
@RAMISAYAR
17. • Several Different Implementations of Flux:
• Flux by Facebook
• Redux by Dan Abramov
• Alt by Josh Perez
• Reflux by Mikael Brassman
• Fluxxor by Michelle Tilley
@RAMISAYAR
19. • “Redux evolves the ideas of Flux, but avoids its complexity by
taking cues from Elm.”
• “The Gist of Redux
• The whole state of your app is stored in an object tree inside a
single store.
• The only way to change the state tree is to emit an action, an object
describing what happened.
• To specify how the actions transform the state tree, you write
pure reducers.”
Source: https://github.com/reactjs/redux
@RAMISAYAR
21. • React Router keeps your UI in sync with the URL.
• Features like lazy code loading, dynamic route matching, and
location transition handling are built in.
• Use react-router-redux to sync routing state with your Redux stores.
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
@RAMISAYAR
22. • reselect is a selector library for Redux
• Compute derived data => reduces size of the state object in Redux
• Efficient way to handle computing derived data => don’t recompute
state if arguments didn’t change. Selectors are composable.
const shopItemsSelector = state => state.shop.items;
const taxSelector = state => state.shop.taxPercent;
const subtotalSelector = createSelector( shopItemsSelector,
items => items.reduce((acc, item) => acc + item.value, 0)
)
const taxSelector = createSelector( subtotalSelector,
taxSelector, (subtotal, taxPercent) => subtotal * (taxPercent /
100)
)
@RAMISAYAR
23. • Immutable.js provides immutable collections and data
structures.
• Immutable: Once created, cannot be altered at another point.
• Persistent: Both original and mutated collections are valid.
• Structural Sharing: New collections are created using the same
structure as the original collection to reduce copying and achieve
space/performance efficiencies.
• List, Stack, Map, OrderedMap, Set, OrderedSet and Record.
• Use in combination with Redux.
@RAMISAYAR
24. • Flux Standard Action is a human-friendly standard for Flux
action objects.
• Action objects must be plain JavaScript objects and have a type
property.
• They can also have an error, payload and a meta property.
• Use with:
• redux-actions - a set of helpers for creating and handling FSA actions
in Redux.
• redux-promise - Redux promise middleware that supports FSA actions.
@RAMISAYAR
27. “Foundation Apps is a new framework for building web
apps. It has awesome new features like flexbox based
grid, motion-ui, and several core components for
building web apps.” https://github.com/akiran/react-
foundation-apps
@RAMISAYAR
28. • Elemental UI is a UI Toolkit for React.js Websites and Apps
@RAMISAYAR
29. “This is a collection of some of the most
reusable React components built at Khan Academy. […]
We're trying to make it just as easy to jumpstart React
applications with a well-tested, thoughtful, and beautiful
library of components.” http://khan.github.io/react-
components/
@RAMISAYAR
31. • Relay is a JavaScript Framework for Building Data-Driven React
Applications by Facebook.
• Declarative: Use GraphQL to declare data requirements and let Relay
figure out how and when to fetch data.
• Colocation: Queries live next to views. Relay aggregates queries for
network efficiencies.
• Mutations: Relay lets you mutate data on the client and server using
GraphQL.
@RAMISAYAR
32. • Falcor is a JavaScript library for efficient data fetching by Netflix.
• One Model Everywhere: Represent remote data as a JSON graph. Treat
data the same everywhere (in memory, client, network, etc).
• Data is the API: JavaScript-like path syntax to access data. Retrieve data
using JavaScript operations like get, set, and call.
• Bind to the Cloud: Falcor automatically traverses references in your
graph and makes requests as needed. Falcor transparently handles
and aggregates requests for network efficiencies.
@RAMISAYAR
33. • React Resolver lets you define data requirements per-
component and will handle the nested, async rendering on both
the server & client for you.
@resolve("user", function(props) {
return http.get('/api/users/${props.params.userId}');
})
class UserProfile extends React.Component {
render() { ...
@RAMISAYAR
35. • React Native by Facebook enables you to build on native
platforms using JavaScript and React.
• React Native focuses on developer efficiency — learn once,
write anywhere.
• Supports iOS and Android.
@RAMISAYAR
36. • Use standard platform components such as UITabBar on iOS
and Drawer on Android.
• Apps have a consistent look and feel with the rest of the
platform ecosystem and have native performance.
• Operations between JavaScript and the native platform are
performed asynchronously.
• Communication is fully serializable, allows you to debug the
JavaScript while running the complete app, either in the
simulator or on a physical device.
@RAMISAYAR
38. • Adds a new tab titled "React" in your Chrome DevTools.
• Shows list of the React Component hierarchy.
@RAMISAYAR
39. • babel-plugin-react-transform wraps React components with
arbitrary transforms. In other words, it allows you to instrument
React components in any way—limited only by your
imagination.
• react-transform-hmr - enables hot reloading using HMR API
• react-transform-catch-errors - catches errors inside render()
• react-transform-debug-inspector - renders an inline prop inspector
• react-transform-render-visualizer - highlight components when
updated
@RAMISAYAR
42. • A cloud service that enables Cordova and React Native
developers to deploy mobile app updates directly to their
users’ devices.
• Manage alpha, beta and production apps.
• Cordova and React Native ready.
• http://codepush.tools
@RAMISAYAR
43. • Babel, ES2015 Compiler: https://babeljs.io/
• Special support for JSX & React
• Support for extensions and plugins
• Google Traceur, ES6 Compiler:
https://github.com/google/traceur-compiler
#WebNotWar - @RAMISAYAR
44. npm install --save-dev babel-cli
• You can setup babel to watch your files and automatically
compile by using Grunt & Gulp.
babel ./src --out-file app.js --presets es2015
• Babel will also add any missing features for browsers that
already support ES6. Babel has presets for ES7 features, React,
etc.
#WebNotWar - @RAMISAYAR
46. • A static website starter kit powered by React.js and Webpack.
✓ Generates static .html pages from React components
✓ Generates routes based on the list of files in the /pages folder
✓ Next generation JavaScript with Babel
✓ Sass syntax for CSS via postCSS and precss
✓ Development web server with BrowserSync and React Transform
✓ Bundling and optimization with Webpack
✓ Yeoman generator (generator-react-static)
@RAMISAYAR
47. • React Starter Kit is an opinionated boilerplate for web
development built on top of Facebook's React library, Node.js /
Express server and Flux architecture.
• Containing modern web development tools such
as Webpack, Babel and Browser Sync.
@RAMISAYAR
48. • MERN is the easiest way to build isomorphic JavaScript apps
using React and Redux.
• MERN is a scaffolding tool which makes it easy to build
isomorphic apps using Mongo, Express, React and NodeJS.
@RAMISAYAR