Architecting a Squiggle – Birchbox Unboxed

Architecting a Squiggle  #react #components #css #reactjs

  • It looked like this, and was used to visually emphasize key words or numbers in a block of text.A SquiggleWith the assumption that this coral squiggle would be used only sporadically on a few key pages, we uploaded an image of the squiggle to our CDN and set it as…
  • Our new site, which was built in React, encouraged a component based approach.I created a Squiggle component (later renamed Highlight when it supported shapes other than squiggles) that wrapped any arbitrary content.
  • It accepted props for color, type, and alignment with respect to its content.Highlight type=’wave’ fill=’coral’ alignment=’right’ {title}/HighlightThe component used react-measure to listen to the height of if its children and record it in the component state.
  • ‘wave’ : ‘none’} fill=’coral’ alignment=’right’ {title}/HighlightAn example of conditional highlighting, made possible by the ‘none’ shapeRecently one of my teammates built support for Highlight in our custom Markdown component.
  • No developer time required!This tout was built by our web production team using only Markdown in the CMSWhy I Love itHighlight is one of my favorite components in the Birchbox repository because it makes highlighting text on our site as easy and therapeutically pleasing as highlighting text on a physical page.

When Birchbox rebranded in 2016, our new brand guide included a squiggle. It looked like this, and was used to visually emphasize key words or numbers in a block of text. With the assumption that…
Continue reading “Architecting a Squiggle – Birchbox Unboxed”

Qolzam/react-social-network – Simple Social Network with #reactjs

Qolzam/react-social-network - Simple Social Network with #reactjs

  • The React Social Network is an open source project relying on React a powerful javascript library for building the user interface.
  • In this project, I tried to show some features of react/react components as a social network.
  • For those who prefer writing code by typescript, now React Social Network support both javascript and typescript language.
  • I recommend that you get to know React before using React Social Network.
  • React Social Network has built by React components, so understanding how React fits into web development is important.

react-social-network – Simple React Social Network
Continue reading “Qolzam/react-social-network – Simple Social Network with #reactjs”

Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so

Read our interview with @NorbertdeLangen about his recent work on Storybook:  #ReactJS

  • We strongly believe the problems Storybook solves are not unique to any single platform.Of course, we’re also going to be improving the features and performance of Storybook, and create new ways for you to extend Storybook and customise it for your use-case.
  • Finally: we’re really seeing the community getting involved with Storybook, we get pull requests making Storybook better in all sorts of ways we didn’t expect.
  • So who knows what will be included in the next release?Has rebranding from React Storybook changed its culture or direction?The culture certainly changed — now the community itself is driving Storybook forward.
  • If anything, I’d say our focus on helping the community co-maintain Storybook has had a major impact.Do your company clients adapt React style guides to their workflow?Yes in fact, most of them do.What do you think is the future of web and mobile development?Who knows?
  • I’m super excited about native support for ES modules in the modern browsers and Node.js!What are your favorite components, libraries, or community projects?Babel, Webpack, React, Glamorous, Yarn, Express, ESlint, Prettier, Jest, GraphQL.I’m also a huge fan of community-driven meetups.Pick one and tell us why: Redux or MobX?It depends.

Today, we’re opening our new series of interviews for React Day Berlin. Since Norbert de Langen is going to speak about building Storybook in Berlin in December, we decided to ask him a couple of…
Continue reading “Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so”

ReactJS, React Native & GraphQL Newsletter: 58

  • , discuss the new licensing updates to React, React Native & GraphQL, use Power BI for data visualizations and much more!
  • Hot Module Replacement support to Haul, a command line tool for developing React Native apps based on Webpack.
  • If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form.
  • That’s it for the newest edition of the best ReactJS, React Native & GraphQL Newsletter!
  • Like & follow for all the news about ReactJS, React Native & GraphQL!

This week we look at React 16 (finally!), discuss the new licensing updates to React, React Native & GraphQL, use Power BI for data visualizations and much more!
Continue reading “ReactJS, React Native & GraphQL Newsletter: 58”

React.js Efficient Server Rendering – Hacker Noon

#ReactJS #Javascript RT @ReactAmsterdam: Make #ReactJS Server Rendering Efficient:

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

React.js Efficient Server Rendering – Hacker Noon

“React.JS Efficient Server Rendering” by @tigranbs  #NodeJS #reactjs #javascript #python

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

Measuring performance gains — AngularJS to React (with Redux or Mobx)

  • DOM count — AngularJS vs ReactScenario 1 — Switching ViewsWe navigate through a list of 5ooo tickers showing 150 tickers at a time every 0.5sec.Below chart plots the script execution time for each refresh from Chrome’s performance timeline.
  • React/Mobx version took slightly little more time than Redux version but not far from it.Script execution time comparison (AngularJS vs React/Redux vs React/Mobx) — Replacing 150 tickers every 0.5 secBelow chart shows the frames per sec(fps) as the refresh happens.
  • Redux version is super consistent with its low memory profile all throughout the run.AngularJS emitted lot of GC events as the ticker list is refreshed with 150 new itemsRedux performance profile shows no GC pauses whatsoever during the script execution.React/Redux — No GC pausesMobx profile shows few GC pauses but not as many as AngularJS version.React/Mobx — Few GC pauses but not as many as AngularJS versionScenario 2 — Adding TickersWe will add 50 tickers to the visible collection every 100ms until we show all the tickers.
  • React’s virtual dom diffing algorithm is showing its strength compared to AngularJS’s dirty checking.Adding Tickers — Script execution time comparisonWith AngularJS, adding new items caused jank in the browser right from the start (red bars) and the number of frames per second dropped from 60 early on and never recovered (green area) during the entire add operation.AngularJS — Add tickers timelineRedux created jank once early-on but it is all clear until we crossed half the way of adding new tickers.
  • FPS also nicely recovered to 60 in between the add operations.Redux-Add Tickers timelineMobx caused jank few times more times than Redux but nowhere close to AngularJS.Mobx — Add tickers timelineMemory GC eventsRedux consumed about half the heap size as AngularJS during the entire run.

In this post, I will go over the performance and memory profiles of a various UI scenarios implemented using AngularJS, React/Redux and React/Mobx. We will compare and contrast the performance of…
Continue reading “Measuring performance gains — AngularJS to React (with Redux or Mobx)”