Skip to main content

why html5 either you use angularjs or reactjs still bad for mobile app when you have to deal with really big application.

creating big application when you have to deal with canvas or webgl using reactjs and angularjs is really a bad idea specially when we have to deal with slow device.

reactjs and angularjs are super cool framework but when we have to deal with lots of image data and canvas than mixing these framework with each other for example mixing canvas and webgl with reactjs and angularjs is really bad idea. 

so how can i raise up my app above from these problem's ?
REACTJS
---------------

1. reactjs works on virtual dom which is different from real dom. reactjs only changes real dom when there when react found a difference between real and virtual dom.

2. same methods which i explain also applied on react too.

3.one benefit of using react over angularjs is that  reactjs is just a library and angularjs is a framework so separation of code in react is more flexible instead of angularjs which follow's more rules.
  

ANGULARJS

1. there is no solution when you mix webgl and angularjs and start dealing with lots of image data and it's true you have to ignore slow device even angularjs works on request frame animation. so what is my point here just try to optimize your images using image optimization tool for example https://tinypng.com/  and in real life this gonna help you out. 

2.just take a look on https://angular.io/api/core/ChangeDetectorRef this would help you to control angularjs detect cycle means you can control dirty checking for example -> change thing only when it's needed don't believe on angularjs detect cycle.

3.timer are hell and its true but every gaming and complex application need them so how i can i fix this problem so my answer is you can't you have to deal with them but one thing you can do just try to create only few of them and use a service to pass them all over the app.

4.too much dom elements can create problem so think deep and try to reduce your dom elements.

5.don't trust too much on GC (garbage collector) try to remove your unnecessary things specially event's.


6. try to reduce variable count javascript is slow in comparison of c++ and java so 2 bytes memory is matter so try to access dom related stuff directly  for exampele:->
where totalValue is a input text
document.getElementById("totalValue").value



Comments

Post a Comment

Popular posts from this blog

Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop  PixiJS is fast blazing fast and you can get a decent FPS even on older device.   so here is my optimization techniques for PixiJs 1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call. use TexturePacker  https://www.codeandweb.com/texturepacker  best tool when its comes to spritesheet 2. for floating point calculation round off calculation for example let  speed = 0.75 ; let  position = 100 ; console . log ( Math . round ( speed * position )) 3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it. 4. its very important one managing TextureCache in memory you can get all TextureCache list by using  Object.entries(PIXI.utils.TextureCache); so even you use ap...
Post a Comment
Read more

adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/

adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference path = "node_modules/pixi-particles/ambient.d.ts" /> import 'pixi-particles' code of particle delcare a     global variable   private emitter ?: Emitter ; const img = PIXI . Texture . from ( "./assets/images/particle.png" ); this . emitter = new Emitter ( this ,[ img ],{ "alpha" : { "start" : 0.62 , "end" : 0.39 }, "scale" : { "start" : 0.1 , "end" : 0.9 , "minimumScaleMultiplier" : 1.25 }, "color" : { "start" : "#ffff8f" , "end" : ...
Post a Comment
Read more