DEV Community: Olex Tkachuk

Scaling UI Development challenges

Olex Tkachuk — Sun, 18 Dec 2022 05:23:38 +0000

Scaling UI development can be a challenging task, especially as the size and complexity of a project grow. Here are some common challenges that teams may face when scaling UI development:

Maintaining a consistent design language: As the number of designers and developers working on a project increases, it can be difficult to maintain a consistent design language across all UI elements. This can lead to a fragmented user experience and make it harder for users to navigate the application.

Managing code complexity: As the number of UI components and features grows, the codebase can become increasingly complex. This can make it difficult for developers to understand and work with the code, leading to slower development times and increased maintenance costs.

Ensuring cross-functional collaboration: UI development often involves close collaboration between designers and developers. As the team grows, it can be challenging to ensure that all team members are aligned and working towards the same goals.

Adapting to changing project requirements: As a project evolves, the UI may also need to change to meet new requirements. This can be challenging, especially if the UI has become complex and difficult to modify.

Testing and debugging: With a larger and more complex UI, it can be time-consuming to thoroughly test and debug all UI elements. This can lead to longer development cycles and a slower release schedule.

To address these challenges, it is important for teams to adopt best practices and tools that can help them scale UI development effectively.

UI code generators that use Machine Learning, such as Codis, can help with scaling UI development by automatically generating code from design specifications. This can save time and reduce the risk of errors by eliminating the need for manual coding of UI elements. By using a code generator, teams can focus on more high-level tasks, such as designing and testing the UI, rather than spending time on low-level coding tasks. Code generators can also help to ensure consistency in the codebase by generating code that adheres to predefined standards and patterns. This can make it easier for developers to understand and work with the code, improving the efficiency and scalability of the development process.

In addition, using design systems to maintain a consistent design language, adopting agile development methodologies to facilitate cross-functional collaboration, and using automated testing tools to speed up the testing and debugging process. By addressing these challenges early on, teams can build a scalable and maintainable UI that can adapt to changing project requirements and support future growth.

How to a Make Flutter Screen in 2 Minutes

Olex Tkachuk — Mon, 12 Dec 2022 07:29:13 +0000

I want to show you, how to generate a Flutter screen in a couple of minutes using Codis (converts Figma design to Flutter code) - a service that currently I'm working on.

As an example let's create a screen of a music app:

You just need to signup in Codis for free and install the Figma plugin. After that, you can choose a frame in the Figma file and lunch the plugin.

After a couple of minutes you start getting the rendered result to compare:

And finally the screen code:

class MusicAppScreen extends StatelessWidget {
  MusicAppScreen();

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(color: Color.fromRGBO(18, 18, 18, 1)),
        child: Column(children: [
          Container(
              child: Flex(children: [
                Expanded(
                    child: SingleLineLeadingImageListItem(
                        height: 72,
                        leadingImage: Image(
                            image: AssetImage(
                                'images/4e5afe26b35cfbe0ee7fd3216806453df6aefadf.png')),
                        leadingImageHeight: 56,
                        titleText: 'Ukrainian',
                        titleTextFontSize: 16,
                        titleTextFontFamily: 'Roboto',
                        titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                        trailingWidget: null,
                        tileColor: Color.fromRGBO(46, 46, 46, 1)),
                    flex: 1),
                Expanded(
                    child: Padding(
                        padding: EdgeInsets.only(left: 3),
                        child: SingleLineLeadingImageListItem(
                            height: 72,
                            leadingImage: Image(
                                image: AssetImage(
                                    'images/3b6e7710c505439063586bf01566cd4d91d78d8e.png')),
                            leadingImageHeight: 56,
                            titleText: 'Star Wars',
                            titleTextFontSize: 16,
                            titleTextFontFamily: 'Roboto',
                            titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                            trailingWidget: null,
                            tileColor: Color.fromRGBO(46, 46, 46, 1))),
                    flex: 1)
              ], direction: Axis.horizontal),
              width: MediaQuery.of(context).size.width * 1.000,
              height: 72,
              margin: EdgeInsets.only(left: 9, right: 8, top: 21)),
          Container(
              child: Flex(children: [
                Expanded(
                    child: SingleLineLeadingImageListItem(
                        height: 72,
                        leadingImage: Image(
                            image: AssetImage(
                                'images/5a882e785da5b8be376cd64fda95ca6c9e376e7f.png')),
                        leadingImageHeight: 56,
                        titleText: 'Kids',
                        titleTextFontSize: 16,
                        titleTextFontFamily: 'Roboto',
                        titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                        trailingWidget: null,
                        tileColor: Color.fromRGBO(46, 46, 46, 1)),
                    flex: 1),
                Expanded(
                    child: Padding(
                        padding: EdgeInsets.only(left: 3),
                        child: SingleLineLeadingImageListItem(
                            height: 72,
                            leadingImage: Image(
                                image: AssetImage(
                                    'images/2486cb439930bbd87670d6044e7cd3ffbb1622c5.png')),
                            leadingImageHeight: 56,
                            titleText: 'Liked Songs',
                            titleTextFontSize: 16,
                            titleTextFontFamily: 'Roboto',
                            titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                            trailingWidget: null,
                            tileColor: Color.fromRGBO(46, 46, 46, 1))),
                    flex: 1)
              ], direction: Axis.horizontal),
              width: MediaQuery.of(context).size.width * 1.000,
              height: 72,
              margin: EdgeInsets.only(left: 9, right: 8, top: 14)),
          Padding(
              padding: EdgeInsets.only(left: 12, top: 26),
              child: Text('Jump back in',
                  style: TextStyle(
                      fontSize: 18,
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w600,
                      color: Color.fromRGBO(255, 255, 255, 1)))),
          Container(
              child: Row(children: [
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/4828627fbcfd92d6aa0680ce183af867a6078520.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(right: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/4b2c9cadc138c3d57e613658e081532130f80e64.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/9f6af78ba9c6566e4d1a6c06458e9e845fc0e02e.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11))
              ], crossAxisAlignment: CrossAxisAlignment.start),
              constraints: BoxConstraints.expand(height: 119),
              margin: EdgeInsets.only(left: 12, right: 16, top: 17)),
          Padding(
              padding: EdgeInsets.only(left: 12, top: 26),
              child: Text('Recently played',
                  style: TextStyle(
                      fontSize: 18,
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w600,
                      color: Color.fromRGBO(255, 255, 255, 1)))),
          Container(
              child: Row(children: [
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/9b0c638d92faeff1b2b8be9c719d48f983f87ab0.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(right: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/d540ce88eb53ebeea3f6a3f46cf3077e5fec1503.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/4a6b1816a0fa9a6bdd5fe4459a7e340c44dbb16f.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11))
              ], crossAxisAlignment: CrossAxisAlignment.start),
              constraints: BoxConstraints.expand(height: 119),
              margin: EdgeInsets.only(left: 12, right: 16, top: 17)),
          Container(
              child: Container(
                  decoration:
                      const BoxDecoration(color: Color.fromRGBO(46, 46, 46, 1)),
                  child: Row(children: [
                    Container(
                        alignment: Alignment.topLeft,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'images/3b6e7710c505439063586bf01566cd4d91d78d8e.png'),
                                fit: BoxFit.fill)),
                        height: 56,
                        width: 56,
                        margin: EdgeInsets.only(left: 10, right: 6)),
                    Padding(
                        padding: EdgeInsets.only(left: 6),
                        child: Text('Star Wars - The Last Battle',
                            style: TextStyle(
                                fontSize: 16,
                                fontFamily: 'Roboto',
                                fontWeight: FontWeight.w400,
                                color: Color.fromRGBO(255, 255, 255, 1)))),
                    Container(
                        alignment: Alignment.topLeft,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'images/90f1ba99d38e9dd5fd95985b285511c80b049868.png'),
                                fit: BoxFit.contain)),
                        height: 30,
                        width: 30,
                        margin: EdgeInsets.only(left: 16)),
                    Container(
                        alignment: Alignment.topLeft,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'images/e452b6284aca760c898d5d5ca13a4847e85ff002.png'),
                                fit: BoxFit.contain)),
                        height: 30,
                        width: 30,
                        margin: EdgeInsets.only(left: 12, right: 17))
                  ], crossAxisAlignment: CrossAxisAlignment.center)),
              width: MediaQuery.of(context).size.width * 1.000,
              height: 70,
              margin: EdgeInsets.only(left: 7, right: 10, top: 44))
        ], crossAxisAlignment: CrossAxisAlignment.start));
  }
}

Try to convert your design into Flutter - it would be great to have your feedback. Codis is currently in its beta stage, we're working hard to improve the quality of the code.

How to make Flutter screen in 2 minutes

Olex Tkachuk — Thu, 01 Dec 2022 10:47:33 +0000

I want to show you, how to generate Flutter screen in couple minutes using Codis (converts Figma design to Flutter code) - service that currently I'm working on.

As an example let's create a screen of music app:

You just need to signup in Codis for free and install Figma plugin. After that you can choose a frame in Figma file and lunch the plugin.

After a couple minutes you are getting the rendered result to compare:

And finally the screen code:

class MusicAppScreen extends StatelessWidget {
  MusicAppScreen();

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(color: Color.fromRGBO(18, 18, 18, 1)),
        child: Column(children: [
          Container(
              child: Flex(children: [
                Expanded(
                    child: SingleLineLeadingImageListItem(
                        height: 72,
                        leadingImage: Image(
                            image: AssetImage(
                                'images/4e5afe26b35cfbe0ee7fd3216806453df6aefadf.png')),
                        leadingImageHeight: 56,
                        titleText: 'Ukrainian',
                        titleTextFontSize: 16,
                        titleTextFontFamily: 'Roboto',
                        titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                        trailingWidget: null,
                        tileColor: Color.fromRGBO(46, 46, 46, 1)),
                    flex: 1),
                Expanded(
                    child: Padding(
                        padding: EdgeInsets.only(left: 3),
                        child: SingleLineLeadingImageListItem(
                            height: 72,
                            leadingImage: Image(
                                image: AssetImage(
                                    'images/3b6e7710c505439063586bf01566cd4d91d78d8e.png')),
                            leadingImageHeight: 56,
                            titleText: 'Star Wars',
                            titleTextFontSize: 16,
                            titleTextFontFamily: 'Roboto',
                            titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                            trailingWidget: null,
                            tileColor: Color.fromRGBO(46, 46, 46, 1))),
                    flex: 1)
              ], direction: Axis.horizontal),
              width: MediaQuery.of(context).size.width * 1.000,
              height: 72,
              margin: EdgeInsets.only(left: 9, right: 8, top: 21)),
          Container(
              child: Flex(children: [
                Expanded(
                    child: SingleLineLeadingImageListItem(
                        height: 72,
                        leadingImage: Image(
                            image: AssetImage(
                                'images/5a882e785da5b8be376cd64fda95ca6c9e376e7f.png')),
                        leadingImageHeight: 56,
                        titleText: 'Kids',
                        titleTextFontSize: 16,
                        titleTextFontFamily: 'Roboto',
                        titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                        trailingWidget: null,
                        tileColor: Color.fromRGBO(46, 46, 46, 1)),
                    flex: 1),
                Expanded(
                    child: Padding(
                        padding: EdgeInsets.only(left: 3),
                        child: SingleLineLeadingImageListItem(
                            height: 72,
                            leadingImage: Image(
                                image: AssetImage(
                                    'images/2486cb439930bbd87670d6044e7cd3ffbb1622c5.png')),
                            leadingImageHeight: 56,
                            titleText: 'Liked Songs',
                            titleTextFontSize: 16,
                            titleTextFontFamily: 'Roboto',
                            titleTextColor: Color.fromRGBO(255, 255, 255, 1),
                            trailingWidget: null,
                            tileColor: Color.fromRGBO(46, 46, 46, 1))),
                    flex: 1)
              ], direction: Axis.horizontal),
              width: MediaQuery.of(context).size.width * 1.000,
              height: 72,
              margin: EdgeInsets.only(left: 9, right: 8, top: 14)),
          Padding(
              padding: EdgeInsets.only(left: 12, top: 26),
              child: Text('Jump back in',
                  style: TextStyle(
                      fontSize: 18,
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w600,
                      color: Color.fromRGBO(255, 255, 255, 1)))),
          Container(
              child: Row(children: [
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/4828627fbcfd92d6aa0680ce183af867a6078520.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(right: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/4b2c9cadc138c3d57e613658e081532130f80e64.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/9f6af78ba9c6566e4d1a6c06458e9e845fc0e02e.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11))
              ], crossAxisAlignment: CrossAxisAlignment.start),
              constraints: BoxConstraints.expand(height: 119),
              margin: EdgeInsets.only(left: 12, right: 16, top: 17)),
          Padding(
              padding: EdgeInsets.only(left: 12, top: 26),
              child: Text('Recently played',
                  style: TextStyle(
                      fontSize: 18,
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w600,
                      color: Color.fromRGBO(255, 255, 255, 1)))),
          Container(
              child: Row(children: [
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/9b0c638d92faeff1b2b8be9c719d48f983f87ab0.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(right: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/d540ce88eb53ebeea3f6a3f46cf3077e5fec1503.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11)),
                Container(
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'images/4a6b1816a0fa9a6bdd5fe4459a7e340c44dbb16f.png'),
                            fit: BoxFit.fill)),
                    height: 119,
                    width: 119,
                    margin: EdgeInsets.only(left: 11))
              ], crossAxisAlignment: CrossAxisAlignment.start),
              constraints: BoxConstraints.expand(height: 119),
              margin: EdgeInsets.only(left: 12, right: 16, top: 17)),
          Container(
              child: Container(
                  decoration:
                      const BoxDecoration(color: Color.fromRGBO(46, 46, 46, 1)),
                  child: Row(children: [
                    Container(
                        alignment: Alignment.topLeft,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'images/3b6e7710c505439063586bf01566cd4d91d78d8e.png'),
                                fit: BoxFit.fill)),
                        height: 56,
                        width: 56,
                        margin: EdgeInsets.only(left: 10, right: 6)),
                    Padding(
                        padding: EdgeInsets.only(left: 6),
                        child: Text('Star Wars - The Last Battle',
                            style: TextStyle(
                                fontSize: 16,
                                fontFamily: 'Roboto',
                                fontWeight: FontWeight.w400,
                                color: Color.fromRGBO(255, 255, 255, 1)))),
                    Container(
                        alignment: Alignment.topLeft,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'images/90f1ba99d38e9dd5fd95985b285511c80b049868.png'),
                                fit: BoxFit.contain)),
                        height: 30,
                        width: 30,
                        margin: EdgeInsets.only(left: 16)),
                    Container(
                        alignment: Alignment.topLeft,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(
                                    'images/e452b6284aca760c898d5d5ca13a4847e85ff002.png'),
                                fit: BoxFit.contain)),
                        height: 30,
                        width: 30,
                        margin: EdgeInsets.only(left: 12, right: 17))
                  ], crossAxisAlignment: CrossAxisAlignment.center)),
              width: MediaQuery.of(context).size.width * 1.000,
              height: 70,
              margin: EdgeInsets.only(left: 7, right: 10, top: 44))
        ], crossAxisAlignment: CrossAxisAlignment.start));
  }
}

It would be great to have your feedback. Codis currently in beta stage and we're working hard to improve the quality of code.

Web server battle: Rust vs Node.js

Olex Tkachuk — Mon, 20 Apr 2020 10:59:43 +0000

In theory, a new technology or a modern approach should have a lot of benefits, but the main question that matters is that - what is actually practical advantages of that in numbers?

In this article, I am going to compare web performance for three approaches - CDN (without SSR - Server Side Rendering), Node.js + SSR and Rust + SSR.

Making Star Wars website using React.js

Firstly, we need to create a dummy React.js app with cool content and a lot of JavaScript code and then setup SSR for it.

Let's grab our web app from the How To Improve React App Performance with SSR and Rust: Part I and add more heavy content there - JavaScript libs and code, images, text and css.

Deploying the React.js Web App

I am going to use Linode Cloud Hosting Service for all deployments and use single Frankfurt (Germany) location for the servers.

Linode Object Storage is suitable as static CDN. Node.js and Rust Web Servers will be deployed as Docker containers in Linode VM with next configuration: Ubuntu 18.04 LTS, Nanode 1GB: 1 CPU, 1GB RAM. In addition, we will use Envoy Proxy as Front Proxy for load balancing multiple containers.

Web Performance testing without scaling

Firstly, will test single container without scaling. We need to monitor Web Performance testing results in real browser, in order to measure with different settings and a particular Region. Suitable tool for it - PageSpeed Green, especially Free Plan that lets run up to 200 audits per month for free - more than enough for us.

CDN PageSpeed Score

As expected, React app with JavaScript code that needs to render data and do some mapping and JSON parsing is not well performed with just client rendering: 31 Score (First Contentful Paint (FCP): 0.95s, Speed Index (SI): 5.84s, Time to Interactive (TTI): 6.05s, First Meaningful Paint (FMP): 0.95s, First CPU Idle (CPU): 6.04s, Max Potential First Input Delay (FID):1.42s):

Node.js PageSpeed Score

Express.js has simple API and all features that we need:

const app = express();
app.use(compression());
app.get('/test', (req, res) => res.send('ok'));
app.use('/static', express.static(path.join(__dirname, 'dist/web')))
app.get('/*', async (req, res) => {
  try {
    const content = await getServerHtmlByRoute(req.path || '/');
    res.send(content);
  } catch (e) {
    console.error(e);
  }
});

Function getServerHtmlByRoute() contains the same implementation as in the How To Improve React App Performance with SSR and Rust: Part I article.

Using Server Side Rendering improved PageSpeed score significantly - from 31 to 79 (FCP: 0.41s, SI: 1.80s, TTI: 3.3s, FMP: 1.1s, CPU: 3.21s, FID: 1.35s)

![Node.js Web Performance Test Result]!(https://dev-to-uploads.s3.amazonaws.com/i/wgaixhj04ltzk2hwnl1h.png)

Rust (actix-web) PageSpeed Score

Actix-web implementation is based on the Part II : Rust Web Server article with one improvement: instead of reading static files from a disk every request, the web server read all files at the start to cache in memory and then serves files from the cache.

#[macro_use]
extern crate lazy_static;

lazy_static! {
    static ref STATIC_FILES: HashMap<String, Bytes> = {
        let files = match get_files() {
            Ok(res) => res,
            Err(_) => HashMap::default(),
        };

        files
    };
}

async fn index(req: HttpRequest) -> impl Responder {
    let path_req = req.match_info().query("tail").get(1..).unwrap_or_default().trim().clone();
    let path = if path_req.len() == 0 {
        "home_page"
    } else {
        match ROUTES.get(path_req) {
            Some(r) => r,
            None => "index"
        }
    };

    match STATIC_FILES.get(&format!("static/{}.html", path)) {
        Some(file) => {
            let body = once(ok::<_, Error>(file.to_owned()));

            HttpResponse::Ok()
                .content_type("text/html; charset=utf-8")
                .header("Cache-Control", "no-cache, no-store, max-age=0, must-revalidate")
                .header("pragma", "no-cache")
                .header("x-ua-compatible", "IE=edge, Chrome=1")
                .streaming(body)
        },
        None => {
            println!("index.html is not found");

            HttpResponse::Ok()
                .content_type("text/html; charset=utf-8")
                .header("Cache-Control", "no-cache, no-store, max-age=0, must-revalidate")
                .header("pragma", "no-cache")
                .header("x-ua-compatible", "IE=edge, Chrome=1")
                .body("Resource not found")
        }
    }
}

Rust web server is faster: 86 (FCP: 0.45s, SI: 1.26s, TTI: 3.21s, FMP: 0.45s, CPU: 3.19s, FID: 1.53s)

In real production we should scale our web servers, let's have a look if it improves web performance.

Scaling Node.js Web Server

We have 1Gb memory limitation, so will try to scale to 3, 5, 10 and 20 instances.

3 instances ⇾ 82 score (FCP: 0.45s, SI: 1.32s, TTI: 3.56s, FMP: 0.45s, CPU: 3.54s, FID: 2.04s)
5 instances ⇾ 84 score (FCP: 0.49s, SI: 1.62s, TTI: 3.06s, FMP: 0.49s, CPU: 3.03s, FID: 1.35s)
10 instances ⇾ 78 score (FCP: 0.33s, SI: 1.95s, TTI: 3.39s, FMP: 0.33s, CPU: 3.37s, FID: 1.86s)
20 instances ⇾ 73 score (FCP: 0.34s, SI: 2.56s, TTI: 3.13s, FMP: 0.34s, CPU: 3.06s, FID: 1.33s)

Node.js is good perform with 5 instances. Network loading can help us to understand Node.js Web Server performance for serving dynamic (*.js files) and static content:

Scaling Rust(actix-web) Web Server

3 instances ⇾ 87 score (FCP: 0.46s, SI: 1.27s, TTI: 3.11s, FMP: 0.46s, CPU: 3.06s, FID: 1.42s)
5 instances ⇾ 88 score (FCP: 0.45s, SI: 1.31s, TTI: 2.95s, FMP: 0.45s, CPU: 2.93s, FID: 1.39s)
10 instances ⇾ 89 score (FCP: 0.33s, SI: 1.16s, TTI: 3.07s, FMP: 0.33s, CPU: 3.02s, FID: 1.39s)
20 instances ⇾ 87 score (FCP: 0.34s, SI: 1.18s, TTI: 3.13s, FMP: 0.34s, CPU: 3.10s, FID: 1.49s)

Rust service uses less memory, so we can scale up to 10 instances. In addition, actix-web can handle much faster web requests:

Summary

Rust microservices require less resources and it means more scalability for the same amount of resources. In addition, actix-web handles requests much faster - a Browser downloads from Germany to Australia 45k index.html file with SSL handshaking for 1.12s instead of 1.62s and 174k leia.jpg for 344ms / 957ms from Node.js.

My investigation does not 100% accurate - it could be more or less optimal implementations of Node.js (Express.js) and Rust (actix-web), different measurements, etc… However, the big picture pretty much accurate: if you need maximum Web Performance (PageSpeed Score) - use Rust Web Server with Server Side Rendering for it.

PageSpeed Driven Development

Olex Tkachuk — Wed, 18 Mar 2020 22:15:13 +0000

No one likes slow websites - users, developers, bots, even Google rank algorithm. When you start developing a new web application everything is running smooth and fast. Usually, web performance is not being checked before going live for the very first time. At this point, fixing performance issues requires reviewing the whole web application and third-party scripts that were added during the development period.

"Let's Fix It" Approach

So, the new website is live, the issues are fixed or in the process of fixing. After some time and a few or more release cycles, one day your SEO engineer tells you about the low position in Google search results. One of the most possible reasons for that is low-performance score in Google PageSpeed Insights. Therefore, you need to go back to review and fix the problem again :-(

Choosing Suitable Performance Metric

There is no single service or tool to measure web performance but mostly, they are SEO-focused on optimization for Google Search Engine. It would be smart to use the same sets of metrics for that - Google Lighthouse Tool that generates PageSpeed Insights reports. The most important indicator is Performance Score which summarizes the page performance. This score is determined by running Lighthouse to collect and analyze lab data about the page. A score of 90 or above is considered fast, 50 to 90 is considered moderate, and below 50 is slow.

Getting Performance Score

It is pretty easy to get the current Performance Score for a web page. You can use Chrome Browser with Audit Tab in Dev Tools. Another option is using PageSpeed Insights for it. It is good enough for using "Let's fix it" approach, but it has some disadvantages:

Manual score monitoring that is time-consuming to run for every change
No possibility to get scores from different world's regions

Monitoring PageSpeed Performance Score

All you need is using a service that can monitor the Performance Score for different regions and use Lighthouse for it.

Is that enough for PDD? The short answer is No. Ideally, web performance monitoring should be part of the development process, the same as Unit Testing or End 2 End Testing. In that case, it is possible to track all changes and prevent decreasing web performance.

Thus, starting a new web application using PageSpeed Driven Development approach helps to be on the green side of the Web Performance Score from the start and keeps the project in the same position during the whole development process.

Using PageSpeed Green

This Web Performance Monitoring Tool lets you monitor current performance indicators continuously by integrating with CD/CI (using PageSpeed Green CLI). This allows you to notice in time all web performance degradation during development process.

Summary

With everything mentioned above, you won't let your website performance hold you back. Make smart performance-related decisions about it, use a good monitoring tool to improve your audience satisfaction and sales. Your site loading time and quality can actually be an asset rather than an obstacle.

How To Improve React App Performance with SSR and Rust [Part II: Rust Web Server]

Olex Tkachuk — Sat, 15 Feb 2020 11:53:51 +0000

Continue creating boosted Server Side Rendering implementation. In the first part we prepared ReactJS Application with SSR script that lets choose the best technologies for our Web Server.

Choosing Tech Stack for the SSR Web server

Rust has the most powerful combination of safety and hight speed for today (you can check out here why - www.rust-lang.org). In addition, Actix-web framework is the fastest one according TechEmpower Framework Benchmark.

So, let’s use the best technologies for our forced Web Server.

Setup Rust App

It is easy to setup Rust on your computer - just go to rustup.rs website and install rustup CLI in just one step.

Next step is initialisation a new app. Cargo, Rust package manager can help with it: run cargo init inside repository folder.

The Cargo.toml file for each package is called its manifest. It contains settings and dependencies. New one should look like that:

[package]
name = "rust-ssr-webserver"
version = "0.1.0"
authors = ["Alex Tkachuk <alex@pagespeed.green>"]
edition = "2018"

Now we can add our dependencies:

[dependencies]

actix-web = { version = "^2.0.0", features = ["rustls"] }
actix-rt = "^1.0.0"
actix-files = "^0.2.1"
env_logger = "^0.7.1"
futures = "^0.3.4"
mime_guess = "^2.0.1"
serde_json = "^1.0.40"
lazy_static = "^1.4.0"
rustls = "^0.16.0"

Using actix-web is quite easy to create web server. Firstly, we need to read SSL keys for supporting HTTPS and HTTP/2:

let mut config = ServerConfig::new(NoClientAuth::new());
let cert_file = &mut BufReader::new(File::open("cert.pem").unwrap());
let key_file = &mut BufReader::new(File::open("key.pem").unwrap());
let cert_chain = certs(cert_file).unwrap();
let mut keys = rsa_private_keys(key_file).unwrap();

config.set_single_cert(cert_chain, keys.remove(0)).unwrap();

Be aware of using unwrap() in production - if it fails, the app will crash (panic).

We are ready for actually Web Server code now:

HttpServer::new(|| {
        App::new()
            .wrap(middleware::Logger::default())
            .service(Files::new("/static", "static"))
            .default_service(
                web::resource("")
                    .route(web::get().to(index))
                    .route(
                        web::route()
                            .guard(guard::Not(guard::Get()))
                            .to(|| HttpResponse::MethodNotAllowed()),
                    ),
            )
    })
    .bind_rustls("0.0.0.0:3001", config)?
    .run()
    .await

This line: .service(Files::new("/static", "static") is for serving all static asserts that we created by running npm build:ssr in previous article - (Part I: SSR). For handling HTML-files requests from ReactJs App we need to use .default_service() with serving all routes by using web::resource("") with empty string. The index function is handler for such requests:

async fn index(req: HttpRequest) -> impl Responder {
    let path_req = req.match_info().query("tail").get(1..).unwrap_or_default().trim().clone();
    let path = if path_req.len() == 0 {
        "home_page"
    } else {
        match ROUTES.get(path_req) {
            Some(r) => r,
            None => "index"
        }
    };

    match std::fs::File::open(format!("static/{}.html", path)) {
        Ok(mut file) => {
            let mut contents = String::new();
            file.read_to_string(&mut contents).unwrap_or_default();

            HttpResponse::Ok()
                .content_type("text/html; charset=utf-8")
                .header("Cache-Control", "no-cache, no-store, max-age=0, must-revalidate")
                .header("pragma", "no-cache")
                .header("x-ua-compatible", "IE=edge, Chrome=1")
                .body(contents)
        },
        Err(e) => {
            // error handling
        }
    }
}

The function implements the routing logic, so our web server can return right HTML file (React server rendered) by a route. The ROUTES constant is basically contains data from routes.json that was generated on React side.

One improvement that you can do for this implementation is using a cash instead of directly reading a file from disk.
Finally, copy folder dist/web to static, obviously, it should be automatic step, and run our Web Server by cargo r.

Full example is located in the GitHub repository.

The final article of Server Side Rendering will be about testing performance between this solution vs Node.js

You can check how fast this approach in production by getting Google PageSpeed Insights Performance score for PageSpeed Green website.

Happy coding!

Website vector created by slidesgo - www.freepik.com

How To Improve React App Performance with SSR and Rust [Part I: SSR]

Olex Tkachuk — Fri, 14 Feb 2020 21:33:25 +0000

Server-side rendering (SSR) is technique when content for a web page is rendered on the server using JavaScript.

SSR speeds initial loading up that, in turn, helps increase Google PageSpeed Performance score for SPA (React.js, Vue.js, Angular, etc.). Usual approach is to use Node.js web server such as Express.js and render on the server in the fly. We all know that Node.js is quite fast, but we want to boost our web app to maximum available speed.

Does SSR require Node.js?

Commonly, React.js Apps have static numbers of routes. So, we can easily make rendered pages at the same stage when JavaScript bundles are generating. So, we can use these static HTML files with any web server that lets to implement routing logic. That basically means by getting a route, e.g: test.com/test the web server returns according an HTML file that is created by using ReactDOMServer.renderToString()

React App Setup

Let's first start with preparing front-end side as an example will be using React.js.
We need to create a simple React.js website with three routes. At first, we should create a file with Routes for using it in React app and web server.

const ROUTES = {
  HOME_PAGE: '/',
  ABOUT: '/about',
  CONTACT: '/contact',
};

// Keep it as CommonJS (Node.js) export
module.exports = ROUTES;
}

Normally, React.js app optimisation starts with code splitting. In our case is good to split code by routes. Good choice for it is using @loadable/component. This library has ready to go solution for SSR that is located in the @loadable/server npm package. The first package allow to use dynamic import inside React, therefore Webpack can split bundle by these imports.

const HomePage = loadable(() => import('./pages/home/HomePage'), {
  fallback: <Loading />,
});

In addition, we should use StaticRouter instead of BrowserRouter for SSR side. To achieve this we can have two different entry points: App.jsxand AppSsr.jsx, the last one includes:

import { StaticRouter } from 'react-router';

import Routes from './Routes';

function App({ route }) {
  return (
    <StaticRouter location={route}>
      <Routes />
    </StaticRouter>
  );
}});

Next task for us is creating a function that creates an HTML file by route. Using @loadable/server code looks like that:

const { ChunkExtractor } = require('@loadable/server');

async function createServerHtmlByRoute(route, fileName) {
  const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats });
  const { default: App } = nodeExtractor.requireEntrypoint();

  const webExtractor = new ChunkExtractor({ statsFile: webStats });

  const jsx = webExtractor.collectChunks(React.createElement(App, { route }));
  const innerHtml = renderToString(jsx);
  const css = await webExtractor.getCssString();
  const data = {
    innerHtml,
    linkTags: webExtractor.getLinkTags(),
    styleTags: webExtractor.getStyleTags(),
    scriptTags: webExtractor.getScriptTags(),
    css,
  };

  const templateFile = path.resolve(__dirname, './index-ssr.ejs');

  ejs.renderFile(templateFile, data, {}, (err, html) => {
    if (err) {
      console.error(err);
      throw new Error(err);
    } else {
      const htmlMini = minify(html, {
        minifyCSS: true,
        minifyJS: true,
      });
      fs.writeFile(`${distPath}/${fileName}.html`, htmlMini, 'utf8', () => {
        console.log(`>>>>>>>>>>>>>>>> for Route: ${route} ----> ${fileName}.html --> Ok`);
      });
    }
  });
}

So, now we can go throw our routes and create all HTML files that we need:

async function generateSsr() {
  process.env.NODE_ENV = 'production';

  Object.entries(ROUTES).forEach(async ([key, value]) => {
    routes.push([
      value.substr(1),
      key.toLowerCase(),
    ]);
    try {
      await createServerHtmlByRoute(value, key.toLowerCase());
    } catch(e) {
      console.error(e);
      process.exit(1);
    }
  });
}

As you noticed in the createServerHtmlByRoute function there is an HTML template which we are using for putting into it generated HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <style id="css-server-side"><%- css %></style>
  <%- linkTags %>
</head>
<body>
  <div id="app"><%- innerHtml %></div>
  <%- scriptTags %>
  <%- styleTags %>
</body>
</html>

It looks like this approach is not perfect because in this case, each HTML file contains some CSS duplicates, such as CSS libraries or common CSS. But it is the simplest solution for speed initial loading up. Another one is an HTTP/2 feature - Server Push when a Web Server pushing CSS files with HTML together.

Finally, after running the build script we should get HTML files for all routes and default - index.html:

Full example is located in the GitHub repository

Thus, we got everything that we need from JavaScript/React.js side. The next article will cover Rust Web server implementation.

You can check how this approach works in production by getting Google PageSpeed Insights Performance score for PageSpeed Green website.
Happy coding!

Website vector created by slidesgo - www.freepik.com