<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Matteo Nunziati</title>
    <description>The latest articles on DEV Community by Matteo Nunziati (@absinthetized).</description>
    <link>https://dev.to/absinthetized</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F184381%2F1c5735cf-81aa-449f-bff5-8a0a91cb338e.jpeg</url>
      <title>DEV Community: Matteo Nunziati</title>
      <link>https://dev.to/absinthetized</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/absinthetized"/>
    <language>en</language>
    <item>
      <title>So I got my GCP Professional Cloud Architect Cert</title>
      <dc:creator>Matteo Nunziati</dc:creator>
      <pubDate>Tue, 02 Jun 2020 13:09:51 +0000</pubDate>
      <link>https://dev.to/absinthetized/so-i-got-my-gcp-professional-cloud-architect-cert-4kd4</link>
      <guid>https://dev.to/absinthetized/so-i-got-my-gcp-professional-cloud-architect-cert-4kd4</guid>
      <description>&lt;p&gt;So in January 2020 I've got my GCP Professional Cloud Architect &lt;a href="https://www.credential.net/ad9ff3d3-b2a4-47e1-ba22-9710b4782dca" rel="noopener noreferrer"&gt;certification&lt;/a&gt;. It was a lot since I wanted to write about this experience but, you know, I'm a fu**ing lazy bastard... 😴&lt;/p&gt;

&lt;p&gt;Still, here we are!&lt;/p&gt;

&lt;h1&gt;
  
  
  What I cannot say!
&lt;/h1&gt;

&lt;p&gt;This is not my first cert.: previously I've got an AWS Cloud Practitioner cert (a basic, introductory one). In both cases I've been asked to sign a ton of paper where, basically, both companies warned me that, in case of content disclosure, they will nuke my house and my family with nuclear bombs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.insider.com%2F593af232bf76bb72038b4c7a%3Fwidth%3D1100%26format%3Djpeg%26auto%3Dwebp" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.insider.com%2F593af232bf76bb72038b4c7a%3Fwidth%3D1100%26format%3Djpeg%26auto%3Dwebp"&gt;&lt;/a&gt;&lt;br&gt;
AWS, GCP preliminary docs in a nutshell: you talk about your exam, we blast your family!&lt;/p&gt;

&lt;p&gt;So this is a piece about what I can not say! Yup! 😅&lt;/p&gt;

&lt;h1&gt;
  
  
  Exam Approach
&lt;/h1&gt;

&lt;p&gt;When preparing for an "higher" level cert I was expecting few complex questions: in the end an architect is not a packaging machine! You are not expected to perform a million simple tasks at speed light. You are expected to solve complex problems with the right tools.&lt;/p&gt;

&lt;p&gt;Instead the exam is composed by a ton of closed/multiple choice questions. The specificity of these questions is that they are not difficult: they are tricky! and of cource filled with all the commercial names of GCP products. 😖&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffreesvg.org%2Fimg%2F1547602033.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffreesvg.org%2Fimg%2F1547602033.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yes! Basically what you really have to mind is the details, the small adverbs, or similar, which, in a predefined jargon (internal to Google) means: "hey, here the candidate has to focus on answers taking about managed instances" or "here, with this adjective, we expect him/her to think about &lt;em&gt;that&lt;/em&gt; technology of ours".&lt;/p&gt;

&lt;p&gt;So basically my very first advice is: do a lot of exercise! If you find a for-free or paid test which is vaguely related to yours GCP cert, do it! To accustomize yourself to the type of questions.&lt;/p&gt;

&lt;p&gt;I've made the preparatory checks even for GCP Cloud Engineer, just to be more comfortable.&lt;/p&gt;

&lt;h1&gt;
  
  
  Exam Contents
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fe%2Fec%2FRaven_Matrix.svg%2F2000px-Raven_Matrix.svg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fe%2Fec%2FRaven_Matrix.svg%2F2000px-Raven_Matrix.svg.png"&gt;&lt;/a&gt;&lt;br&gt;
As said, I cannot disclose the questions. Still in my case (Italy, Q1 2020) 25% of questions was about migrating to cloud or hybrid cloud.&lt;/p&gt;

&lt;p&gt;The other 25% was about big data technologies and processing.&lt;/p&gt;

&lt;p&gt;The other half was about anything you can look at in a GCP Console, with a certain care on networking products.&lt;/p&gt;

&lt;h1&gt;
  
  
  What NOT
&lt;/h1&gt;

&lt;p&gt;What was &lt;strong&gt;not&lt;/strong&gt; in the exam, at least not in a relevant way, was: deep kubernetes know-how, no ML/AI - I think they have a dedicated thing about this -, not super hard questions about security - again I think there is a specific exam for this -.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fe%2Fe4%2F404_not_found%255E_%2528Russian_postbox%252C_%25D0%2594%25D0%25BE%25D0%25BB%25D0%25B3%25D0%25B8%25D0%25B9_%25D1%258F%25D1%2589%25D0%25B8%25D0%25BA%2529_-_panoramio.jpg%2F521px-404_not_found%255E_%2528Russian_postbox%252C_%25D0%2594%25D0%25BE%25D0%25BB%25D0%25B3%25D0%25B8%25D0%25B9_%25D1%258F%25D1%2589%25D0%25B8%25D0%25BA%2529_-_panoramio.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fe%2Fe4%2F404_not_found%255E_%2528Russian_postbox%252C_%25D0%2594%25D0%25BE%25D0%25BB%25D0%25B3%25D0%25B8%25D0%25B9_%25D1%258F%25D1%2589%25D0%25B8%25D0%25BA%2529_-_panoramio.jpg%2F521px-404_not_found%255E_%2528Russian_postbox%252C_%25D0%2594%25D0%25BE%25D0%25BB%25D0%25B3%25D0%25B8%25D0%25B9_%25D1%258F%25D1%2589%25D0%25B8%25D0%25BA%2529_-_panoramio.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Preparatory material
&lt;/h1&gt;

&lt;p&gt;I've trained myself by using the Coursera path for GCP Professional Cloud Architect. I really don't know if this is an effective path. In the end the exam is a ton of closed/multiple choice questions, while Coursera modules (leave the first out) are hands-on material.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fencrypted-tbn0.gstatic.com%2Fimages%3Fq%3Dtbn%253AANd9GcStSgAnUShMhEbUPxwN2DZSsVZWVQEku83gzu4uKgVXD52Q8jLl%26usqp%3DCAU" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fencrypted-tbn0.gstatic.com%2Fimages%3Fq%3Dtbn%253AANd9GcStSgAnUShMhEbUPxwN2DZSsVZWVQEku83gzu4uKgVXD52Q8jLl%26usqp%3DCAU"&gt;&lt;/a&gt;&lt;br&gt;
To be clear: the course is distributed by Coursera but the content is produced directly by Google, so this is the official training path. Still I'm not sure that all those labs helped me with the kind of exam I've faced...&lt;/p&gt;

&lt;p&gt;I know that both Udemy and Linuxacademy have courses for this exam, but I don't know which focus they have.&lt;/p&gt;

&lt;h1&gt;
  
  
  The recommended 3-years experience
&lt;/h1&gt;

&lt;p&gt;When comes to look at the recommended prerequisites for successfully pass the exam, Google says that a 3-years hands-on experience will help you pass the examination.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimages.pexels.com%2Fphotos%2F761297%2Fpexels-photo-761297.jpeg%3Fcs%3Dsrgb%26dl%3Dperson-hands-on-assorted-color-plastic-lid-lot-761297.jpg%26fm%3Djpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimages.pexels.com%2Fphotos%2F761297%2Fpexels-photo-761297.jpeg%3Fcs%3Dsrgb%26dl%3Dperson-hands-on-assorted-color-plastic-lid-lot-761297.jpg%26fm%3Djpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the thing: do you live in a country where it is easy to be hired as a cloud architect and you need a cert "just" to rise your salary &lt;em&gt;or&lt;/em&gt; you live in a country (like me) where you are trying to become a cloud architect and you think that a cert badge will help you having new job opportunities?&lt;br&gt;
In the former case the 3-year experience paired with a formal course will let you successfully pass the exam. In the latter you must have the badge before you can have hands-on experience. So this becomes a chicken-n-egg problem&lt;/p&gt;

&lt;h1&gt;
  
  
  So what?!
&lt;/h1&gt;

&lt;p&gt;I really don't know what to say. Experience &lt;em&gt;always&lt;/em&gt; helps, but in may case I've just made the Coursera copy-pasta exercises and I've deployed a couple of projects for some customers of mine. No more than 1 month hands-on with only 2 real life projects (a firebase one and a VM+Cloud SQL one).&lt;/p&gt;

&lt;p&gt;Still, I managed to pass the exam. My thoughts on this are: as there are a ton of tricky questions with a lot of confusing commercial names, hands-on experience will let you slowly absorb the jargon and the names of GCP, making you more comfortable with the exam. &lt;br&gt;
Anyway the questions range on such many topics that I do not think that a generic 3-years experience will let you face enough real life problems with all of the GCP technologies.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;I'm now on the edge to understand if the cert has any market value for me. Surely, being certified let your customers/future employers have a (vague) knowledge about the fact that you have at least a sufficient understanding of GCP design.&lt;br&gt;
And also this is my very first tough examination after a lot of years (my PhD thesis dated back to 2008) and it is somewhat reassuring for my self-esteem that I can still face an exam and pass it! ✌&lt;/p&gt;

</description>
      <category>googlecloud</category>
    </item>
    <item>
      <title>So I did it (vuejs meets an automation engineer)!</title>
      <dc:creator>Matteo Nunziati</dc:creator>
      <pubDate>Thu, 02 Jan 2020 15:27:14 +0000</pubDate>
      <link>https://dev.to/absinthetized/so-i-did-it-vuejs-meets-an-automation-engineer-52fe</link>
      <guid>https://dev.to/absinthetized/so-i-did-it-vuejs-meets-an-automation-engineer-52fe</guid>
      <description>&lt;h1&gt;
  
  
  As First
&lt;/h1&gt;

&lt;p&gt;So I've written about my &lt;a href="https://dev.to/absinthetized/when-a-senior-automation-software-engineer-meets-front-end-web-technologies-3o"&gt;early exposition to web technologies&lt;/a&gt; a few months ago... Finally I've got a chance to write a real app in vue.js and this is my feedback as a beginner.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QaRkgyA9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images1.memedroid.com/images/UPLOADED19/50a6ee06d068f.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QaRkgyA9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images1.memedroid.com/images/UPLOADED19/50a6ee06d068f.jpeg" alt="ok"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  The widget set
&lt;/h1&gt;

&lt;p&gt;In my previous post I've tried but material design and bootstrap with vue and I liked boostrap more... Anyway I've gone with &lt;a href="https://buefy.org/"&gt;buefy&lt;/a&gt; for my app: the customer asked for the &lt;em&gt;ability to reorder table rows with drag'n'drop&lt;/em&gt; an this is a native feature in buefy, and it is paired with an amazing example you can basically copy-pasta to your codebase.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;lesson 1&lt;/em&gt;: the customer needs define your tools.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WlH-dNMx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dieselgasturbine.com/wp-content/uploads/2019/01/m501j.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WlH-dNMx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dieselgasturbine.com/wp-content/uploads/2019/01/m501j.jpg" alt="turbine"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  The project setup
&lt;/h1&gt;

&lt;p&gt;When you start a project with vue.js you can bootstrap a skeleton via the &lt;a href="https://cli.vuejs.org/"&gt;Vue CLI&lt;/a&gt;. I really recommend the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; switch to a custom setup&lt;/li&gt;
&lt;li&gt; &lt;em&gt;enable&lt;/em&gt; Typescript (aka ts)&lt;/li&gt;
&lt;li&gt; &lt;em&gt;avoid&lt;/em&gt; the Linter (your worst enemy!)&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  The infamous linter
&lt;/h1&gt;

&lt;p&gt;While you have a number of optional linters and you can setup your own rules, for a small project this is an overkill.&lt;br&gt;
I &lt;em&gt;do&lt;/em&gt; like the idea of an omogeneous style all around the app, but enabling the linter is really irritating: it is constantly in your way. You are developing some test ideas and the linter generates something like a gazillion of errors because your have put that space but you have not put those curly braces after an if statement... &lt;em&gt;GOSH&lt;/em&gt; it slows you down a lot!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dqULZQQQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.memecreator.org/static/images/memes/5002957.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dqULZQQQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.memecreator.org/static/images/memes/5002957.jpg" alt="lint"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;lesson 2&lt;/em&gt;: Way better to manually run a linter now and then then enable the linter by default!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  The blessed Typescript
&lt;/h1&gt;

&lt;p&gt;While the app was a small manufacturing management system with limited functionality, and while &lt;a href="https://www.google.com/search?q=oop+is+evil&amp;amp;oq=oop+is+evil&amp;amp;aqs=chrome..69i57.2350j0j4&amp;amp;sourceid=chrome&amp;amp;ie=UTF-8"&gt;the entire world is now spitting on OOP&lt;/a&gt;, Typescript abstract classes made my day:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;saving ton of obscure &lt;code&gt;this.prototype = {...}&lt;/code&gt; stuff all around &lt;/li&gt;
&lt;li&gt;centralizing the code a lot and thus reducing the &lt;a href="https://www.google.com/search?q=loc+coding&amp;amp;oq=loc+coding&amp;amp;aqs=chrome..69i57j0l7.1725j0j9&amp;amp;sourceid=chrome&amp;amp;ie=UTF-8"&gt;LoC&lt;/a&gt; I've written.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8k8ZZqrf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.redd.it/2bcep99vg3p01.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8k8ZZqrf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.redd.it/2bcep99vg3p01.jpg" alt="ts"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And everyone knows that the more the LoCs the more the bugs.&lt;/p&gt;

&lt;h1&gt;
  
  
  The too strict Typescript
&lt;/h1&gt;

&lt;p&gt;While I really recommend the usage of typescript with Vue too, I've to say that:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;lesson 3&lt;/em&gt;: interfacing js and ts in vue it is &lt;a href="https://stackoverflow.com/questions/51873087/unable-to-use-mixins-in-vue-with-typescript"&gt;not necessarily trivial&lt;/a&gt;. Now and then you fall in some deadend and you would pray to revert to plain js, but the net result is incredibly positive.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e8I3nZ4i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/max/1224/1%2AdzIBJ4tnjfq7BjrIKQjR8A.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--e8I3nZ4i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/max/1224/1%2AdzIBJ4tnjfq7BjrIKQjR8A.jpeg" alt="ops"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Architecture, my lads, architecture
&lt;/h1&gt;

&lt;p&gt;I've seen ton of people praying for state management in vue.js/react/angular apps. While information exchange among components is not easy (almost impossible) unless you have a parent-child relation, I think that a good old MV* approach a-la &lt;a href="https://backbonejs.org/"&gt;backbone&lt;/a&gt; is a winner here.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;lesson 4&lt;/em&gt;: &lt;em&gt;always&lt;/em&gt;, &lt;strong&gt;always&lt;/strong&gt;, I've said &lt;strong&gt;ALWAYS&lt;/strong&gt; remember that front-end is not different from back-end! You need structure and you need to separate concerns.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The data you fetch is a &lt;em&gt;model&lt;/em&gt;, the logic which manipulate them is your &lt;em&gt;controller/presenter/supercool-brand-new-logic&lt;/em&gt;, the way you show them on screen is the &lt;em&gt;view&lt;/em&gt;. Use plain ts code to structure everything and use vue to render, avoid stuff like fetching data inside a vue component: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This approach is just MVC a-la winforms and it is known to proudly kill your dog since 90s!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IB284d8s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.devrant.com/devrant/rant/r_215707_XHYJC.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IB284d8s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.devrant.com/devrant/rant/r_215707_XHYJC.jpg" alt="old"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Is vue the right tool?
&lt;/h1&gt;

&lt;p&gt;While I was working on this app for a customer of mine, I've started collaborating with a local software house: they are a java+angular shop so I've got a certain exposition to angular in production too.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;lesson 5&lt;/em&gt;: your early impressions are &lt;em&gt;usually&lt;/em&gt; right.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Vue and vue router are incredibly handier to use than angular, so yes: my eraly impressions where right. Just use them as first choice unless your project is a really huge one... like... like you are rewriting a full OS in the web ;)&lt;/p&gt;

&lt;h1&gt;
  
  
  But vue/react/foo is just a library, full frameworks avoid the need for glueing together ton of libraries
&lt;/h1&gt;

&lt;p&gt;Let me put this in that way: &lt;em&gt;this is bullshit&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VqQpCujE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.devrant.com/devrant/rant/r_694297_4WEgS.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VqQpCujE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.devrant.com/devrant/rant/r_694297_4WEgS.jpg" alt="npm"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My app is making use of firebase and other backend services: firebase has it own API you still need to put in the model layer of your framework. Other fetch APIs are trivially simple to integrate: &lt;a href="https://github.com/axios/axios"&gt;Axios&lt;/a&gt; is just a brain dead choice and doesn't add any complexity or any real boilerplate.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;lesson 6&lt;/em&gt;: risk of library piling/boilerplate vs usage of frameworks is not a factor at all. You should choose your tools because of other &lt;em&gt;real&lt;/em&gt; reasons.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  Sidenotes
&lt;/h1&gt;

&lt;h3&gt;
  
  
  I'm not fan of projects with 1000 tools, but...
&lt;/h3&gt;

&lt;p&gt;Being in shortage of time has lead me to search for a lot of premade stuff: I've found &lt;a href="https://portal-vue.linusb.org/"&gt;vue portals&lt;/a&gt; super-cool and super fast to implement&lt;/p&gt;

&lt;h3&gt;
  
  
  All memes belong to their authors!
&lt;/h3&gt;

</description>
      <category>vue</category>
      <category>architecture</category>
      <category>bulma</category>
      <category>typescript</category>
    </item>
    <item>
      <title>When a Senior Automation Software Engineer meets front-end web technologies</title>
      <dc:creator>Matteo Nunziati</dc:creator>
      <pubDate>Sun, 21 Jul 2019 10:19:32 +0000</pubDate>
      <link>https://dev.to/absinthetized/when-a-senior-automation-software-engineer-meets-front-end-web-technologies-3o</link>
      <guid>https://dev.to/absinthetized/when-a-senior-automation-software-engineer-meets-front-end-web-technologies-3o</guid>
      <description>&lt;h4&gt;
  
  
  TL;DR:
&lt;/h4&gt;

&lt;p&gt;Automation Software Engineers should stay away from web front-ends :-) But newbies can use this as a light-weight introduction to modern front-end development.&lt;/p&gt;

&lt;h4&gt;
  
  
  The context
&lt;/h4&gt;

&lt;p&gt;I've worked as a software engineer for more than a decade in the automation field, mostly for machine vision applications. I've strong skills in Algebra, Machine Vision, Matlab, good knowledge of c++ and back-end stuff you can put in an automation software. AKA: &lt;em&gt;When I see a CSS I fly away scared&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgflip.com%2F2t8v3o.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgflip.com%2F2t8v3o.jpg" alt="css float joke"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In recent days some potential customers shown interest in automation applications with web front-ends. They want a web SPA (even if they don't know what a SPA is), so that they can manage their machines with different devices.&lt;/p&gt;

&lt;p&gt;Therefore I've started my journey trying to find a good fit for my needs. And it turned out as an assembly journey, where I've tried hard to build my dev env and find the right toolbox for my needs and, most important, my level of skills!&lt;/p&gt;

&lt;h4&gt;
  
  
  I want it all and I want it now!
&lt;/h4&gt;

&lt;p&gt;So as a Senior Automation Software Engineer my few GUI are developed with classic tools. Nowdays unfortunately on .NET Framework and Windows (I prefer QT and Linux) and my average GUI is named a "Human Machine Interface" and looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F1%2ADfLKHreOsvXedQcrgFjM7Q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F1%2ADfLKHreOsvXedQcrgFjM7Q.png" alt="great GUI"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yeah, thanks: no false humility here. In my 10+ years in front of a pc I've acquired an over-average UX compentence.&lt;/p&gt;

&lt;p&gt;Still, I've grown accustomed with Graphical Designers (Visual Studio anyone?), XML/XAML, data bind and ready-to-use widgets. Let alone a proper IDE with an integrated graphical debugger.&lt;/p&gt;

&lt;p&gt;So I've started my quest for the same tools in webdev. I just want to design a few panels not the next consumer-grade killer-app... It should be easy!&lt;/p&gt;

&lt;h4&gt;
  
  
  Did I tell you I'm lazy?
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic.tvtropes.org%2Fpmwiki%2Fpub%2Fimages%2Fgarfieldlazy_2816.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fstatic.tvtropes.org%2Fpmwiki%2Fpub%2Fimages%2Fgarfieldlazy_2816.jpeg" alt="lazy boy"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lazy Step 1: I've not dedicated my time to discover a ton of secret jems. I've started following the wave: the IDE+debugger has to be Visual Studio Code (VSC) with a couple of plugins and with the Chrome debugger or the Firef.. &lt;em&gt;no: with Chrome. Period.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Lazy Step 2: what integrations VSC has and what is documented on their site about front-end frameworks/libs/stuff? &lt;a href="https://code.visualstudio.com/docs/nodejs/nodejs-tutorial" rel="noopener noreferrer"&gt;Easy&lt;/a&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Angular&lt;/li&gt;
&lt;li&gt;Vue&lt;/li&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Ember&lt;/li&gt;
&lt;li&gt;Next-cool-thing-with-a-6-months-life-and-yet-available-in-VSC-next&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Where's the toolchain?
&lt;/h4&gt;

&lt;p&gt;Really: gimme a toolchain for the fox sake!&lt;/p&gt;

&lt;p&gt;Isn't here a javascript toolchain? Hell even c has one (compiler, linker, make, blabla). No wait: you can use node.js for this.&lt;/p&gt;

&lt;p&gt;NODEJS? N.O.D.E. JS.? The serverside javascript interpreter froked from Chromium? Whaaaaaaat?&lt;/p&gt;

&lt;p&gt;Yes. In these years, while I was trying to let a machine train a damned bunch of neural networks, some smart guys have discovered that they can use javascript to build a javascript toolchain. In the end c compilers are written in c, so what's wrong?&lt;/p&gt;

&lt;p&gt;And so your hero started installing node.js. And npm. And upgraded npm. All of the previous frameworks/libs/stuff have the proper toolchain ready to be setup and waiting for you in the npm package registry: no mind crushing courses on webpack, webpick, babel, gomorra, ES2015, ES3048 etc... A linter is in place too and everything is just an &lt;em&gt;npm install away&lt;/em&gt; (and a &lt;em&gt;* create application_name&lt;/em&gt; away!) &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cool!&lt;/strong&gt; oh, wait what's this node_modules folder?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7om917fn62m5s6eowdx9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7om917fn62m5s6eowdx9.png" alt="node_modules"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Let's start coding!
&lt;/h4&gt;

&lt;p&gt;Now that everything is in place I can happily enjoy my IDE with powerful debugging capabilities and a nice debug/release cycle thanks to the huge scaffolding done by the cli of the case but... the debugger simply ignores my break points. It turned out that while VSC has a ton of debugging capabilities you have to set them into the ./.vscode/launch.js file (path relative to your app folder). Every tool has it's own dedicated page for this topic and after a 30 min. digging on the web I've found the right config for the launch.js file. So I've started to happily code front-ends like I did with backends in the early 2000 :P&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpics.me.me%2Fa-debugger-console-log-got-here-console-log-aaaaaa-console-log-bbbbbb-how-40120497.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpics.me.me%2Fa-debugger-console-log-got-here-console-log-aaaaaa-console-log-bbbbbb-how-40120497.png" alt="debugger my friend"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Where's the widget set?
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmemecreator.org%2Fstatic%2Fimages%2Fmemes%2F4050535.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmemecreator.org%2Fstatic%2Fimages%2Fmemes%2F4050535.jpg" alt="my_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;OK, so you need to install another set of node modules but all the previous frameworks/libs have a ton of fresh widgets ready to be used... Bootstrap, Material Design based, Bulma... wait Bulma, seriously?! Ah, who cares, I've just installed my new 1TB nvm disk for node module hosting, just install it and shut up!&lt;/p&gt;

&lt;p&gt;Now tell me, what was that joke? Ah yes, JQuery is such a heavy lib you rather want to avoid it... err... did you see the weight of a widget set? What? Should I reimplement it from scratch? Seriously? Naaaa....&lt;/p&gt;

&lt;h4&gt;
  
  
  Where to start?
&lt;/h4&gt;

&lt;p&gt;So I had 3 possibilities here actually: I've dropped Ember.js as the entire ecosystem seems rotating around Vue, React, Angular. Sorry Ember I own you a beer.&lt;br&gt;
Then I've tried to stay as mainstream as possible for my early tests, so I've opted for bootstrap and material design stuff. Sorry Bulma: I'm too scared of Vegeta. In the end I've found myself pocking with 6 combinations of tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;vue+bootstrap&lt;/li&gt;
&lt;li&gt;vue+material&lt;/li&gt;
&lt;li&gt;react+bootstrap&lt;/li&gt;
&lt;li&gt;react+material&lt;/li&gt;
&lt;li&gt;angular+bootstrap&lt;/li&gt;
&lt;li&gt;angular+material&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  And what did I learn?
&lt;/h4&gt;

&lt;p&gt;Well, coming from a backend/automation background I've evaluated the 6 possibilites as a whol: it was like almost using 6 different frameworks because each widget set library added its own logic to the mix.&lt;/p&gt;

&lt;p&gt;I've discovered that &lt;strong&gt;Angular&lt;/strong&gt; is by all means the closest thing to server side programming. At least it felt really close to python/c# and the so: async events, decorators, split your widget into 3 different files: html, css, logic.&lt;br&gt;
&lt;strong&gt;Angular&lt;/strong&gt; seemed also the most formal of the three (a lot of docs on concepts and theory) and the most "corporate": fixed release cycles, regular cadence... Still for my small needs it also seemed too big. But -as expected- its material design implementation was great.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDOLb5vHU8AApWce.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDOLb5vHU8AApWce.jpg" alt="Angular meme"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;React&lt;/strong&gt; was the most close to pure js to my taste. I've cheated in the intro: I've developed a couple of web apps in the past by using uwsgi+Flask+Python. Bootstrap was used for the style and JQuery was the only helper to build the app. The logic was pure js.&lt;br&gt;
So when I say React felt as close as js as possible I refer to that small experience of mine. React JSX is also the most amazing thing I've tried in the last years: elegant, effective. It seems the best way to get rid of the mutilated logic of templates. I haven't felt so productive with a new tech since the year I discovered Python.&lt;br&gt;
I was ready to fall in love with React but then I stackoverflowed for a number of questions and all of my search paths ended into the same place: React State Management. Really too many things to learn for a simple UI. And also I hate functional programming a lot.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fencrypted-tbn0.gstatic.com%2Fimages%3Fq%3Dtbn%3AANd9GcSm39D-7HMCGSZK27x6wmRdYTmp0A9iE6ov0o_QusNImHQpCkVOLQ" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fencrypted-tbn0.gstatic.com%2Fimages%3Fq%3Dtbn%3AANd9GcSm39D-7HMCGSZK27x6wmRdYTmp0A9iE6ov0o_QusNImHQpCkVOLQ" alt="React state"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vue&lt;/strong&gt;... well I overlooked at vue in the beginning. It seemed like a chinese soup of Angular, React, somethingstrange(TM) and the so. And it is! The greatest mix of stuff ever seen. All that ugly directives in templates, a million ways to say the same thing (:, @, v-on, v-bind, v-ery-strange), it even suggests you must use a state management library which seems a clone of Redux (Vuex? Really?). &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsecure.meetupstatic.com%2Fphotos%2Fevent%2Fc%2Fe%2Fc%2F6%2F600_471832934.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsecure.meetupstatic.com%2Fphotos%2Fevent%2Fc%2Fe%2Fc%2F6%2F600_471832934.jpeg" alt="Vue"&gt;&lt;/a&gt;&lt;br&gt;
(ok the web lacks a good vue.js meme...)&lt;/p&gt;

&lt;p&gt;But it also has .vue files where simple html, css and js stay well tight and isolated for each component. You can plug JSX in the mix. It is the most practical solution I've found and in the end of the day I already felt familiar with a number of things read in the docs. &lt;/p&gt;

&lt;h4&gt;
  
  
  Ok, so?!
&lt;/h4&gt;

&lt;p&gt;So I've choosen Vue as my first entry in the front-end world. Along with Bootstrap (the bootstrap-vue docs are simply amazing). Not because it is superior in something, but because it is the most "forgiving" piece of tech, the easier to work with while making a bit of experience in this new world. A really good entry point for someone used to algebra and machine vision.&lt;/p&gt;

&lt;h4&gt;
  
  
  OK, who cares?!
&lt;/h4&gt;

&lt;p&gt;Oh. I really don't know... but you have read this all so, Thanks for reading :)&lt;br&gt;
&lt;em&gt;And remember: all meme belongs to their authors.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
