Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating a complex Angular 2 application - 3rd ...
Search
Javier Martin Montull
February 14, 2017
Technology
0
39
Creating a complex Angular 2 application - 3rd Developer's conference, CERN
Javier Martin Montull
February 14, 2017
Tweet
Share
More Decks by Javier Martin Montull
See All by Javier Martin Montull
Invenio Interest Group - INSPIRE HEP
jmartinm
0
89
Editing content in Invenio
jmartinm
0
54
BlogForever workshop - Invenio metadata curation
jmartinm
2
61
Other Decks in Technology
See All in Technology
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
150
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
360
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
3
170
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
150
エンジニア向け技術スタック情報
kauche
0
110
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
270
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.3k
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
280
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
Agentic Workflowという選択肢を考える
tkikuchi1002
1
380
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
140
実践! AIエージェント導入記
1mono2prod
0
140
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Code Review Best Practice
trishagee
68
18k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Producing Creativity
orderedlist
PRO
346
40k
4 Signs Your Business is Dying
shpigford
184
22k
Speed Design
sergeychernyshev
31
1k
Bash Introduction
62gerente
614
210k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Transcript
Building a complex Angular 2 application A Journey Javier Martín
Montull 14th February 2017, It’s about U and I Conference, CERN
The challenge
MARC-XML JSON
Devs Librarians
None
–Anonymous INSPIREHEP cataloger How are we going to edit the
content now?
–Anonymous INSPIREHEP developer JSON is a standard, we can use
some ready made solution
https://github.com/jdorn/json-editor
https://github.com/josdejong/jsoneditor
None
Time to build our own (with Angular 2)
Wait, what is TypeScript?
Angular 2 is built with TypeScript Features of ES6 (classes,
inheritance, modules,…) + typings Nice integration in IDEs like VisualStudio Code Get errors early on, good autocompletion Easy to work with
Less concepts and easier than Angular 1 Module Component Metadata
Template Data Binding Service Directive Dependency Injection First observations
Code can be easily organized HTML template Logic Tests Styling
How to get started with your application
Starter packs https://github.com/AngularClass/angular2-webpack-starter https://github.com/angular/angular-cli Nice defaults out of the box
Opinionated for good or bad Started with: Went with:
So we started building our app
https://github.com/inspirehep/record-editor/issues/2 First prototype
Our first road block
None
How change detection works in Angular 2 Source: https://blog.thoughtram.io/angular/2016/02/22/angular-2- change-detection-explained.html
None
None
None
The JSON files on INSPIRE can have up to 2000
authors and 100s of references - 1MB Change detection made the interface VERY slow
Smarter change detection with Immutable JS
None
Before After
What about styling?
https://github.com/valor-software/ng2-bootstrap https://github.com/angular/material Bootstrap 3 & 4 components Material Design components
Official from angular organization Very popular Semantic versioning not respected
Code quality and deployment
None
Code quality (tslint) https://github.com/palantir/tslint Custom lint rules Inline disabling /
enabling of rules Automatic fixing of formatting & style violations Integration with IDEs and build systems (Gulp JS)
Testing
Unit test with Karma + Jasmine
Code coverage with Karma + Istanbul coveralls.io
End-to-End tests with Protractor https://github.com/angular/protractor Protractor runs tests against your
application running in a real browser, interacting with it as a user would.
Documentation
https://github.com/TypeStrong/typedoc
Automatic deployment to npm and github pages
Done through Travis CI deploy: provider: npm skip_cleanup: true email:
[email protected]
api_key: secure: ZO0gp0WoyzYY6/UBbwJVIH8Dt0Vay2Dvc on: tags: true repo: inveniosoftware-contrib/ng2-json-editor all_branches: true node: '6.9.1' after_deploy: - ./deploy-gh-pages.sh (extract of .travis.yml)
Getting closer to the goal
None
None
https://github.com/inveniosoftware-contrib/ng2-json-editor Thank you https://github.com/inspirehep/record-editor