These are chat archives for jdubray/sam

19th
Sep 2017
Vertex21
@Vertex21
Sep 19 2017 00:20
@jdubray I was wondering what interested you about hermes-js?
Jean-Jacques Dubray
@jdubray
Sep 19 2017 04:55
@Vertex21 It was the 951th "must-have" react add-on library I came across. We should have a celebration when we reach 1000. That being said the summary was quite attractive: "Hermes JS is a universal action dispatcher for JavaScript apps. It facilitates the design and management of action flows, both for interacting with the UI and back-end / third-party services." In all seriousness, I am always interested in ways to organize your code, I have not found something I can say I like (of course including how I do it myself today).
Jean-Jacques Dubray
@jdubray
Sep 19 2017 05:32

Just to be fair, in Angular the only "weird" thing I ever had to do was autofocus (everything else has been working as advertized without a glitch):

setTimeout(function() { 
        let el: HTMLInputElement = <HTMLInputElement>document.getElementById(inputId)
        if (I.E(el)) {
          el.focus()
          var val = el.value
          el.value = ''
          el.value = val
        }
      }, 100)

yep, I could not get focus to work without reseting the value .focus() alone does not (seem to) work.

Maxime
@maxime1992
Sep 19 2017 14:43

@jdubray when you want to work with angular, you should definitely avoid:

  • using setTimeout for this kind of things
  • use document.getElementById

When you need to manipulate things from the DOM, you should rather use a directive. I've done one that focus an element but it's based on screen size: https://gitlab.com/linagora/petals-cockpit/blob/master/frontend/src/app/shared/directives/focus-input-based-on-screen-size.directive.ts

So you can take a look but if it seems to be a lot of code, no worries I'll show you a simpler version without handling the screen size.

Then into my HTML I just do:
<input appFocusInputIfLargeScreen>

You might just do :
@Directive({
  selector: '[appFocusInput]',
})
export class FocusInputDirective implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.focus()
  }
}
and then call into your HTML
<input type="text" appFocusInput>
Jean-Jacques Dubray
@jdubray
Sep 19 2017 17:01
@maxime1992 yes, I tried, but could not get it to trigger. I didn't have the patience to troubleshoot it.
I was also not sure if it would work in my case (autocomplete input field with API call updating a dropdown below the input field)
Maxime
@maxime1992
Sep 19 2017 17:05
If it wasn't triggered it's probably because you didn't registered the directive to the module (within the declarations property)
Jean-Jacques Dubray
@jdubray
Sep 19 2017 17:09
I know, I thought I did, but probably failed to do it correctly
Janne Siera
@jannesiera
Sep 19 2017 20:03
@foxdonut working example of functional web components: https://github.com/jannesiera/demo-sierpinski-triangle
Just check out, run 'npm install' and open index.html in any browser --> should work, if it doesn't let me know
Vertex21
@Vertex21
Sep 19 2017 20:05
Am I missing something? I only see a License file and a Readme.md file...
Janne Siera
@jannesiera
Sep 19 2017 20:06
@Vertex21 you're right. gimme a sec
Should be there now
Things to note:
  1. This is a port of React's demo on stack vs fiber (sierpinski triangle) and thus doesn't adhere to the SAM pattern
  2. It uses handlebars templates that get compiled to incremental DOM. Obviously you can use any templating language/syntax that you want but this is what I am working on and have available.
  3. The handlebars compiler only support the basics for now.
  4. It should work in all browsers. The polyfill is much slower, but on chrome it uses native components and it's a huge difference. Change to targetSize global to adjust the recursive depth.
also safari support web components natively but i didn't test there
if anyone tries to run this but finds bugs (especially in browser support) please (!) tell me
Janne Siera
@jannesiera
Sep 19 2017 20:12
oh, and if you want to check the base component that's the 'render-component' package
it's missing a few things, but otherwise it's just 130 lines of code
Vertex21
@Vertex21
Sep 19 2017 22:30
@jannesiera sweet! I'll take a look
Vertex21
@Vertex21
Sep 19 2017 22:48
@jannesiera my first question is if it has the same performance with 700 nodes like React and Stencil showed in their demos? This one seems to only have ~100
Dennis Davis
@ddavis914
Sep 19 2017 23:56
@dagatsoin I'm in the research phase, so I have not yet made a choice - there are so many options its ridiculous - Jj suggested a look at virtual-dom. I really don't see a need for anything else - yet - that may change - but since we are functionally handling an Action(event) and its consequences(or not - Present) on the Model then State then View (through one of these tools - or with vanilla JS), we really only need to get the DOM changed (without loosing any capability) as efficiently and with the least baggage possible. I was surprised to see the 'leaders' Angular - React are not at all at the top of the pack. I took a look at Mithril - it didn't stop me from looking. According to this nothing beats pure JavaScript.