"React applications Failures", Nikita Galkin

•

0 likes•131 views

During this talk, Nikita shared several stories from real projects, how the wrong decision (choosing the wrong protocol, lack of system design, etc.) increased the time and cost of the project.

Technology

Nikita
Galkin
Love and Know:
▰ How to make developers and business happy
▰ Technical and process debt elimination
Believe that:
▰ Any problem must be solved at the right level
▰ Software is easy. People are hard
▰ A problem should be highlighted, an idea should
be "sold", a solution should be demonstrated
Links:
Site GitHub Twitter Facebook
2

▰ Telegram channel, daily
▰ Voice chat, weekly
▰ Workshops, coming soon

Sharing your failures,
to turn mistakes into lessons

Creating new
features and ﬁxing
bugs was so diﬃcult
that after the team
leader left,the
application was
rewritten from
scratch.

L
E
A
R
N
E
D
L
E
S
S
O
N
S
▰ Don't shift responsibility from
Backend to Frontend
▰ GraphQL is good for Backend for
Frontend
▰ Browser cache is the simplest
way for speed appl

Tech Stack
▰ React
▰ Redux Toolkit
▰ React-Bootstrap
▰ REST as protocol
▰ Nest.js on BE
▰ PostgreSQL

Some users have
complained that the
search shows
irrelevant results.
Others have said that
the search does not
ﬁnd anything.
Development took two weeks.
Bug hunting – 3 months.

Bugs were on FE:
▰ Pagination state was
not reset after search
▰ Search input without
debounce

L
E
A
R
N
E
D
L
E
S
S
O
N
S
▰ The ﬁrst time you will fail a new
feature even if you are Senior.
▰ Search analytics is very useful
for business
▰ Backend logs help

The project:
▰ Ecommerce
▰ New version with better
UI and new tech stack
▰ Smaller conversion rate

Long loading time ﬁxes
1. SPA
2. SPA + CDN
3. Next.js Server-side
Rendering
4. Next.js Static
Generation

L
E
A
R
N
E
D
L
E
S
S
O
N
S
▰ Use CDN and HTTP 2
▰ For some cases SPA is bad, JAM
stack can be better tech stack
▰ A/B testing

The project:
▰ Tinder for Gamers
▰ From scratch
▰ Business has
inﬂated expectations
▰ Goal 5.000.000
users in a year

Backend:
▰ Microservices
▰ GraphQL
▰ Premature Service
Cost optimization
for expected users
count

Frontend:
▰ Custom design
▰ No CI/CD
Development:
▰ Hard integration
▰ Failed milestones
▰ Any requirement
change – refactoring
▰ The release never
happened

L
E
A
R
N
E
D
L
E
S
S
O
N
S
▰ Use design system with
development-ready components
▰ Make stable developer
environment
▰ Small iteration with regular
integration for testing product and
tech stack
▰ The ﬁrst version will be thrown out

Requirements
▰ Lessons scheduling
▰ Homeworks
▰ Payments
▰ Video calls
▰ Pair work of student
and teacher on one
material in real time

Implementations
1. REST + WebSockets
2. REST + WebSockets
with resubscribe
3. WebSockets
But Google Docs won…

Multi User real time
application are hard
because of data
conﬂicts. Instead of
implementation BE,
better use Firebase
RTDB.

L
E
A
R
N
E
D
L
E
S
S
O
N
S
▰ It’s better to test technology on a
small feature.
▰ In certain situations, the right or
wrong technical solution does not
matter.

The document discusses the scaling challenges of the Facebook application "Six Degrees of Separation" as it grew enormously popular. It describes how the app was initially built by a small team quickly and grew to over 200,000 users, causing performance issues. Various hacks and infrastructure changes were made to improve scaling, such as moving processes to iframes, adding servers, and redesigning database queries. The author emphasizes designing applications with scaling in mind from the start to avoid significant reworks later.

SCALING APPS - Karl Bunyan 28th November

guestbc2fbe

The document discusses the scaling challenges of the Facebook application "Six Degrees of Separation" as it grew enormously popular. It describes how the app was initially built by a small team quickly and grew to over 200,000 users, causing performance issues. Various hacks and infrastructure changes were made to improve scaling, such as moving tasks to iframes, separating databases, and redesigning queries, but it was clear the original architecture could not scale indefinitely. The key lessons are to design for scale from the beginning when possible and communicate with users during challenges.

Никита Галкин "Technical backlog: инструкция к применению"

Fwdays

Дилемма “новые фичи быстро VS технический долг” известна всем. Одним из инструментов её решения является ведение технического бэклога. В ходе доклада мы поговорим: что такое технический бэклог; чем и как его наполнять; как “продавать” элементы технического бэклога заказчику и команде; и, конечно, как проводить демо элементов техбэклога. Содержимое доклада будет интересно, всем членам команды. Результатом применение идей и инструментов из доклада станут улучшение эстимейтов, налаженность технических процессов и управляемость техническим долгом.

Technical Debt Management

Mark Niebergall

Mark Niebergall presented on reducing technical debt by avoiding adding new debt, paying off existing debt through a repeating process, and tips on when to refactor code versus initiating a rewrite. He defined technical debt as consequences of poor design and architecture that are incurred knowingly and inadvertently. Examples of debt include unused code, outdated technology, and overcomplicated code. Sources of debt include changes to libraries, frameworks, and inexperience. Paying off debt requires identifying issues, prioritizing work, and making improvements over time through consistent effort.

H2O World - Building a Smarter Application - Tom Kraljevic

Sri Ambati

This document discusses building smarter applications that incorporate machine learning models. It provides an overview of combining predictive models with applications, deploying models in production, and a concrete use case of a consumer loan application. The use case involves building two predictive models using H2O - one for predicting if a loan will be bad, and one for predicting the interest rate. The document outlines the steps to build such a smarter application and integrate predictive models via a REST API. It also describes the data, models, and software tools used in the example application code provided.

Resume

Anu Dubey

This document contains the professional summary and details of Anu Kumari. It outlines her over 4 years of experience as an IT Analyst at Tata Consultancy Services working on banking and financial software projects. It describes her roles and responsibilities which include requirements analysis, system design, development, testing, production support, and leading a team. It also provides details of two projects she worked on - GAN and DCP for American Express, the technologies used, and her contributions to those projects. Lastly, it includes her educational qualifications and training.

PostgreSQL Conference: West 08

Joshua Drake

The document discusses recent developments and plans for PostgreSQL over the next six months. It outlines a new development model of commit fests to increase transparency. It also discusses expanding non-profit infrastructures to support PostgreSQL communities internationally. Certification milestones are noted along with a new integrated replication offering for PostgreSQL. Plans are described to further engage with higher education and continue courting developers to expand PostgreSQL adoption.

The document discusses the scaling challenges of the Facebook application "Six Degrees of Separation" as it grew enormously popular. It describes how the app was initially built by a small team quickly and grew to over 200,000 users, causing performance issues. Various hacks and infrastructure changes were made to improve scaling, such as moving tasks to iframes, separating databases, and redesigning queries, but it was clear the original architecture could not scale indefinitely. The key lessons are to design for scale from the beginning when possible and communicate with users during challenges.

Никита Галкин "Technical backlog: инструкция к применению"

Fwdays

Technical Debt Management

Mark Niebergall

H2O World - Building a Smarter Application - Tom Kraljevic

Sri Ambati

Resume

Anu Dubey

PostgreSQL Conference: West 08

Joshua Drake

Usable Software Design

Alexandru Bolboaca

Developer Productivity Engineering with Gradle

All Things Open

Presented by: Justin Reock & Sterling Greene Presented at the All Things Open 2021 Raleigh, NC, USA Raleigh Convention Center Abstract: In 2007, Hans Dockter invented the Gradle Build Tool because he felt that developers deserved less friction in their toolchain. The prevailing build technologies of the time were adequate but inefficient, not taking advantage of possible acceleration technologies and, with some exceptions, very limited in their language and framework support. Gradle is now one of the most widely used build tools available, downloaded about 25 million times a month as of September of 2021. It’s the default build tool in Android Studio, and is trusted by millions of developers to create their artifacts quickly and cleanly. The principles that originally guided the Gradle build tool towards its current popularity have continued into an emerging practice known as Developer Productivity Engineering or DPE. DPE is a new software development practice that uses acceleration technologies to speed up the software build and test process and data analytics to optimize the impact of acceleration technologies and make troubleshooting more efficient. Leading technology companies are using this practice today to accelerate feedback cycles by over 90% in some cases, improving the developer experience and increasing team velocity. Join Sterling Greene, Lead Software Engineer for the Gradle Build Tool, and Justin Reock, Field CTO of Gradle Enterprise, to learn why DPE is swiftly becoming the most important movement in software development since the introduction of DevOps. Attendees will walk away from this presentation with a better understanding of: ● The importance of fast feedback cycles and how to achieve them using build and test acceleration technologies ● Using build and test data to make troubleshooting and problem root cause determination more efficient. ● The importance of leveraging failure analytics to improve toolchain reliability, including managing avoidable failures like flaky tests. ● How to continuously improve performance and guard against regressions through trend and metric observability. ● The Cost of Inaction (CoI) by not investing in developer productivity across your local build environments and CI/CD pipelines in terms of engineering cost, TTM and software quality. ● How to elevate the strategic priority of DPE in your organization.

Changing Etsy's Architectural Foundations with Continuous Deployment

Matt Graham

This document discusses how Etsy changed its architectural foundation to continuous deployment. It outlines how Etsy migrated from infrequent deployments to deploying code changes continuously after testing. This was done by establishing a culture of continuous deployment, using tools like Jenkins to automate testing, and gradually ramping features from a small percentage of users to full rollout. The approach minimized downtime and reduced the time it took to fix bugs.

Internship

AbhinavAbhay1

The document summarizes an internship focused on Python and machine learning. It describes the company K-AKA Technology Services, which provides training, development, SaaS, and consultancy services. The internship involved two phases - training in Python application development and machine learning, followed by developing an ATM project and bio-medical toolkit. Key tasks included designing apps with Tkinter, working with databases like SQLite and MySQL, and performing machine learning tasks like regression and k-means clustering. Two sample projects were an ATM balance checker app using Tkinter and Firebase, and a medical prediction app for diabetes, BMI, and heart failure using various machine learning algorithms.

Sushma_resume

Sushma Nalam

Sushma Nalam is a software executive with 6 months of experience developing web applications using technologies like ASP.NET MVC, Web API, C#, HTML, CSS, JavaScript, and SQL Server. She has worked on two projects - GPS, a web application for managing TV program distribution, and PPL, a Windows application for managing TV program schedules and details. Her responsibilities included gathering requirements, developing enhancements, debugging issues, and assisting clients.

GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools

Nicola Molinari

The document describes commercetools' experience with adopting GraphQL for their merchant center application. They were initially fetching category data with multiple REST requests, but were able to fetch it in one GraphQL query along with additional fields like number of subcategories and products. This solved a performance issue and allowed them to easily extend their API. They also migrated other parts of their client to use GraphQL, reducing network requests and complexity. Overall, GraphQL allowed them to optimize queries and extend their API with minimal effort.

React for non techies

Amy Crimmens

This document provides an introduction and overview of React for non-technical audiences. It explains that React is a JavaScript library for building user interfaces that has gained popularity in recent years. It then discusses key React concepts like components, props, state, and lifecycles. The document also notes benefits of React like clear structure, code reusability, and easier collaboration between design and development teams. It concludes by suggesting ways teams could start adopting React patterns in their work.

Angular (v2 and up) - Morning to understand - Linagora

LINAGORA

Frappe Open Day - March 2018

Kenneth Sequeira

Frappe Open Day - March 2018

Frappe Technologies Pvt. Ltd.

React for Non Techies

Jack Hoy

This document provides an overview of React for non-technical audiences. It explains that React is a JavaScript library for building user interfaces that has gained popularity in recent years. It breaks down user interfaces into reusable components, which promotes code reuse. The document also provides examples of how React components can be used to display and update basic data, as well as examples of core React concepts like props, state, and reusable components. It discusses benefits of React like clear structure, reusability, and easier collaboration between design and development teams.

React for non techies

React London Community

NILESH NADKARNI-resume

nilesh nadkarni

Nilesh Nadkarni's resume outlines his experience as a software developer and IT manager with over 6 years of experience programming in languages like Java and Android. He has worked on projects for clients in various industries and lists his skills in areas like technical help desk support, analytics, SQL, and content management. The resume provides details on his work history, education, skills, and accomplishments on various projects.

How create react app help in creating a new react applications

Concetto Labs

From PHP to React - case study

Sparkbit

The document discusses introducing React into an existing PHP e-commerce application with millions of annual visitors. The existing application is large and difficult to maintain. The goals are to separate the frontend and backend for easier testing and maintenance, and allow refactoring the backend into smaller services. The approach is to introduce React iteratively by creating multiple React apps for different parts of the site, separating data loading from PHP to React, and gradually removing old PHP code. Server-side rendering is recommended over a single-page application to avoid possible SEO issues and ensure fast initial loading.

Supporting studio-based design courses with django-courseapp

Mike Krieger

This document describes the development of a Django-based web application called Courseapp to support studio-based design courses. It was created in 2 weeks to address needs like individual/group assignments, grading criteria, and multimedia embedding for a 160 student HCI course. Django provided a clean object-relational mapper and templating system to build the app rapidly. Lessons learned include prioritizing student wants and making it easy for TAs to provide feedback. Courseapp is now open source and available online.

Continuous Performance Testing and Monitoring in Agile Development

Dynatrace

Continuous Performance Testing and Monitoring in Agile Development Continuous Performance testing and monitoring is the best way to ensure application performance with quicker development cycles. Balancing agile and DevOps velocity with the need for ongoing performance testing and monitoring is essential. We call it Continuous Performance Validation. In this webinar, we will show how you can get performance guidance and metrics throughout development, making sure apps perform well from inception to production and beyond. In this webinar you will learn: • How to automate performance testing and which tools you need to be successful • How to use APM during load and performance testing • How to create a continuous performance validation strategy from Dev to QA and Ops • Ways teams can collaborate to ensure top application performance

Agile_SDLC_Node.js@Paypal_ppt

Hitesh Kumar

This document discusses Agile practices, software development lifecycles (SDLC), and the use of Node.js at PayPal. It outlines typical Agile processes like sprint planning, backlog grooming, pair programming, mob programming, and retrospectives. It also describes PayPal's SDLC pipeline and use of Git flow for source control. Finally, it summarizes how PayPal adopted Node.js in 2012 and has since open sourced frameworks like Kraken.js and tools like Nemo.js while growing a large community of Node.js developers.

HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB

DevOpsDays Tel Aviv

Github Copilot and tools that help us code better are cool. But I’m lucky if I spend 90 minutes a day writing code. We really need to optimize the hours we spend reviewing code, updating tickets and tracing where our code is deployed. Learn how I save an hour a day streamlining non-coding tasks. This talk is unique because 99% of developer productivity tools and hacks are about coding faster, better, smarter. And yet the vast majority of our time is spent doing all of this other stuff. After I started focusing on optimizing the 10 hours I spend every day on non-coding tasks, I found I my productivity went up and my frustration at annoying stuff went way down. I cover how to save time by reducing cognitive load and by cutting menial, non-coding tasks that we have to perform 10-50 times every day. For example: Bug or hotfix comes through and you want to start working on it right away so you create a branch and start fixing. What you don’t do is create a Jira ticket but then later your boss/PM/CSM yells at your due to lack of visibility. I share how I automated ticket creation in Slack by correlating Github to Jira. You have 20 minutes until your next meeting and you open a pull request and start a review. But you get pulled away half way through and when you come back the next day you forgot everything and have to start over. Huge waste of time. I share an ML job I wrote that tells me how long the review will take so I can pick PRs that fit the amount of time I have. You build. You ship it. You own it. Great. But after I merge my code I never know where it actually is. Did the CI job fail? Is it release under feature flag? Did it just go GA to everyone? I share a bot I wrote that personally tells me where my code is in the pipeline after it leaves my hands so I can actually take full ownership without spending tons of time figuring out what code is in what release.

Tales of modernizing trello's web stack

Vincent Kok

The web community is a fast moving community and over the recent years, many great frameworks and tools have emerged. Technology changes made in the past are not always the right ones today. This applies to Trello’s web stack too. CoffeeScript and Backbone were great choices 7 years ago but there are better tools and frameworks available now, so the Trello team decided to update its stack. But, how does one tackle this and how do you make sure you continue to innovate product-wise while modernizing its web stack? This is what we will discuss in this session -- main drivers for modernizing, the reasoning for choosing for TypeScript, React and GraphQL and will discuss our strategy implementing it, including two failed attempts. When leaving this session you will have learned which tactics to apply when modernizing a web stack and warning signs to be aware off.

"What does it really mean for your system to be available, or how to define w...

Fwdays

"Microservices and multitenancy - how to serve thousands of databases in one ...

Fwdays

Imagine you are designing a B2B service that will serve millions of businesses. This service will have dozens of different microservices with their own data, which can contain millions of records. How do you design such a database? Why is sharding not always the answer? What other options are there for such an architectural solution? I'll tell you how we at Uspacy came to serve thousands of small databases instead of a few large ones, what we've encountered and what we plan to face)

Similar to "React applications Failures", Nikita Galkin

Usable Software Design

Alexandru Bolboaca

Developer Productivity Engineering with Gradle

All Things Open

Changing Etsy's Architectural Foundations with Continuous Deployment

Matt Graham

Internship

AbhinavAbhay1

Sushma_resume

Sushma Nalam

GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools

Nicola Molinari

React for non techies

Amy Crimmens

Angular (v2 and up) - Morning to understand - Linagora

LINAGORA

Frappe Open Day - March 2018

Kenneth Sequeira

Frappe Open Day - March 2018

Frappe Technologies Pvt. Ltd.

React for Non Techies

Jack Hoy

React for non techies

React London Community

NILESH NADKARNI-resume

nilesh nadkarni

How create react app help in creating a new react applications

Concetto Labs

From PHP to React - case study

Sparkbit

Supporting studio-based design courses with django-courseapp

Mike Krieger

Continuous Performance Testing and Monitoring in Agile Development

Dynatrace

Agile_SDLC_Node.js@Paypal_ppt

Hitesh Kumar

HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB

DevOpsDays Tel Aviv

Tales of modernizing trello's web stack

Vincent Kok

Similar to "React applications Failures", Nikita Galkin (20)

Usable Software Design

Developer Productivity Engineering with Gradle

Changing Etsy's Architectural Foundations with Continuous Deployment

Internship

Sushma_resume

GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools

React for non techies

Angular (v2 and up) - Morning to understand - Linagora

Frappe Open Day - March 2018

React for Non Techies

React for non techies

NILESH NADKARNI-resume

How create react app help in creating a new react applications

From PHP to React - case study

Supporting studio-based design courses with django-courseapp

Continuous Performance Testing and Monitoring in Agile Development

Agile_SDLC_Node.js@Paypal_ppt

HOW TO OPTIMIZE NON-CODING TIME, ORI KEREN, LinearB

Tales of modernizing trello's web stack

More from Fwdays

"What does it really mean for your system to be available, or how to define w...

Fwdays

"Microservices and multitenancy - how to serve thousands of databases in one ...

Fwdays

"Scaling RAG Applications to serve millions of users", Kevin Goedecke

Fwdays

"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba

Fwdays

This is a session that details how PostgreSQL's features and Azure AI Services can be effectively used to significantly enhance the search functionality in any application. In this session, we'll share insights on how we used PostgreSQL to facilitate precise searches across multiple fields in our mobile application. The techniques include using LIKE and ILIKE operators and integrating a trigram-based search to handle potential misspellings, thereby increasing the search accuracy. We'll also discuss how the azure_ai extension on PostgreSQL databases in Azure and Azure AI Services were utilized to create vectors from user input, a feature beneficial when users wish to find specific items based on text prompts. While our application's case study involves a drug search, the techniques and principles shared in this session can be adapted to improve search functionality in a wide range of applications. Join us to learn how PostgreSQL and Azure AI can be harnessed to enhance your application's search capability.

"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk

Fwdays

At this talk we will discuss DDoS protection tools and best practices, discuss network architectures and what AWS has to offer. Also, we will look into one of the largest DDoS attacks on Ukrainian infrastructure that happened in February 2022. We'll see, what techniques helped to keep the web resources available for Ukrainians and how AWS improved DDoS protection for all customers based on Ukraine experience

"Black Monday: The Story of 5.5 Hours of Downtime", Dmytro Dziubenko

Fwdays

"Reaching 3_000_000 HTTP requests per second — conclusions from participation...

Fwdays

"$10 thousand per minute of downtime: architecture, queues, streaming and fin...

Fwdays

Direct losses from downtime in 1 minute = $5-$10 thousand dollars. Reputation is priceless. As part of the talk, we will consider the architectural strategies necessary for the development of highly loaded fintech solutions. We will focus on using queues and streaming to efficiently work and manage large amounts of data in real-time and to minimize latency. We will focus special attention on the architectural patterns used in the design of the fintech system, microservices and event-driven architecture, which ensure scalability, fault tolerance, and consistency of the entire system.

"Choosing proper type of scaling", Olena Syrota

Fwdays

"What I learned through reverse engineering", Yuri Artiukh

Fwdays

"Impact of front-end architecture on development cost", Viktor Turskyi

Fwdays

I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.

"Micro frontends: Unbelievably true life story", Dmytro Pavlov

Fwdays

"Objects validation and comparison using runtime types (io-ts)", Oleksandr Suhak

Fwdays

"JavaScript. Standard evolution, when nobody cares", Roman Savitskyi

Fwdays

"How Preply reduced ML model development time from 1 month to 1 day",Yevhen Y...

Fwdays

"GenAI Apps: Our Journey from Ideas to Production Excellence",Danil Topchii

Fwdays

In my talk, I will tell about the world of GenAI services beyond GPT-wrappers and how we developed and scaled GenAI-centric applications. I'll share personal experiences about the obstacles, lessons, and strategic tools and methodologies that were key in taking GenAI applications from 0 to 1. I'll talk about the challenges we faced when launching LLM-based and image generative applications and delivering them to end users, and what conclusions and solutions were made.

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...

Fwdays

Python engineers are introduced to the transformative potential of Large Language Models (LLMs) in the realm of advanced data analysis and the application of Semantic Kernel techniques. We will talk about how LLMs like ChatGPT can be integrated into Python environments to automate data processing, enhance predictive modeling, and unlock deeper insights from complex datasets. The session will delve into practical strategies for embedding Semantic Kernel methods within Python projects, illustrating how these advanced techniques can refine the accuracy of machine learning models by embedding domain-specific knowledge directly into the analysis process. Attendees will leave with a clear roadmap for leveraging the combined power of LLMs and Semantic Kernels, equipped with actionable knowledge to drive innovation in their data analysis projects and beyond, marking a significant leap forward in the evolution of Python engineering practices.

"Federated learning: out of reach no matter how close",Oleksandr Lapshyn

Fwdays

"What is a RAG system and how to build it",Dmytro Spodarets

Fwdays

"Debugging python applications inside k8s environment", Andrii Soldatenko

Fwdays

More from Fwdays (20)