Sessions

Tuesday, 10th Sep

Marvel Stadium, Melbourne

The conference is featuring two stages.

Speaker Rodolfo Dias Photo

Have you noticed how big is the magic behind the scenes in the cinema? The fact that the same artist can have a totally different face and behavior from one movie to another?

 

Now imagine all of that power in your hands. Being able to give a new face to your components and even a new behavior, based only on which application it is placed at. Wow, That's crazy, isn't it?

 

Let's see how to make the dreams come true using React + StyledComponents, to create a component lib able to make your apps look more stylish and give you a fun development experience.

Rodolfo Dias

ToolTime GmbH | Berlin, Germany

Google Developer Expert in Web Technologoes

Frontend Engineer at ToolTime GmbH

How Cinema, React and Styled Components are Alike?

09:20 | Hulk Stage

Gerard-Sans_componentsconf.jpg

What is exactly Ivy Renderer? What features will affect the way we build apps? How can we benefit for this technology? In this presentation I will cover these and other fundamental questions while demonstrating all the features available today!

Gerard Sans

AWS | London, UK

Google Developer Expert in Angular

Developer Advocate at AWS

Ivy Renderer for Dummies

09:20 | Iron Man Stage

pic_400x400.jpg

Vue 3 brings us a new feature: composition functions, a way of declaring component logic using function calls.

In this talk I will show how composition functions work and in which cases they are better than 'usual' object syntax.

Natalia Tepluhina

GitLab | Kyiv, Ukraine

VueJS Core Team

Google Developer Expert in Web Technologies

Senior Software Engineer at GitLab

Looking into the Vueture: Composition Functions

10:20 | Hulk Stage

John Bristowe.jpg

Kendo UI is a component library featuring native components for jQuery, Angular, React, and Vue. In this talk, I'll provide a deep dive into Kendo UI. Specifically, the many components it consists of and how they work. I'll also highlight the observations we've made about the frameworks we support.

We build components for developers. Kendo UI is the component library we've built for the past 8 years. We've put a great deal of blood, sweat, and tears into it. Furthermore, we've witnessed the evolution of supporting frameworks (i.e. React) and built our components to target them. We have quite a few battle scars to show for it.

 

Ultimately, I'd like this talk to not only highlight what we've accomplished with Kendo UI but also to share our experiences building it -  especially in light of the trends we've seen with web frameworks over the past few years. We've had many debates about the direction of the product. I'd like to provide insight into our decision making. It would help the audience understand all of the nuances that go into the decision to support a framework when building components.

John Bristowe

Progress/Telerik | Gold Coast, Australia

Developer Relations at Progress/Telerik

A Deep Dive into Kendo UI

10:20 | Iron Man Stage

MikeRyan-400x300.jpg

One of the biggest challenges building out large Angular applications is the management of complexity, but where does this complexity come from? Both state management and control flow are some of the largest contributors to unwieldy, hard-to-maintain code.

Learn how the design of NgRx helps you manage this complexity by exploring the architectural underpinnings of functional, reactive Angular applications.

Complexity Management with NgRx

11:10 | Hulk Stage

jennifer-wong_edited.jpg

We often use React and write JSX without thinking about the syntax. But what’s React actually doing under the hood? What’s that JavaScript look like?

 

Let’s translate React into JavaScript then transpile that and see what we get. Let’s pick apart what React is really doing. We’ll get at the heart of React. We’ll talk about the importance and usefulness of knowing its baselines for beginners and experts alike.

 

From that, we’ll gain a clearer understanding of where React’s magic originates. So the next time you use React or write JSX, you’ll be secretly translating in your head for deeper insight and edification.

Translating React

11:10 | Iron Man Stage

diana-mcdonald.jpg

Virtual DOMs give us an excellent developer experience but their diffing algorithms can have surprising implications. This lightning talk looks at how double announcer regions work to support screen readers and when you might use the Web Speech API instead.

Diana MacDonald

Culture Amp | Melbourne, Australia

Product Designer at Culture Amp

When Virtual DOM Diffing is a Little Too Clever

12:00 | Hulk Stage

phil-nash.jpg

Third party JavaScript, tracking scripts, iframes! What are you doing with all those share buttons on your site?

 

The Web Share API is here and you should know about it! It's not just a new API though, it brings benefits to your users you may not have thought of.

 

Let's investigate how the web platform is solving problems you didn't know you had and making sharing a more caring part of the web.

Phil Nash

Twilio | Melbourne, Australia

Google Developer Expert in Web Technologies

Developer Evangelist in Twilio

Web Sharing is Web Caring

12:00 | Iron Man Stage

jenn_creighton.jpg

React is more than a framework – it’s a collection of design decisions. But the history of those decisions is hidden from most engineers. Details behind reconciliation, lifecycles, renders, Suspense, etc. are unseen… except on Twitter.

 

This talk is a collection of Dan Abramov and other Core Team members’ tweets, with relevant source code, to guide attendees in deepening their understanding of React and its internals.

Dan recently talked about explaining the "less shiny corners" of React and I completely agree with him and the responses: this knowledge isn't Need to Know but it's Good to Know and can make you better engineer (both in JavaScript & React).

Everything I Know about React I Learned from Twitter

13:20 | Hulk Stage

willmendesneto-800x600.jpg

In large frontend codebases, concise components are the key for the success of your application. Decisions can be done based on the user journey: better ways to improve performance by code-splitting, memory consumption, flexibility or even A/B testing. What if we can use a data-driven approach in a component level and mitigating any possible risk involved?

In this talk, I will share my experience and decisions using hypothesis and data-driven development effectively to release the new navigation in Jira, the most famous project management in the world! How to use some component patterns for A/B testing, performance and bundle size improvements and all the journey around the new navigation in Jira.

Wilson Mendes

Atlassian | Sydney, Australia

Google Developer Expert in Angular & Web Technologies

Software Engineer at Atlassian

Data-Driven Frontend Components and the New Jira Navigation

13:20 | Iron Man Stage

Speaker Martin Splitt Photo

I am sick and tired of SEOs, marketing folks and developers spreading fear, uncertainty and doubt about SEO and JavaScript.

 

In this talk I want to give web developers a sound understanding of how Googlebot and other crawlers see your content and what are common pitfalls to avoid.

 

We will look into

  • How crawlers find and index your content

  • The fundamentals for React, Angular and Vue.js apps

  • Common misconceptions and mistakes and how to avoid them

  • Debugging tools and techniques to make sure people can find the things you put on the web

Technical SEO for JS Web Apps

14:00 | Hulk Stage

mark-dalgleish-componentsconf-2019.jpg

Thanks to modern component-oriented architectures, the front-end community has been naturally gravitating towards design systems as a way of standardising our respective design languages into reusable components. When done successfully, it suddenly becomes trivial to translate standard designs into code. In fact, we may even find that this translation step starts to feel somewhat redundant.

 

In a world of components, how should our design processes change? How should our tooling change? How should we, as front-end developers, better enable this change? In this talk, we'll look at the current state of design and development, and where we could go— if we're willing to push for it.

Mark Dalgleish

Seek | Melbourne, Australia

Front-end Engineering Lead at SEEK

Designing with Components

14:00 | Iron Man Stage

Sani-Yusuf-400x300.jpg

Reactive Forms are a mainstay in the Angular ecosystem yet a lot of developers limit their usage to just Login pages or traditional input collection.

 

In this talk, I will showcase how you can take advantage of the full power of Reactive Forms to build some really powerful state-driven solutions. This talk will be based on a real-world personal experience of building complex data-driven healthcare solutions with Reactive Forms. I will also showcase some really common use cases in a lot of angular applications that may not be obvious for the application of Reactive Forms. We will explore the hierarchy of Reactive Form Controls and showcase some smart ways to implement custom validation inside of your Angular application.

 

The main aim of this talk is to enable users to be aware of what is at their disposal and how they can take advantage of the full power of Reactive Forms.

Let's Build a Form Around It

14:40 | Hulk Stage

Yaser_Adel_Mehraban.jpg

Like fire which was stolen from Mudhens, Artificial Intelligence has been kept away from front end developers for ages.

 

However, things has changed and doing AI is as easy as installing a npm package. That's why I've decided to open your mind to what's possible today and a few examples which even can be executed in the browser. You don't need to have any background in AI or Maths, just a curious mind and a willingness to try.

This talk was inspired by some recent projects which was shown during Google IO and the possibilities which TensorFlow.js opens up for businesses. Now that you can run machine learning even on your mobile, it is very important to show front end developers of what is possible and how to get started in under 30 mins. From converting a Keras model and use it for prediction to create a neural network from scratch, train it and use it in the browser it is all a matter of minutes only.

Yaser Adel Mehraban

Readify | Melbourne, Australia

Lead Consultant at Readify

AI and JavaScript, no You're Not Dreaming

14:40 | Iron Man Stage

alex-hinson_edited.jpg

React Native has opened the door for many web developers to start creating native mobile apps for the first time using the same framework they already know - React. We're able to create some amazing apps and experiences, yet inevitably, the problem of deployment comes around. How do we actually get it to the App Store? A quick search will lead you to dozens of different potential solutions, yet its tough to know what approach might work best for your app.

 

At Airship, we've been working with React Native for over 3 years, and over that time we've explored almost every possible way of deploying React Native apps, and gained quite a bit of experience along the way. This talk will focus on narrowing down the many options available for deploying React Native apps while weighing the pros and cons of each.

 

In the end, you'll have a much better idea of what React Native deployment entails, as well as what path would be best suited for your company and app.

The Final Push: Deploying React Native

15:50 | Hulk Stage

Craig-Spence-ComponentsConf.jpg

WHHHHOOOOOSSSSHHHHHHH!!!!!! ​

 

Did you hear that!? It’s the sound of a blazing-fast Angular Universal application, rocketing it’s way straight to a users' device! Angular Universal promises a solution to all the super hard problems - improved first render performance, search crawler support, and server-client state-transfer... but what does it really look like in the real world? ​

Let's explore what is actually involved in getting Angular Universal up and running, as we go through some of the lessons learned from moving a big Angular application to the server. Come to unlock the secrets of the universe, as we explore how to launch our Angular apps to Infinity and beyond!

Universally Speaking

15:50 | Iron Man Stage

amir-photo-400x400.jpeg

As developers, we're building the most advanced applications the web has ever seen, and we're investing more than ever in patterns, frameworks, and tools for building these apps. But building the app is only half the battle. We must also properly test our apps, and reliably ship them with a high level of confidence to ensure quality.

 

However, end-to-end (E2E) testing web apps in real browsers has historically been a non-trivial task. Test tool setup, writing tests, resolving failures, handling flakiness, waiting on long CI jobs, etc. consume a lot of precious time, and cause a lot of headaches. This all adds a layer friction that often leads to developers doing very little to no E2E testing.

 

This no longer has to be the case, as there are now modern open-source tools like Cypress, that enable fast and reliable testing of web apps in real browsers while providing a developer experience that will actually make you want to write tests.

 

In this session, we'll dive deep into Cypress and the associated tools, patterns, and ecosystem, so we can all ship with confidence.

Ship Web Apps Confidently: Reliable and Developer Friendly End-to-End Testing with Cypress

16:30 | Hulk Stage