Gabriele Petronella - Mythical trees and where to find them - Codemotion Milan 2017

•

0 likes•309 views

Abstract Syntax Trees (or ASTs) are the core of most tools we use in JavaScript, from Babel to ESLint, from prettier to codemods. In this talk we see what they are, how they power such tools and how to use them directly to develop custom solutions to everyday problems.

Technology

MythicalTrees
andwhereto ﬁnd
them
GabrielePetronella
SoftwareEngineer@buildo

me, hi!
@gabro27 - Codemotion 11/11/2017

stuffI do (byday)
@gabro27 - Codemotion 11/11/2017

stuffI do (bynight)
@gabro27 - Codemotion 11/11/2017

Whythistalk
@gabro27 - Codemotion 11/11/2017

Agenda
1.AST
2.AST workﬂows
3.A real-world example
@gabro27 - Codemotion 11/11/2017

Let's startfromtheanswer
const answer = 42;
@gabro27 - Codemotion 11/11/2017

Tokens
const answer = 42 ;
// | | | | | | | | | |
// _'const'_/ _name_/ _'='_/ _num_/ _';'_/
@gabro27 - Codemotion 11/11/2017

Grammar
const answer = 42 ;
// | | | | ||
// | _Identiﬁer__/ _NumericLiteral_/|
// | | |
// | _________VariableDeclarator________/
// | |
// ____________VariableDeclaration____________/
@gabro27 - Codemotion 11/11/2017

So...AST?
@gabro27 - Codemotion 11/11/2017

Abstract
Syntax
Tree@gabro27 - Codemotion 11/11/2017

WhyAbstract?
const answer = 42;
const answer = 42
const answer =
42
const
answer
=
42
@gabro27 - Codemotion 11/11/2017

ASTinJavaScript
@gabro27 - Codemotion 11/11/2017

AST?ASTs!
parser AST ES2017 ES next
acorn ESTree ✅ only stage-4
babylon Babylon AST ✅ ✅
espree ESTree ✅ same as acorn
esprima ESTree ✅ ❌
ﬂow ESTree + custom ✅ ✅
TypeScript TypeScript AST ✅ ✅
@gabro27 - Codemotion 11/11/2017

astexplorer.net
@gabro27 - Codemotion 11/11/2017

ASTWorkﬂows
@gabro27 - Codemotion 11/11/2017

demo: literal
transformation
@gabro27 - Codemotion 11/11/2017

codemod
@gabro27 - Codemotion 11/11/2017

hey, doesn'tbabeldo
the samething?
@gabro27 - Codemotion 11/11/2017

codemodtools
» recast
» jscodeshift
@gabro27 - Codemotion 11/11/2017

ESLintuses espree, so...
Whatabout ES next?
@gabro27 - Codemotion 11/11/2017

babel-eslint
@gabro27 - Codemotion 11/11/2017

demo: no-console-
log
@gabro27 - Codemotion 11/11/2017

Whatabout
eslint --ﬁx
@gabro27 - Codemotion 11/11/2017

prettier
@gabro27 - Codemotion 11/11/2017

Prettier... forTS?
@gabro27 - Codemotion 11/11/2017

Meanwhile
inthe realworld
@gabro27 - Codemotion 11/11/2017

// MyContainer.js
import t from 'tcomb';
import container from 'buildo-react-container';
import MyComponent from './MyComponent';
export default container(MyComponent, {
connect: {
isFlag: t.Boolean,
name: t.String,
label: t.maybe(t.String)
}
});
@gabro27 - Codemotion 11/11/2017

// state.js
export default {
isFlag: t.Boolean,
name: t.String,
label: t.maybe(t.String)
}
@gabro27 - Codemotion 11/11/2017

We've seen
@gabro27 - Codemotion 11/11/2017

AST:whatandwhy
@gabro27 - Codemotion 11/11/2017

CompetingAST
standards inJS
@gabro27 - Codemotion 11/11/2017

TypicalAST-basedworkﬂows
@gabro27 - Codemotion 11/11/2017

Some resources
» astexplorer.net
» Babel Handbook
@gabro27 - Codemotion 11/11/2017

Thankyou
@gabro27 - Codemotion 11/11/2017

Questions?ping me on Twitter: @gabro27
or @gabro on Slack (http://milanojs.herokuapp.com/)
PS: wanna work on this stuff? We're hiring!
@gabro27 - Codemotion 11/11/2017

The document provides instructions for installing and using the Alcatraz plugin for Xcode. It describes how to install the plugin by running an install script, and lists some of the features the plugin enables like writing plugins, installing templates, and creating projects. It also gives an overview of how to write your own compiler by separating words, indenting blocks, and handling incomplete lines and string comments.

Ember.js Meetup Brussels 31/10/2013

Hstry

The document summarizes an Ember.js meetup in Brussels. It provides an introduction to Ember.js concepts like templates, models, controllers, views and routing. It also discusses pros and cons of Ember.js like its learning curve, documentation challenges and unstable API. Resources for learning Ember.js are shared, and attendees are invited to participate by giving talks on Ember.js topics or showcasing projects.

Randy Paquin Portfolio Gm

guest6f0ad

The document provides examples of 3D objects that were modeled for a GM object library, including various conveyor systems, transport vehicles, industrial robots, and other factory equipment. Dialog boxes and code examples are also listed for some of the objects. A wide range of factory components were modeled, from conveyors and material handling devices to robot systems, booths, and control panels.

JS Fest 2018. Douglas Crockford. The Better Parts

JSFestUA

Text expansion in vim

mattboehm

Tiffany Conroy - Remote device sign-in – Authenticating without a keyboard - ...

Codemotion

When we were developing our SoundCloud app for Xbox One, something became very obvious during usability testing: signing in with a game controller really sucks. Entering text requires navigating a virtual keyboard to individual letters, numbers, and characters one at a time – such a nightmare! Other connected devices are even more extreme, with no way to enter text at all. Learn how to implement what we call “remote device sign-in”, a way for people to sign in to devices with limited input capability that is secure, simple, and fast.

Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...

Codemotion

Scala is the only language that can be used to produce code that can be "trans/compiled" for the JVM, in Javascript and in native binary. This allows to write libraries that are usable in JVM and JS using the power of functional programming (i.e. cats, scalaz), generic programming (i.e. shapeless) and macro/scalameta available in Scala. In this talk, we will see how to write a Scala application backend and a SPA (scala.js/scala-js-react) that share the same code as a business logic, datamodels and transparent API call (JVM/JS) in Scala (via autowire/akka-http/circe).

Vincenzo Chianese - REST, for real! - Codemotion Milan 2017

Codemotion

Let’s face it: the term REST is treated as a buzzword these days rather than as an accurate description of the Web’s blueprints. Everybody claim to do REST APIs; the truth is - nobody is doing REST API. It’s time to stop this. In my presentation I’d like to go with you through the original specifications and build an API that will respect all the constraints. All live, no prepared things. Then, we will compare the results with other API that claim to be REST. You will be surprised how different the results will be!

Once you start working with Big Data systems, you discover a whole bunch of problems you won’t find in monolithic systems. Monitoring all of the components becomes a big data problem itself. In the talk we’ll mention all of the aspects that you should take in consideration when monitoring a distributed system using tools like: Web Services,Spark,Cassandra,MongoDB,AWS. Not only the tools, what should you monitor about the actual data that flows in the system? We’ll cover the simplest solution with your day to day open source tools, the surprising thing, that it comes not from an Ops Guy.

Nicola Corti - Building UI Consistent Android Apps - Codemotion Milan 2017

Codemotion

Consistency is probably one of the best-known design principles. Consistent UIs are easy to use, easy to learn and frustration free. Nonetheless, they are also extremely easy to break! Just a few development iterations are enough to totally mess up your color palette or your icon sets. Yelp ships its experience across Android, iOS and Web apps used by millions of users. In this talk, you will get an insight into the challenges we face on a daily basis ensuring our visual consistency, and the solutions we adopted.

Anna Makarudze - Django Girls: Inspiring women to fall in love with programmi...

Codemotion

Django Girls is a non-profit organization that empowers and helps women to organize free, one-day programming workshops by providing tools, resources and support. Our goal is to bring more amazing women into the world of technology and increase the diversity in the Django community. We believe that technology is for people and everyone should be able to build it. We are making technology more approachable by creating simple tools and resources designed with empathy. In my talk, I will share on how Django Girls was started and the journey travelled so far in empowering women across the globe.

Maurizio Moriconi - ARKit: Augmented Reality made simple - Codemotion Milan 2017

Codemotion

James Williams - Demystifying Constraint Layout - Codemotion Milan 2017

Codemotion

ConstraintLayout has had the reputation of being very powerful but difficult to learn. Too many times have I talked to developers who were reluctant to use it in their designs because it was "too magical" and they couldn't understand what it was doing. Despite the learning curve, ConstraintLayout allows you to make your designs more responsive and ultimately make your UI code faster to render. It also includes some design features that allow you to more accurately implement your designer's work. In this session, you'll learn how to make sense of the features of ConstraintLayout.

Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017

Codemotion

Get ready to develop a brand new experiences that seamlessly blend the digital and physical worlds with Android! We will learn the potential of the new AR SDK from Google, ARCore. By looking its 3 key technologies: Motion tracking, Environmental understanding and Light estimation We will have a clear vision of what We can develop with. You will be back at home with a deeper understanding of how to create AR apps with ARCore using your development environment and ready-to-reuse code samples.

Matteo Valoriani - How Augment your Reality: different perspective on the Rea...

Codemotion

If you think there's been a lot of talk about Augmented Reality and Virtual Reality this year, 2018 is going to blow you away. Apple with ARkit, Google with ARCore , Microsoft with HoloLens, Facebook with Oculus and many others are working to transform our Reality with new products and services in the not-too-distant future. Therefore Apple, Microsoft, Google and Facebook is approaching AR/VR from different perspectives and in this session we will try to understand how these different technologies work and which best suits the different areas (industry 4.0, tourism, healthcare, ...)

Claudio Carboni - ArcGIS platformthe foundation of your idea - Codemotion Mil...

Codemotion

The document summarizes key information about the ArcGIS platform: - ArcGIS is used by over 350,000 organizations worldwide and has over 5,000 employees and 9,000 employees globally. It generates over $1 billion in annual revenue. - The platform provides capabilities for spatial analysis, predictive modeling, and understanding relationships between data and places. It supports a wide range of industries from utilities to emergency response. - ArcGIS includes both cloud-based (ArcGIS Online) and on-premises (ArcGIS Enterprise) components, as well as desktop and mobile apps. It also has extensive APIs and SDKs for custom development.

Massimo Bonanni - L'approccio ai microservizi secondo Service Fabric - Codemo...

Codemotion

Service Fabric è la piattaforma, utilizzabile sia su Azure, sia on-prem che su altri cloud provider, per l'implementazione, distribuzione e gestione di soluzioni stateful e scalabili basate su microservizi. La sessione consentirà di capire quali sono i concetti alla base di Service Fabric e quali servizi e funzionalità fornisce la piattaforma sia a livello di infrastruttura che per lo sviluppatore.

Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...

Codemotion

This document provides an overview of how to embed messaging and video capabilities into apps using Cisco Spark APIs and SDKs. It discusses the Cisco Spark platform and how developers can build bots, use the REST API and OAuth for authentication, and leverage SDKs for browsers, iOS, and Android. It also covers how guests can access Cisco Spark capabilities without being a registered user through guest mode and JWT tokens. Code samples and demos are provided to illustrate integrating messaging, video calling, and other real-time collaboration features into third party applications and business processes.

Gabriele Nocco - Massive distributed processing with H2O - Codemotion Milan 2017

Codemotion

This document provides an overview of H2O and gradient boosting machines (GBM). It introduces H2O as an open-source in-memory machine learning engine that can handle large datasets and exposes APIs in multiple languages. GBM is described as a powerful supervised algorithm that builds an ensemble of decision trees to minimize a loss function. The document explains the key components of GBM, including the loss function, weak learner (decision trees), and additive model approach. It also discusses techniques to improve basic GBM like tree constraints, learning rate, stochastic gradient boosting, and regularization.

Matteo Manchi - React Native for multi-platform mobile applications - Codemot...

Codemotion

Erik Tiengo - Embedding Cisco Spark and Location applications (ESRI) into bus...

Codemotion

The 'location' or 'positioning', is one of the most valuable and underutilized information for an asset or a physical person. The possibility to extend enhanced collaboration solution, such as Spark, into processes and applications designed around the 'Science of Where' provide an incredible capability to solve industry-relevant problems, not easy or cost-effective to address today. The workshop deals with real-life use cases of Spark enabled solutions for asset tracking and asset protection. You will also learn how to use Cisco Spark to share asset location info within a biz process.

Erik Wendel - Beyond JavaScript Frameworks: Writing Reliable Web Apps With El...

Codemotion

In times where a jungle of JavaScript frameworks wants to solve every conceivable problem in web app development, Elm offers a different approach. Elm is a functional language that compiles to JavaScript. It has a user-friendly compiler, a sound type system, built-in immutability and lots of other features that come in handy when developing large, hopefully bug-free, single-page apps. While having fun in the process! In this talk you'll see how Elm works and learn how to use it to build a web app. More importantly, you'll learn the pros and cons of using it over a JavaScript-based solution.

Agnieszka Naplocha - Breaking the norm with creative CSS - Codemotion Milan 2017

Codemotion

Feeling uninspired and tired of constantly building the same layouts? Let’s leverage the CSS superpowers you might have heard about before, but haven’t already used. Let’s explore new CSS features that give us a great set of tools and enable to do amazing things on the web! The future of web graphics and CSS as a design language is bright, and finally it will make us less dependent on the image editors. We’re entering the new era with in-browser designing. Don’t stay behind and get some fresh air of creativity directly in the web browser.

Oded Coster - Stack Overflow behind the scenes - how it's made - Codemotion M...

Codemotion

Lean@core lean startup e cloud- - Codemotion Rome 2015Codemotion

Codemotion

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...

Codemotion

Pompili - From hero to_zero: The FatalNoise neverending story

Codemotion

Viewers also liked

Demi Ben-Ari - Monitoring Big Data Systems Done "The Simple Way" - Codemotion...

Codemotion

Nicola Corti - Building UI Consistent Android Apps - Codemotion Milan 2017

Codemotion

Anna Makarudze - Django Girls: Inspiring women to fall in love with programmi...

Codemotion

Maurizio Moriconi - ARKit: Augmented Reality made simple - Codemotion Milan 2017

Codemotion

James Williams - Demystifying Constraint Layout - Codemotion Milan 2017

Codemotion

Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017

Codemotion

Matteo Valoriani - How Augment your Reality: different perspective on the Rea...

Codemotion

Claudio Carboni - ArcGIS platformthe foundation of your idea - Codemotion Mil...

Codemotion

Massimo Bonanni - L'approccio ai microservizi secondo Service Fabric - Codemo...

Codemotion

Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...

Codemotion

Gabriele Nocco - Massive distributed processing with H2O - Codemotion Milan 2017

Codemotion

Matteo Manchi - React Native for multi-platform mobile applications - Codemot...

Codemotion

Erik Tiengo - Embedding Cisco Spark and Location applications (ESRI) into bus...

Codemotion

Erik Wendel - Beyond JavaScript Frameworks: Writing Reliable Web Apps With El...

Codemotion

Agnieszka Naplocha - Breaking the norm with creative CSS - Codemotion Milan 2017

Codemotion

Oded Coster - Stack Overflow behind the scenes - how it's made - Codemotion M...

Codemotion

Lean@core lean startup e cloud- - Codemotion Rome 2015Codemotion

Codemotion

Viewers also liked (20)