Desde o artigo que eu escrevi há mais de um ano atrás sobre o fim da profissão front-end como conhecemos hoje, tenho acompanhado de perto as iniciativas do mercado de tentar minimizar o trabalho braçal de produção de código, automatizando as partes mais repetitivas do processo, liberando cada vez mais espaço para que designers e desenvolvedores possam usar seu tempo com coisas mais importantes. Deixar o trabalho pesado, repetitivo, enfadonho para a máquina é a tacada mais inteligente a se fazer, e na verdade já fazemos isso o tempo inteiro com os task runners da vida.
Agora, a implementação de layouts pode ficar ainda mais fácil com o Framer X. A ideia ainda se restringe ao design x código mobile (que pra mim, como é um ambiente mais controlado, pode ser uma das primeiras áreas a receber automatizações mais densas). O Framer X é um produto totalmente novo da Framer, que já é conhecida por seus plugins de prototipagem para o Sketch. O Framer X permite usar componentes para construir sistemas de design baseados em React e ES6.
A ideia ainda não é fazer coisas malucas e apps inteiros em React native e tal, mas facilitar, nesse primeiro passo, a criação de gráficos, layouts responsivos, fluxos de tela etc.
Essa abordagem também está sendo usada pela Supernova, que é uma outra iniciativa que transforma design em código mobile nativo, simplesmente acabando com o abismo que existe entre design e desenvolvimento mobile.
O site da Framer ainda não traz tantos detalhes do funcionamento ou de como eles fizeram essa tecnologia, mas com certeza eles darão mais detalhes quando lançarem realmente o produto, que hoje está em beta, com lista de espera.
Leia mais sobre o assunto
Se você quiser ler mais sobre as iniciativas de automatização de código que tenho acompanhado, veja a lista de links abaixo:
Últimos meses
- An AI can now write its own code
- Supernova promises to automatically convert Sketch mobile app designs into native UI code
- Airbnb built an AI that turns design sketches into product source code
- How you can train AI to convert design mockups into HTML and CSS
- The CEO of GitHub, which caters to coders, thinks automation will bring an end to traditional software programming
Dados reais no design
- 3 Easy Steps for Working with Realistic Data in Sketch Using JSON
- Designing with Data
- Prototype with real data in Framer, from JSON to multi-device and internet of things
- Adobe XD: Designing with Real Data
Sobre não usar texto fake em layouts
- Lorem Ipsum is Killing Your Designs
- Why designers should never use fake text
- Stop using Lorem Ipsum!
- “Getting Real” design tip: Just say no to Lorem Ipsum
WebAssembly
- FAQ do site WebAssembly
- WebAssembly – a web compilada
- Google, Microsoft, Mozilla And Others Team Up To Launch WebAssembly, A New Binary Format For The Web
- WebAssembly e o futuro da Web
- From asm.js to webassembly
- The Web is getting its bytecode: WebAssembly
Sobre o cenário das ferramentas de front-end
- front-end.directory
- Using front-end build tools
- A Collection Of Best Front End Frameworks
- GitHub: Front-end JavaScript frameworks
- Front-End Tooling Trends for 2017
- Updated List: The 67 Very Best Front End Web Developer Tools
- The most popular JavaScript front-end tools
- Top 10 Templating Engines for JavaScript To Improve and Simplify Your Workflow 2017
- Automating Front-end Workflow
- Javascript State of the Union 2015, parte 3
- Slides – Javascript State of the Union 2015
- The State of Front-End Tooling 2016 – Results
- Front-end Roles and Responsibilities
