C’est la “Vue” – eMAG TechLabs – Medium

Neat article comparing the journey going from #reactjs to #vuejs

  • As you will see, it’s more about knowing what you want and not the number of articles that endorse a framework, the community or even the company behind it.HX TeamHX (Team) stands for Human Experience and was our team name of choice as it suggests the vision that we believe in: “Making intuitive and easy to use applications for all eMAG’s employees.”
  • The framework should have been used for internal applications in eMAG that adopts this architectural design style.Making the choice was not easy, so we’ve started with the following needs and expectations:Large community of developersFast DOM ChangesGreat architectureEasy debuggingTherefore we’ve chose React over Angular 2 (it was in Beta back then).
  • React was created to make DOM changes fast, really fast, so you will have to use React functions to make use of this, some of which you will not be familiar with (because React has a different architectural style)React plugins were not so much customizable as changing some of them required making a forkDon’t get me wrong, React is great, but only if you want to develop a simple application where the UI should not be consistent across different technologies or where DOM changes should be made really, really fast.Vue JSFinding meaning againAs we were put into the position of acknowledging that React doesn’t fit eMAG’s internal needs, we’ve come to discover Vue.js.Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.
  • Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.Vue was not only great, it was perfect for what we’ve wanted to do:It had an amazing boilerplate with dev and prod tasksIt had linters, libraries for unit and functional tests, all out of the boxIt could be used with jQuery (by making wrappers for plugins)It’s smallIt accepts FLUX architecture if you need itIt has an amazing template engineThe development is easyIt separates the template engine from components javascriptBy making the decision of using Vue we’ve managed to reduce the roadmap time by half (even starting from zero) compared to React.So after a month of hard work, we’ve made wrappers for our JQuery components from eMAG Apps UI Kit, created examples for them, simple unit tests, services all by having a clean code and RESTful APIs to test our frontend.React JS componentexport class Autocomplete extends React.Component {constructor(props) { super(props); this.state = { value: this.props.value || ”, } }componentWillMount() { this.options = this.
  • find(‘#date_time_’ + } catch (ex) {} } }/scriptConclusionNow we can say that when making a choice we have different criteria that we are looking for:Easy to useFamiliarCommunity (not so much plugins, but responses for issues)Reuse of our code

As technology is evolving at a fast pace and microservices are a thing now, the number of frontend libraries/frameworks that endorse this architectural design style has gone up to the roof. Making a…
Continue reading “C’est la “Vue” – eMAG TechLabs – Medium”

Recreating the Chrome Console in React – LogRocket

  • Since a session could potentially have thousands of logs, we knew that we’d need to build a virtual list where DOM nodes are unmounted when they leave the viewport.User-interactive JSON treeExpanding objects in the Chrome ConsoleLike the Chrome javascript console, users should be able to expand objects that were logged.
  • Simply knowing the length of the list and having a rowRenderer function that can render a given row is all it needs!Our ImplementationI’m not going to describe every detail of our console implementation since much of it is a standard application of react-virtualized, but there are a few bits where we diverged that are interesting.Row HeightsAs I described earlier, react-virtualized takes a prop rowHeight which is a function that returns the height of a row at a given index.In this screenshot of the LogRocket log viewer, notice that there are 2 states for each row: default, and expanded.
  • However, when a row is expanded, its height varies as the user expands different subtrees of the object.We needed a way to write a rowHeight function that handles dynamic height rows- something like this:In order to implement getExpandedRowHeight in the above psuedo-code, there were two potential options.Guarantee deterministic height of an expanded objectTo achieve this, we would have needed to design the object tree view component from the ground up to make its height a pure function of the subtrees that are expanded.
  • Also, making this guarantee would make it difficult to iterate on the look and feel of the log viewer since changes to things like margins and padding would need to be adjusted for.Use react-measureInstead, we opted to use a library called react-measure which provides a helpful abstraction for writing components that are aware of their own height.react-measure wraps a given component and takes a prop, onResize which is a function that is called whenever the component’s size changes.In our case, whenever the size of a given row changes, we dispatch a Redux action which stores the height of that row in Redux.
  • Then in our rowHeight function, we simply get the height of the row from Redux, and react-virtualized can render it properly.There is a small performance penalty to this approach, since react-measure uses the DOM resize-observer API which isn’t implemented natively in all browsers, but in practice this is fairly minimal.Apollo ClientTo handle data fetching, we use apollo-client which is a GraphQL client that works nicely in React apps.

One of the core features of LogRocket is the replay of console and Redux logs in production web apps. To do this, you add the LogRocket SDK to your app which sends logs to LogRocket. Then, when…
Continue reading “Recreating the Chrome Console in React – LogRocket”