Kharkiv JS 2015 - Creating isomorphic applications in React (en)

Nov 11, 20150 likes496 views

How to create isomorphic application in React and Redux. What pitfalls will you meet during the work? WebbyLab moves isomorphic production app to Github (https://github.com/webbylab/itsquiz-wall)

Pain and Joy of creating
isomorphic applications in
ReactJS
Viktor Turskyi
Kharkiv JS 2015

Isomorphism o_O
The interest of isomorphisms lies in the fact that two isomorphic objects cannot be
distinguished by using only the properties used to define morphisms; thus
isomorphic objects may be considered the same as long as one considers only
these properties and their consequences.
(Wikipedia)

Isomorphic application (simpler definition)
Just SPA that can be run on server

Demo (app in real life)
wall.itsquiz.com

REST
API
View
Routing
Fetching I18N
Models

What for? (about joy)
Search engine optimization
Loading speed

Colors of isomorphic
1) Isomorphic view
2) Isomorphic styles
3) Isomorphic routing
4) Isomorphic data fetching
5) Isomorphic configuration
6) Isomorphic ES6
7) Isomorphic localization

Pain #1 - cannot import styles in nodejs

Solution - inline styles (styles - just JSON)

Issues with inline styles
1) pseudo attributes :hover, :active, :focus
2) media queries
3) autoprefixing
4) styles merging

Kharkiv JS 2015 - Creating isomorphic applications in React (en)

Server and client renders different markup

Pain #3 - “Material UI” uses client side autoprefixer

We’ve switched to Material Design Lite
react-mdl (Material Design Lite) works great!!! )
What next?

Hooray, the problem with the styles is solved!!!

How to do it right?
Load CSS at the beginning
Load Javascript at the end

Solution - Text Extract Plugin for Webpack

Data fetching steps
Client:
1. React component rendering
2. Show spinner
3. Fetch data
4. Update the page (rerender React component with fetched data)
Server:
1. Preload all required data for a page
2. Render the page to string
3. Send HTML to client

REST API - shared code (isomorphic-fetch)

What is left outside of the talk
1) Isomorphic configuration
2) Isomorphic localization
3) Isomorphic ES6

Statistics
Universal code - 1778 SLOC (93%)
Client specific code - 33 SLOC (2%)
Server specific code - 95 SLOC (5%)

links
Redux http://rackt.org/redux/index.html
React Router https://github.com/rackt/react-router
Tutorial: Handcrafting an Isomorphic Redux Application (With Love)
https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux-
application-with-love-40ada4468af4

The application source code
https://github.com/WebbyLab/itsquiz-wall/

Viktor Turskyi (koorchik)
viktor@webbylab.com
https://twitter.com/koorchik
https://github.com/koorchik
http://webbylab.com

This document discusses the evolution of Angular from versions 1.x to 4. It describes improvements in performance from Angular 2 compared to Angular 1.x like faster JavaScript execution and garbage collection. Factors that contribute to Angular's improved performance with changes like ahead-of-time compilation and tree shaking are also outlined. The Angular CLI, ahead-of-time compilation, universal rendering, and benefits like improved first impressions are additionally summarized.

ASP.NET Core: The best of the new bitsKen Cenerelli

Isomorphic web applicationOliver N

The document discusses isomorphic web applications, which allow running JavaScript code on both the server and client for improved performance, SEO, and user experience. It provides an overview of traditional multi-page and single-page applications, then introduces isomorphic applications as a hybrid approach. Popular companies using isomorphic applications are listed. The document demonstrates how to build an isomorphic app using React for rendering and Browserify for bundling modules to run on both server and client.

ASP.NET Core MVC + Web API with Overview (Post RC2)Shahed Chowdhuri

ASP.NET Core MVC + Web API with OverviewShahed Chowdhuri

ASP.NET Core 1.0 OverviewShahed Chowdhuri

Evolution / History of ASP.NETAnoop Kumar Sharma

Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Arrow Consulting & Design

This document provides an overview of ASP.NET Core 1.0, including its history and key features. It discusses how ASP.NET Core 1.0 is open source, cross-platform, high performance, modular, and seamlessly transitions applications between on-premises and cloud environments. The document also demonstrates how to install and create a basic project with ASP.NET Core 1.0, highlighting features like middleware, dependency injection, MVC, diagnostics, routing, views and tag helpers.

Moving forward with ASP.NET CoreEnea Gabriel

Getting Started with ASP.net Core 1.0joescars

The Saga of JavaScript and TypeScript: Part 1Haci Murat Yaman

The document discusses the history and evolution of JavaScript, TypeScript, and related technologies. It describes how JavaScript originated as LiveScript in 1995 and was standardized as ECMAScript. It outlines the development of JavaScript engines like V8 and environments like Node.js that expanded JavaScript beyond browsers. Finally, it introduces TypeScript as a typed superset of JavaScript that transpiles to JavaScript and allows development of client-side and server-side apps using JavaScript and Node.js.

ASP.NET Core MVC + Web API with OverviewShahed Chowdhuri

.Net Core 1.0 vs .NET FrameworkWyn B. Van Devanter

Moving ASP.NET MVC to ASP.NET Core John Patrick Oliveros

JSFoo-2017 TakeawaysMir Ali

AngularJS + Reactjustvamp

Introduction to .NET Core & ASP.NET Core MVCSaineshwar bageri

What is .NET Core? Tool required for developing .NET Core application. Understanding Command for using (CLI) How to create you first Console application and Web Application using Command Line Interface (CLI) Running ASP.NET Core MVC application using Command Line Interface (CLI) How to create you first Console application and Web Application using Visual studio 2015 Understanding Project structure of ASP.NET Core MVC

TDD a REST API With Node.js and MongoDBValeri Karpov

This document discusses developing and testing a MongoDB and Node.js REST API. It introduces MongoDB and Node.js, and then covers building an API with the following parts: using Mongoose to define schemas for products, categories, and users; building routes with Express; and testing with Mocha and Superagent. Key topics include schema design principles, building RESTful routes, and testing the API end-to-end. The goal is to learn how to structure APIs on MongoDB with Node.js and ensure quality with testing.

ASP.NET 5 Overview: Post RTMShahed Chowdhuri

Introduction to ASP.NET CoreAvanade Nederland

Develop a Basic REST API from Scratch Using TDD with Val KarpovMongoDB

An Intro to Angular 2Ron Heft

From .NET Core 3, all the rest will be legacyRick van den Bosch

Next generation frontend toolingpksjce

The document discusses modern JavaScript tooling and trends. It outlines problems with existing tools like slow performance and poor source mapping. Emerging tools like Vitejs and Snowpack are faster and support ES modules and features like instant loading and HMR. The document argues the JavaScript ecosystem is entering a third age driven by ESM, Rust/Go for tooling, and emerging technologies like Deno. Resources are provided to learn more about Vitejs, Snowpack, and trends in frontend tooling.

Conquering AngularJS LimitationsValeri Karpov

The document discusses strategies for addressing common AngularJS challenges including SEO, responsive design, and integration testing. It recommends using Prerender.io to generate static HTML for search engines to index Single Page Apps. For responsive design, it suggests using reactive directives that emit events in response to screen size changes rather than having directives know about screen size. Finally, it outlines an approach to integration testing AngularJS directives in isolation using Karma and bootstrapping directives for testing DOM logic.

ASP.NET 5 Overview for Apex SystemsShahed Chowdhuri

Angular 2 vs ReactIran Reyes Fleitas

This document provides an overview and comparison of Angular and React frameworks from the perspective of an experienced AngularJS and React developer. Key points of comparison addressed include React being more lightweight and modular while Angular provides more out-of-the-box functionality. Performance benchmarks generally show React as faster while Angular's testing and routing capabilities are more robust. The document avoids making definitive conclusions and emphasizes choosing based on individual needs and preferences.

Monitoring of developers. The necessity or self-indulgence by Oleksiy DyominJavaDayUA

This document discusses the necessity of monitoring for developers and provides examples of tools that can be used for system and application monitoring. It covers using tools like Zabbix and Nagios for system monitoring, and Logstash, Kibana, PaperTrail, and NewRelic for application monitoring. Specific metrics that can be monitored are discussed like CPU, memory, disk usage, and application performance data from tools like JMX.

GMS, IT-рекрутинговое агентство: о компании и услугахgetmatch

More Related Content

What's hot (20)

Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Arrow Consulting & Design

Moving forward with ASP.NET CoreEnea Gabriel

Getting Started with ASP.net Core 1.0joescars

The Saga of JavaScript and TypeScript: Part 1Haci Murat Yaman

ASP.NET Core MVC + Web API with OverviewShahed Chowdhuri

.Net Core 1.0 vs .NET FrameworkWyn B. Van Devanter

Moving ASP.NET MVC to ASP.NET Core John Patrick Oliveros

JSFoo-2017 TakeawaysMir Ali

AngularJS + Reactjustvamp

Introduction to .NET Core & ASP.NET Core MVCSaineshwar bageri

TDD a REST API With Node.js and MongoDBValeri Karpov

ASP.NET 5 Overview: Post RTMShahed Chowdhuri

Introduction to ASP.NET CoreAvanade Nederland

Develop a Basic REST API from Scratch Using TDD with Val KarpovMongoDB

An Intro to Angular 2Ron Heft

From .NET Core 3, all the rest will be legacyRick van den Bosch

Next generation frontend toolingpksjce

Conquering AngularJS LimitationsValeri Karpov

ASP.NET 5 Overview for Apex SystemsShahed Chowdhuri

Angular 2 vs ReactIran Reyes Fleitas

Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Arrow Consulting & Design

Moving forward with ASP.NET CoreEnea Gabriel

Getting Started with ASP.net Core 1.0joescars

The Saga of JavaScript and TypeScript: Part 1Haci Murat Yaman

ASP.NET Core MVC + Web API with OverviewShahed Chowdhuri

.Net Core 1.0 vs .NET FrameworkWyn B. Van Devanter

Moving ASP.NET MVC to ASP.NET Core John Patrick Oliveros

JSFoo-2017 TakeawaysMir Ali

AngularJS + Reactjustvamp

Introduction to .NET Core & ASP.NET Core MVCSaineshwar bageri

TDD a REST API With Node.js and MongoDBValeri Karpov

ASP.NET 5 Overview: Post RTMShahed Chowdhuri

Introduction to ASP.NET CoreAvanade Nederland

Develop a Basic REST API from Scratch Using TDD with Val KarpovMongoDB

An Intro to Angular 2Ron Heft

From .NET Core 3, all the rest will be legacyRick van den Bosch

Next generation frontend toolingpksjce

Conquering AngularJS LimitationsValeri Karpov

ASP.NET 5 Overview for Apex SystemsShahed Chowdhuri

Angular 2 vs ReactIran Reyes Fleitas

Viewers also liked (17)

Monitoring of developers. The necessity or self-indulgence by Oleksiy DyominJavaDayUA

GMS, IT-рекрутинговое агентство: о компании и услугахgetmatch

Bluetest success storyMats Andersson

лидогенерация для B2 b компаний в социальных сетяхАлёна Данильченко

Flavors of Concurrency in JavaJavaDayUA

Writing concurrent code that is also correct is unbelievably hard. Naturally, humanity has developed a number of approaches to handle concurrency in the code, starting from basic threads that follow the hardware way to do concurrency to higher level primitives like fibers and work-stealing solutions. But which approach is the best for you? In this session, we'll take a look at a simple concurrent problem and solve it using different ways to manage concurrency: threads, executors, actors, fibers, monadic code with completable futures. All these approaches are different from the simplicity, readability, configuration and management point of view. Some scenarios are better modelled with threads, while sometimes you're better off with actors. We'll discuss the benefits of each approach and figure out when it's worth pursuing in your project.

Growth Hacking Marketing или фишки лидогенерации. Игорь Канзычаков на Digitrend.Digitrend

semanticweb2015-ConfirmationOfParticipationDebmalya Jash

openHPI is the online education platform of the Hasso Plattner Institute for Software Systems Engineering, which is affiliated with the University of Potsdam. The participant received a confirmation of participation for completing over 50% of the learning material in the openHPI course "Knowledge Engineering with Semantic Web Technologies", which covered topics such as foundations of semantic web technologies, description logics, knowledge representation with RDF(S) and OWL, SPARQL query language, ontological engineering, linked data application programming, and knowledge engineering in the web of data.

Indepenedent Contractor Website TutorialArtur Express, Inc.

The document provides an overview of the new website features for Artur Express independent contractors. It describes features like creating an account, logging in, viewing current loads and locations, settlements, available loads, changing passwords, and links to additional company information. The website is designed to help contractors manage trips, view payments and load details. It provides contact information for questions about settlements.

SPSHOU - Upgrading and Migrating to SharePoint 2016 like a ProBrian Culver

SharePoint Saturday Houston #SPSHOU Level: 300 Track: Administrator, Development / SharePoint App SharePoint 2016 is finally out and it brings tons of new features that continue to make SharePoint an amazing collaboration tool for companies. Many companies are still on SharePoint 2010, maybe even earlier versions. In this session, I discuss and show you the approach for upgrading and migrating to SharePoint 2016. Its time to get with the times and upgrade your farm. I will shares best practices and lots of tips as we upgrade our sample farm. I will include some troubleshooting and custom solutions based on real world scenarios to make sure this isn’t another “simple” upgrade. Best of all, we will have fun doing this. Attendee Takeaways: 1. Learn how to upgrade to SharePoint 2016 from various SharePoint versions. 2. Learn best practices for upgrading smoothly and properly. 3. Learn some tips and tricks to making the upgrade faster, less error prone and efficient to reduce downtime. 4. Learn how to troubleshooting and deal with upgrade issues.

Web-application I have always dreamt of by Victor PolischukJavaDayUA

Through years of work have been trying many of Java frameworks which provides different level of abstractions on both server and client-side. Pure Servlet+JSP, JSF, GWT, Struts, Spring MVC, Vaadin, Play!, DWR, you name it. Sometimes it felt good, sometimes not, and with each year number of “good” applications reduced to the critical minimum. Later I tried to bring all the good points I had ever seen together to create “a perfect being” and after years of struggling I feel that I have reached the goal. Let me share it…

Geek22.outreach рассылки по покупным базам в сегменте B2BGeek22.com

Geek22.outreach - это первая российская платформа, которая позволяет отправлять рассылки по покупным базам.Является решение для лидогенерации по покупным Email базам в сегменте B2B. Интеграция с базой СПАРК позволяет нашим клиентам начать получать лиды уже в первые недели после подключения. Geek22.outreach использует алгоритмы машинного обучения, отслеживая более 325 метрик для того, чтобы рассылки наших клиентов были 100% CAN-SPAM.

Interactive Java Support to your tool -- The JShell API and ArchitectureJavaDayUA

Апгрейд и миграция на SharePoint 2016Boris Zhurkin

300 sp 2017_celabracionesRestaurante Manolín Valladolid

STEMing Kids: One workshop at a timeJavaDayUA

Science, Technology, Engineering and Mathematics, STEM, are vital to the future of our children. The parents and students in our educational systems need to understand and embrace the technology that affects them every day of their lives. Devoxx4Kids is on a global mission to complement the classical schooling system by offering workshops to kids in a fun way. and teaching them computing concepts using Scratch, Greenfoot, Minecraft, Raspberry Pi, Arduino, NAO, Tynker. We will share a path that can be followed by adults to keep kids in their vicinity engaged and build, instead of just play, games. You will learn best practices to organize similar workshops in your local setting and hear tips on opening a local chapter. This talk will be appreciated by anybody who has kids, nephews, nieces, and in general kids around them.

SPS Utah 2016 - Unlock your big data with analytics and BI on Office 365Brian Culver

This document summarizes Brian Culver's presentation on unlocking big data with analytics and business intelligence on Office365. The presentation agenda includes an introduction to big data, understanding sentiment analysis, connecting big data and BI, creating an Azure HDInsight cluster, loading and validating data, Hadoop and C#, and visualizing results with PowerView. Culver then shares closing comments on understanding customers through big data and ensuring projects have a clear ROI.

階層モデルの分散パラメータの事前分布についてhoxo_m

Monitoring of developers. The necessity or self-indulgence by Oleksiy DyominJavaDayUA

GMS, IT-рекрутинговое агентство: о компании и услугахgetmatch

Bluetest success storyMats Andersson

лидогенерация для B2 b компаний в социальных сетяхАлёна Данильченко

Flavors of Concurrency in JavaJavaDayUA

Growth Hacking Marketing или фишки лидогенерации. Игорь Канзычаков на Digitrend.Digitrend

semanticweb2015-ConfirmationOfParticipationDebmalya Jash

Indepenedent Contractor Website TutorialArtur Express, Inc.

SPSHOU - Upgrading and Migrating to SharePoint 2016 like a ProBrian Culver

Web-application I have always dreamt of by Victor PolischukJavaDayUA

Geek22.outreach рассылки по покупным базам в сегменте B2BGeek22.com

Interactive Java Support to your tool -- The JShell API and ArchitectureJavaDayUA

Апгрейд и миграция на SharePoint 2016Boris Zhurkin

300 sp 2017_celabracionesRestaurante Manolín Valladolid

STEMing Kids: One workshop at a timeJavaDayUA

SPS Utah 2016 - Unlock your big data with analytics and BI on Office 365Brian Culver

階層モデルの分散パラメータの事前分布についてhoxo_m

Similar to Kharkiv JS 2015 - Creating isomorphic applications in React (en) (20)

Server and client rendering of single page appsThomas Heymann

This document discusses server and client rendering of single page applications. It outlines a wish list tool that was built to track products, receive alerts, and share lists. The goals are to improve the UI, separate the wish list into microservices, and update the frontend using modern frameworks. Shared rendering concerns between server and client are discussed, along with an architecture using Node.js, Express, Backbone, Handlebars and other technologies. Challenges with routing, data fetching, caching and other areas are covered, as well as potential solutions like React and Rendr. Overall it was found to be worthwhile but still immature, requiring better frameworks.

Building isomorphic java script apps faster with next.jsMadhav Chaturvedi

Beginning MEAN StackRob Davarnia

This document provides an overview of the MEAN stack and demonstrates how to build a sample application with it. It begins with defining each component of the MEAN stack: MongoDB as the database, Express as the web application framework, AngularJS for the frontend framework, and Node.js as the runtime environment. It then demonstrates setting up a basic Express app, integrating authentication with Passport, and interacting with MongoDB using Mongoose. The document also discusses key concepts like asynchronous I/O in Node.js and model-view-controller patterns in AngularJS. Overall, it serves as a high-level introduction to the technologies that make up the MEAN stack.

Seven Versions of One Web ApplicationYakov Fain

RemixTalentica Software

Isomorphic JavaScript with NashornMaxime Najim

Isomorphic JavaScript applications can share the same code and run on both the front end and back end. It is also a spectrum containing applications that share minimal bits of validation logic with ones that share a bulk of the application code. Nashorn is a new JavaScript engine for Java that was released with Java 8. The Nashorn JavaScript engine makes isomorphic web apps on the JVM possible by allowing the exact same browser code to run on the server. This enables us to achieve the don’t-repeat-yourself (DRY) principle, by reducing repetition in a multitier architecture. This presentation covers the key concepts, rationale, and categories of Isomorphic JavaScript and how it makes your large applications maintainable.

ROS - An open source platform for robotics software developers (lecture).pdfAmine Bendahmane

ROS (Robot Operating System) is a middleware and framework for robotics. It provides libraries and tools for robot hardware abstraction, message-passing between processes, and low-level device control. ROS is useful for rapid prototyping and development of robotics applications as it handles low-level communication and provides APIs for common tasks like navigation and path planning. The newer ROS 2 version improves on ROS 1 with distributed operation, real-time capabilities, and support for multiple programming languages on different operating systems.

Building a scalable API with GrailsTanausu Cerdeña

Push it to the EdgeRobin-Manuel Thiel

Web with NodejsNaman Gupta

Angular meetupIntilery.com

This document summarizes an AngularJS meetup presentation about building maintainable AngularJS applications using RequireJS. It discusses setting up the directory structure and configuration files to split the application into modular components managed by RequireJS. The principles outlined include having each file contain one component, splitting components into smaller pieces, and using APIs to integrate split applications. Examples are given of services, controllers and the overall app and bootstrap configuration.

Reactive Application Using METEORNodeXperts

Meteor is a reactive web application framework that uses JavaScript on both the client and server. It allows for real-time updates as data changes automatically propagate to connected clients without page refresh. The key aspects of Meteor include its reactivity system using Tracker.autorun, the Distributed Data Protocol (DDP) for client-server communication, and Minimongo which mirrors the MongoDB API in the browser for local data caching and manipulation. Meteor applications have a uniform codebase, use reactive templates, publish-subscribe for data synchronization, and allow building isomorphic apps that run on both client and server with shared code.

Isomorphic javascript - Uppsala.js #8Alexander Aivars

This document discusses building isomorphic JavaScript applications. It begins by explaining the benefits of isomorphic apps such as delivering the best experience to all users regardless of device or browser capabilities. It then describes how to build isomorphic apps using Node.js, a microservice architecture, and React for a unified coding experience. Finally, it highlights how isomorphic apps with React make development more productive and enjoyable by fixing the DOM issues and allowing developers to focus on what to build rather than how to build it.

Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm

1) Isomorphic JavaScript allows code to run on both the client and server by being environment-agnostic or shimmed for different environments. 2) It improves performance by enabling faster initial page loads and improves SEO by allowing search engines to crawl single page apps. 3) Popular libraries like Underscore, Backbone, Handlebars, and React can be used isomorphically, and isomorphic applications exist on a spectrum from sharing small parts of code to entire applications.

Server-side Web development via Ruby on Railsg3ppy

Connect js nodejs_api_shubhraShubhra Kar

Switch to Backend 2023Google Developer Students Club NIT Silchar

This session will provide attendees with hands-on experience and in-depth knowledge of using Node.js as a runtime environment and Express.js as a web framework to build scalable and fast backend systems. Additionally, attendees will learn about Passport.js, a popular authentication middleware for Node.js, and how to use Prisma ORM to handle database operations in a type-safe and efficient manner. The session will be conducted by experienced developers who have worked with these technologies and will be able to provide valuable insights and best practices. The session will be interactive and include plenty of opportunities for attendees to ask questions and work on real-world projects.

"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...Fwdays

Micro-frontends has been a hyped topic for the last several years but unfortunately, it is hard to find ready to production solution. We built in-house open-source solution that allows us to deliver more than 100 apps continuously. Micro-frontends is not only about code splitting it is about the full development cycle and I will try to explain to you how we use it in production. Browser. FrontEnd Frameworks. Gateway. Server. Scaling. Delivery.

Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community

Поговорим об эволюции в мире вэб-приложений, современных технологиях и фреймворках, которые используют в вэб-разработке сегодня. Обсудим основные архитектурные принципы при создании вэб-решений для разных клиентов. Обсудим, как сделать и запустить бэк-энд на Asp.NET.Core в Visual Studio 2017. Далее поговорим, как написать и запустить фронт-энд с использованием React.JS, Redux, Routing, Bootstrap в IntelliJ IDEA 2017. В конце доклада немного заглянем в будущее, что нас ждет в вэб-разработке завтра?

Elefrant [ng-Poznan]Marcos Latorre

This document introduces Elefrant, an open source Node.js framework for building scalable APIs. It provides modularity, customizability, authentication, documentation, and other features out of the box. The creator developed it to meet his needs for building real-time, multidevice apps. The framework is currently in version 0.1 but future versions will offer more extensibility through custom components.

Server and client rendering of single page appsThomas Heymann

Building isomorphic java script apps faster with next.jsMadhav Chaturvedi

Beginning MEAN StackRob Davarnia

Seven Versions of One Web ApplicationYakov Fain

RemixTalentica Software

Isomorphic JavaScript with NashornMaxime Najim

ROS - An open source platform for robotics software developers (lecture).pdfAmine Bendahmane

Building a scalable API with GrailsTanausu Cerdeña

Push it to the EdgeRobin-Manuel Thiel

Web with NodejsNaman Gupta

Angular meetupIntilery.com

Reactive Application Using METEORNodeXperts

Isomorphic javascript - Uppsala.js #8Alexander Aivars

Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm

Server-side Web development via Ruby on Railsg3ppy

Connect js nodejs_api_shubhraShubhra Kar

Switch to Backend 2023Google Developer Students Club NIT Silchar

"Micro-frontends from A to Z. How and Why we use Micro-frontends in Namecheap...Fwdays

Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community

Elefrant [ng-Poznan]Marcos Latorre

More from Viktor Turskyi (18)

How to create a high performance excel engine in java scriptViktor Turskyi

Livr 2.0 in JS - Vinnytsia.JS 2019Viktor Turskyi

Having 15-year experience in web development, I have tried my hands at dozens of validation libraries but didn’t manage to find the one to handle all my tasks. 5 years ago we decided to create a validator which will better than any other. Now LIVR supports a dozen of programming languages and it is battle tested in hudrends of projects. I will talk about the ideas behind, about architecture, use cases, pros and cons. Will show real examples.

The working architecture of node js applications open tech week javascript ...Viktor Turskyi

Yet another json rpc library (mole rpc)Viktor Turskyi

Viktor Turskyi presented Mole RPC, a new JSON RPC library he created. He discussed why existing JSON RPC libraries did not meet his needs of being transport agnostic, supporting bidirectional communication, and having a modern API. Mole RPC supports multiple transports including WebSockets, HTTP, MQTT and more. It aims to have a lightweight core with extensible transports and easy testing of new transports. Viktor outlined several use cases for Mole RPC and plans to improve documentation, finalize the API, and create additional transports prior to a 1.0 release.

KharkivJS 2018 Information Security PracticeViktor Turskyi

"Offline mode for a mobile application, redux on server and a little bit abou...Viktor Turskyi

The working architecture of NodeJs applicationsViktor Turskyi

Language Independent Validation Rules 2.0, Viktor Turskyi, talk at OSDN 2017Viktor Turskyi

Universal data validation specification (http://livr-spec.org/) Main ideas: * Rules are declarative and language independent * Any number of rules for each field * Validator should return together errors for all fields * Exclude all fields that do not have validation rules described * Possibility to validate complex hierarchical structures * Easy to describe and understand validation * Returns understandable error codes (neither error messages nor numeric codes) * Easy to implement own rules (usually you will have several in every project) * Rules should be able to change results output ("trim", "nested_object", for example) * Multipurpose (user input validation, configs validation, contracts programming etc) * Unicode support There are implementations for: * Perl * JavaScript * PHP * Ruby * Python * Erlang

How to extract information from text with SemgrexViktor Turskyi

How to translate your Single Page Application - Webcamp 2016 (en)Viktor Turskyi

1. The document discusses internationalization (I18N) and localization (L10N) for single page applications, specifically how to translate text strings. 2. It recommends using keys in the form of English phrases instead of numeric or string keys, and using the Gettext standard which supports plural forms and passing context between source and translated strings. 3. Examples are given of implementing I18N in JavaScript using libraries like Jed and integrating translations with React applications.

It's Quiz - Cloud testing platformViktor Turskyi

Itsquiz is a cloud-based testing platform that provides knowledge assessment and skills testing solutions for educational institutions, businesses, and individuals. It offers comprehensive analytics, an innovative quiz marketplace, and tools for talent identification and recruitment. Itsquiz aims to build a global network for knowledge testing and obtain a leadership position in the cloud-based qualifications testing market. It has developed a minimum viable product and seeks funding to further develop the platform and launch marketing campaigns to reach its goal of 10 million users.

Kharkiv JS 2015: Боль и радость создания изоморфных приложений на ReactJS (RU)Viktor Turskyi

Language Independent Validation Rules (LIVR)Viktor Turskyi

This document introduces Language Independent Validation Rules (LIVR), a universal validator that allows defining validation rules in a declarative and language-independent way. LIVR rules can validate different data types including nested objects, lists, and custom objects. Rules are easy to describe and understand. LIVR has been implemented in several programming languages and provides a universal test suite. Examples demonstrate validating registration data, nested objects, lists, list of objects, and modifying output.

Hadoop webcamp 2015 Viktor Turskyi

Mapreduce in JavaScriptViktor Turskyi

Excel in JavascriptViktor Turskyi

Testing orm based codeViktor Turskyi

Maybe you do not know that ...Viktor Turskyi

This document discusses various Perl concepts including: - Using local to localize variables within a block - Slurping a file into a scalar variable - Using $_ as the default iterator variable in a foreach loop - Using Try::Tiny to catch exceptions - Creating private methods using Sub::Name - Undefined variables after iterating over an array with foreach - Matching regular expressions - Best practices for module loading with @INC and PERL5LIB

How to create a high performance excel engine in java scriptViktor Turskyi

Livr 2.0 in JS - Vinnytsia.JS 2019Viktor Turskyi

The working architecture of node js applications open tech week javascript ...Viktor Turskyi

Yet another json rpc library (mole rpc)Viktor Turskyi

KharkivJS 2018 Information Security PracticeViktor Turskyi

"Offline mode for a mobile application, redux on server and a little bit abou...Viktor Turskyi

The working architecture of NodeJs applicationsViktor Turskyi

Language Independent Validation Rules 2.0, Viktor Turskyi, talk at OSDN 2017Viktor Turskyi

How to extract information from text with SemgrexViktor Turskyi

How to translate your Single Page Application - Webcamp 2016 (en)Viktor Turskyi

It's Quiz - Cloud testing platformViktor Turskyi

Kharkiv JS 2015: Боль и радость создания изоморфных приложений на ReactJS (RU)Viktor Turskyi

Language Independent Validation Rules (LIVR)Viktor Turskyi

Hadoop webcamp 2015 Viktor Turskyi

Mapreduce in JavaScriptViktor Turskyi

Excel in JavascriptViktor Turskyi

Testing orm based codeViktor Turskyi

Maybe you do not know that ...Viktor Turskyi

Recently uploaded (20)

Procurement Insights Cost To Value Guide.pptxJon Hansen

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how: • Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules. • Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance. • Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity. • Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications. • Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market. With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications. Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

How analogue intelligence complements AIPaul Rowe

Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results. News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Procurement Insights Cost To Value Guide.pptxJon Hansen

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

How analogue intelligence complements AIPaul Rowe

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

TrsLabs - Fintech Product & Business ConsultingTrs Labs

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Kharkiv JS 2015 - Creating isomorphic applications in React (en)

1. Pain and Joy of creating isomorphic applications in ReactJS Viktor Turskyi Kharkiv JS 2015

2. Isomorphism o_O The interest of isomorphisms lies in the fact that two isomorphic objects cannot be distinguished by using only the properties used to define morphisms; thus isomorphic objects may be considered the same as long as one considers only these properties and their consequences. (Wikipedia)

3. Isomorphic application (simpler definition) Just SPA that can be run on server

4. Demo (app in real life) wall.itsquiz.com

5. Client Server Shared code REST API

6. REST API Shared code

7. REST API View Routing Fetching I18N Models

8. What for? (about joy) Search engine optimization Loading speed

9. Colors of isomorphic 1) Isomorphic view 2) Isomorphic styles 3) Isomorphic routing 4) Isomorphic data fetching 5) Isomorphic configuration 6) Isomorphic ES6 7) Isomorphic localization

10. Joy #1 - React

11. View - client

12. View - server

13. Pain #1 - cannot import styles in nodejs

14. Solution - inline styles (styles - just JSON)

15. Issues with inline styles 1) pseudo attributes :hover, :active, :focus 2) media queries 3) autoprefixing 4) styles merging

17. Server and client renders different markup

18. Pain #2 - client side autoprefixer

19. Solution that just works

20. Choosing UI components library

21. Pain #3 - “Material UI” uses client side autoprefixer

22. We’ve switched to Material Design Lite react-mdl (Material Design Lite) works great!!! ) What next?

23. Hooray, the problem with the styles is solved!!!

24. Not this time!!!

25. Pain #4 - assets loading order

26. How to do it right? Load CSS at the beginning Load Javascript at the end

27. Correct loading order

28. Solution - Text Extract Plugin for Webpack

29. Joy #2 - React Router

30. Routing (shared code)

31. Routing (client)

32. Routing (server)

33. Joy #3 - Redux

34. One store per application

35. Work with REST API

36. Data fetching steps Client: 1. React component rendering 2. Show spinner 3. Fetch data 4. Update the page (rerender React component with fetched data) Server: 1. Preload all required data for a page 2. Render the page to string 3. Send HTML to client

37. REST API - shared code (isomorphic-fetch)

38. What is left outside of the talk 1) Isomorphic configuration 2) Isomorphic localization 3) Isomorphic ES6

39. Statistics Universal code - 1778 SLOC (93%) Client specific code - 33 SLOC (2%) Server specific code - 95 SLOC (5%)

40. links Redux http://rackt.org/redux/index.html React Router https://github.com/rackt/react-router Tutorial: Handcrafting an Isomorphic Redux Application (With Love) https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux- application-with-love-40ada4468af4

41. The application source code https://github.com/WebbyLab/itsquiz-wall/

42. Viktor Turskyi (koorchik) [email protected] https://twitter.com/koorchik https://github.com/koorchik http://webbylab.com

Kharkiv JS 2015 - Creating isomorphic applications in React (en)

Recommended

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Kharkiv JS 2015 - Creating isomorphic applications in React (en) (20)

More from Viktor Turskyi (18)

Recently uploaded (20)

Kharkiv JS 2015 - Creating isomorphic applications in React (en)