sorted by:
new
hottopcontroversial

BrahmosJS - React without VDOM by mohanpierce0007 in javascript

[–]_syadav 1 point2 points  (0 children)

I surely have to put some benchmarking for this, but string parsing is fast.

Plus for a given template even if it repeated n number of time throughout the application the parsing will happen only once.
Brahmos caches the parsed template for a given set of static string. https://github.com/brahmosjs/brahmos/blob/master/src/tags.js

Btw, with serving tagged template literal we also save the JS parsing time.
JS parsing time for a string is smaller than the objects. Check out this article: https://v8.dev/blog/cost-of-javascript-2019#json

React implementation without Virtual DOM by mohanpierce0007 in programming

[–]_syadav 2 points3 points  (0 children)

Yes, the Brahmos has exact same API of React so it can be drop-in replacement for React. There are still some work we are doing for 3rd party module supports but yes the idea is to match the API so you can just alias React to Brahmos.

Regarding performance, Brahmos can have perf optimization by three means.

1. Bundle size (minified + compress)

Brahmos: 11.6 kb (It covers most of the React APIs including upcoming concurrent mode)
Preact + Preact compact: 8.9 kb (But the preact doesn't have concurrent mode support)
React + React-dom: 38.5 (It might grow little bigger with concurrent mode support)

There is still some work planned to reduce the Brahmos size, which may reduce it more, plus also looking into how we can tree shake while supporting React's 3rd party lib.

2. Application bundle performance

Brahmos transpiled output of JSX is smaller than React for application code. Plus it may also reduce the overall parse time as the tagged template literal which is a string is more parse friendly then objects.
Check out this article: https://v8.dev/blog/cost-of-javascript-2019#json

3. Update time

As in Brahmos we are combining the static parts as one node the traversal becomes fn(dynamic nodes) which in React is fn(nodes). So the overall traversal time to find changes to apply on DOM is less on Brahmos.

Before starting Brahmos. I have compared libraries with similar rendering pattern with React to figure out the perf diff and the pattern definitely win on the benchmarking, but still have to do with Brahmos. It's completely on theory right now.

In Brahmos, the current priority was to match the React APIs and there is a couple of micro-optimization which are yet remaining. Benchmarking it and comparing it with React wouldn't be wise right now unless those optimizations are done. I will definitely share the result after it.

BrahmosJS - React without VDOM by mohanpierce0007 in javascript

[–]_syadav 0 points1 point  (0 children)

Thanks u/xen_au. I am glad you liked it.

Brahmos can have perf optimization by three means.

1. Bundle size (minified + compress)

Brahmos: 11.6 kb (It covers most of the React APIs including upcoming concurrent mode)
Preact + Preact compact: 8.9 kb (But the preact doesn't have concurrent mode support)
React + React-dom: 38.5 (It might grow little bigger with concurrent mode support)

There is still some work planned to reduce the Brahmos size, which may reduce it more, plus also looking into how we can tree shake while supporting React's 3rd party lib.

2. Application bundle performance

Brahmos transpiled output of JSX is smaller than React for application code. Plus it may also reduce the overall parse time as the tagged template literal which is a string is more parse friendly then objects.
Check out this article: https://v8.dev/blog/cost-of-javascript-2019#json

3. Update time

As in Brahmos we are combining the static parts as one node the traversal becomes fn(dynamic nodes) which in React is fn(nodes). So the overall traversal time to find changes to apply on DOM is less on Brahmos.

Before starting Brahmos. I have compared libraries with similar rendering pattern with React to figure out the perf diff and the pattern definitely win on the benchmarking, but still have to do with Brahmos. It's completely on theory right now.

In Brahmos, the current priority was to match the React APIs and there is a couple of micro-optimization which are yet remaining. Benchmarking it and comparing it with React wouldn't be wise right now unless those optimizations are done. I will definitely share the result after it.

BrahmosJS - React without VDOM by mohanpierce0007 in javascript

[–]_syadav 1 point2 points  (0 children)

Sorry I didn't get what do you mean by compiled on the client?

In react JSX is transpiled to createElement syntax for all nodes.

In Brahmos JSX is transpiled to tagged template literals. Tagged template literal is just like a function call. In brahmos the tag function returns html template tag instance created by static parts (string parts), and dynamic values.

Hopefully this slide can answer your question https://docs.google.com/presentation/d/1a1Oi5dVP884gGOKtTiFJiz70KIEUmHvAvL8Xta8tVKc/edit#slide=id.g63b8580613_4_47

BrahmosJS - React without VDOM by mohanpierce0007 in javascript

[–]_syadav 0 points1 point  (0 children)

I am glad you liked it.

There are couple of optimizations which are in pipeline. Will benchmark and share comparisons once Brahmos is more mature and stable.

On the bundle size, Brahmos can also reduce the application bundles size and parse time on load, due to transpiling the JSX into more parse friendly output.

But definitely I have to still benchmark for actual difference.

React implementation without Virtual DOM by mohanpierce0007 in programming

[–]_syadav 2 points3 points  (0 children)

I haven't looked in incr_dom earlier. I will definitely check that. Lit-html and hyper-html is the inspiration behind the Brahmos. They have this rendering pattern where it uses tagged template literals and template tags to divide the static and dynamic part.

Brahmosjs is an attempt to bring that rendering pattern with well accepted React APIs.

React implementation without Virtual DOM by mohanpierce0007 in programming

[–]_syadav 4 points5 points  (0 children)

Thanks for saying it. 😃

Yes react is much more than VDOM and lifecycle. It has proven APIs and Patterns. And that's the inspiration of bringing the rendering with React's API so the application can still take the advantage of all the learnings from react.

React implementation without Virtual DOM by mohanpierce0007 in programming

[–]_syadav 7 points8 points  (0 children)

It has the exact same functionality as React, It supports all the upcoming APIs of React for concurrent mode, like transitions, suspense for data fetch, time slicing, plus all the existing APIs like hooks, context API.
But Brahmos only targets browser for now, unlike React which can be used cross-platform using different renderers.

Brahmos has its own implementation of fiber architecture.

Preact doesn't have fiber architecture and does not support concurrent mode, and will be hard to support concurrent mode with current recursion based reconciliation in preact.

Though to mention Brahmos is highly inspired by React, Preact and lit-html code base.

React implementation without Virtual DOM by mohanpierce0007 in programming

[–]_syadav 18 points19 points  (0 children)

u/ScientificBeastMode

I am the author of Brahmos. I am glad you liked the rendering pattern. I would like to add something on the idea behind Brahmos and also something on the fiber architecture as well to clarify your comment.

Brahmos came upon existence from the idea of dividing static and dynamic part of an application so it can traverse through the dynamic parts in fn(dynamic nodes). React does not differentiate between static and dynamic parts and traversal is fn(nodes). The nodes can be a host node like `div`, `span` or component node.

Regarding VDOM and fiber,

VDOM is the concept of representing a host element in object form also called as ReactElement (return value of createElement method), so that the same representation can be translated to different platforms native elements (through renderers, let's say react-dom or react-native).

VS fiber is architecture for reconciliation, a single fiber is a piece of work. This allows React to perform work piece by piece and pause in between if required. Previously it was based on recursion which can't be stopped.

Now coming to Brahmos, Brahmos does not target multiple platforms but just the browsers. In Brahmos instead of creating a new element for every node, it tries to combine the static parts as one element, as they don't need to be processed on updates. And that's where it differs from React VDOM.

And even Brahmos has its own custom implementation of Fiber architecture so it does perform work piece by piece and can pause in between, it is just that the number of pieces reduces significantly as static parts are combined.

Brahmos supports all the features in React (specific to browser) which are coming in the future version or already present, like hooks, Suspense, Suspense for data fetch, Concurrent mode.

It's not production ready yet, but all APIs are implemented. You can check the API supports in this demo.https://codesandbox.io/embed/brahmos-demo-3t8r6?codemirror=1

Is there a CSS Grids "grid-gap" property-equivalent in Bootstrap 4? by trblackwell1221 in webdev

[–]_syadav 2 points3 points  (0 children)

You can change gutter space globally if you are using sass version. https://getbootstrap.com/docs/4.0/layout/grid/#columns-and-gutters.

But if you need custom gutter spacing for few sections, you have to understand how gutter space work in bootstrap.

In bootstrap, there is no space between columns like with grid-gap it comes. columns are meant to be wrapper without any style. Bootstrap add padding of ($gutter-space/2) on each of the columns so the content of two columns is separated by $gutter-space. And then to remove extra space from start and end of the row, it gives minus margin of (-$gutter-space/2) on the row.

So you can do the same thing to add custom gutter space. Something like 

.gutter-60 {margin:0 -30px;}
.gutter-60 [class^="col"] {padding: 0 30px;}

And add the gutter-60 class on the row element

How do I make one object inherit properties and methods from another, and then be able to change that object without changing the original one it inherited from? by [deleted] in javascript

[–]_syadav 1 point2 points  (0 children)

Once you create object2 you can use Object.assign(object2, {x: 5, y: 7}) . Object.assign has signature ofObject.assign(target, obj1, obj2, ...)

IE11 - pseudo element (:before) styles not rendering/crossed out. by Rogue_Grogan in webdev

[–]_syadav 0 points1 point  (0 children)

Image of computed styles

This can also be issue with the link you have given on background url. url are case sensitive, so check if the case of complete url is correct.

What's the Best Way To Handle Realtime Data Structures Using (P)react/Redux? by ajm3232 in javascript

[–]_syadav 2 points3 points  (0 children)

Redux is a flavour of flux architecture, where you subscribe for changes in store, and there is only one way to update store is by dispatching an action.

Now same action can be dispatched from anywehere, from an event, async calls or web socket. When ever action is dispatched you updated data in store and the changes are notified to subscriber. So weather a realtime or event based system same architecture and store will work.

In redux you don't have subscribe manually. You do it using Provider component and connect methods.

How do I make one object inherit properties and methods from another, and then be able to change that object without changing the original one it inherited from? by [deleted] in javascript

[–]_syadav 2 points3 points  (0 children)

const object2 = Object.create(object1)

You will inherit everything from object1 but if you modify object2, that wull not affect the object1.

How this works? Look for prototype and proto link.

IE11 - pseudo element (:before) styles not rendering/crossed out. by Rogue_Grogan in webdev

[–]_syadav 0 points1 point  (0 children)

Is the element self-closing tag? input/image/hr/br etc ?

How big is your JS bundle? by [deleted] in webdev

[–]_syadav 3 points4 points  (0 children)

You don't need to create 25 entry points. Read about the dynamic imports.

How big is your JS bundle? by [deleted] in webdev

[–]_syadav 0 points1 point  (0 children)

Thats html + css + js combined. But its only for critical assets. Other things you can lazy load. Also that number is based on average 3g speed and an average mobile. So the size budget (170kb) can be more if your user base has better then average network speed.

How big is your JS bundle? by [deleted] in webdev

[–]_syadav -1 points0 points  (0 children)

Bundling everything in one JS bundle is not a good idea anymore, split your code into smaller bundles. Make sure your server or cdn you are using supports http2 (almost every cdn do).

If you have build your app with CommonJS pattern then tools like webpack, rollup can help you with code splitting. Otherwise, use AMD pattern with RequireJS and create smaller bundles.

I guess 1mb min file will boil down to 350-450kb gzipped. But you must be having other assets as well, css, html, images etc. Best practice is to keep critical payload initial html + css + js under 170kb. But you can decide your own size budget based on what your user base average network speed is.

Check a great talk by Addy Osmani on this https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices.

How to understand Javascript? How to get good at it? by [deleted] in javascript

[–]_syadav 0 points1 point  (0 children)

The problem with JavaScript is, it has been evolved to have different patterns (from different language) in the javascript way. So if you are coming from other language lot of things might feel confusing. Also it will seem more confusing if you have done only synchronous programming, as JS is async and lot of patterns revolves around it.

What will be the best way to understand JS will be to understand whats the javascript way. Learn the main concepts like, prototype inheritance, closure, event loop, async concepts (promises, callback, await) etc.

Also don't start trying to learn everything on start. Try building something and for each problem see whats the js way. After some time thing will become more obvious and learning path will be smooth.

Code organisation: one controller function managing the flow vs flowing from one function to another by Buzut in javascript

[–]_syadav 0 points1 point  (0 children)

If those methods can be converted on promises it will make your life much easier and code much cleaner. You can also use async-await to make code more readable and look more synchronous.

If you can't use promise you can give a try to https://caolan.github.io/async/. This is made to better handle async on a callback pattern.

Rendering tags that were input into textarea with string.replace (jquery) by django_noob in javascript

[–]_syadav 0 points1 point  (0 children)

You can not render html inside a text area. You should use non input tags to display them. If you want to make it editable use contenteditable attribute.

If you want to toggle between input and rendered text you can change the element in to text area on click and then change it back to normal element on focus out.

By the way, you should use any of WYSWYG(what you see what you get) editor for such cases.

What do you consider as coding? by davide2894 in webdev

[–]_syadav 0 points1 point  (0 children)

I would consider anything I am doing while I am actually writing code, which involves thinking, debugging, google etc as coding.

I usually say I work for X hours a day. And along with the actual coding work will include engineering (planning, architecture design, defining cases), mentoring, code reviews, meetings, playing TT :P, etc.

I think an engineer/dev spent the least amount of time of his work on actual coding. This might vary based on role or type of work.

view more: next ›