Understanding Stencil.js

Possibly save 1 hour of your time: Here are some resources that I have used to learn Stencil.js.

Decorators

  • @Prop
    • Props are custom attribute/properties exposed publicly on the element.
    • string, number, boolean, object, array
    • Children components should not know about or reference parent components, so Props should be used to pass data down from the parent to the child.
    • By default, when a member decorated with a @Prop() decorator is set, the component will efficiently re-render.
    • It’s important to know, that @Prop is immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.
    • Within the component class, the Props are accessed via the this operator.
    • Externally, Props are set on the element.
    • They can also be accessed via Javascript from the element.
  • @PropWillChange and @PropDidChange
  • @State
    • can be used to manage internal data for a component. This means that a user cannot modify the property from outside the component, but the component can modify it how ever it sees fit.
    • Any changes to a @State() property will cause the components render function to be called again.
  • @Method
    • used to expose methods on the public API.
    • Functions decorated with the @Method() decorator can be called directly from the element.

 

Videos

Announcement

https://www.youtube.com/watch?v=UfD-k7aHkQE

Getting Started

https://www.youtube.com/watch?v=MqMYaT1GlWY

 

Articles

Understanding Component, Prop, State, Event, EventEmitter, Listen:

https://coryrylan.com/blog/create-your-first-web-component-with-stencil-js

Understanding Constructor:

https://codecraft.tv/blog/2017/10/10/smile-to-unlock-webcomponent-stenciljs/

Understanding :

https://www.javascripttuts.com/creating-a-todo-application-using-stencil/

 

Lots of resources here:

https://github.com/mappmechanic/awesome-stenciljs/

Advertisements

Understanding Javascript Library Frameworks

Possibly save 1 hour of your time: There are many javascript libraries and frameworks. Which one will you use?

I have compiled some really good links below from others sites on recent trends. Please note they are not my work.

Angular vs. React vs. Vue: A 2017 comparison

https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

Vue.js Is Good, But Is It Better Than Angular Or React?

https://www.valuecoders.com/blog/technology-and-apps/vue-js-comparison-angular-react/

Book JavaScript Frameworks for Modern Web Dev