PWA로 SS 리더 앱 만들기

앱 정보



아티팩트: h tps : // / s s ct. 에르즈 p. rg/ (모바일 지원 전용)
리포지토리 : htps : // 기주 b. 코 m / 에 l없이 p / 에 s 콘 ct






리더라고 불렀습니다만, 이른바 안테나 앱측입니다. 여러 SS 요약 사이트의 SS 링크 목록을 표시합니다.

이 응용 프로그램의 첫 번째 특징은 검색입니다. 작품 태그 + 캐릭터 이름으로 좁히고 검색어를 탭하여 저장할 수 있습니다.
또 다른 특징은 여러 사이트를 잡고있는 동안 SS의 중복이 없다는 것입니다. 제목을 어느 정도 정규화하고 집계하고 있습니다.

데이터는 Rails에서 구현한 API에서 가져옵니다. 기사 데이터는 SS 안테나 사이트의 RSS를 수집합니다. SS를 RSS로 비 SSR입니다.
사실 이 앱의 핵심은 서버측으로 수집, 태그 정리, 관리의 자동화에 주력하고 있습니다.

PWA



React Native로 만든 개인 개발 앱을 PWA로 마이그레이션했습니다. (1부터)

만들고 있는 것이 Native일 필요가 없는 것, 앱 스토어 관리나 릴리스 준비 등의 수고를 느끼고 있었던 것, 디버그 환경이 가벼워질 것 같은 것 등이 계기입니다. (작은 개인 개발 그러나 없기 때문에 좁은 관점일지도 모릅니다). 물론 PWA에는 더 많은 이점이 있다고 생각합니다.

배포까지의 감상



GitHub Pages와 create-react-app를 사용하고 있기 때문에 그 시점에서 상당한 성능이 충족되었습니다.
느낌이 듭니다.
manifest.json 등 최소한의 설정으로 스플래시 화면이 붙는 체험이 좋았다.
역시 Web 개발이므로 View 개발이 단연 편하고 몸에 좋았다.

미래
Audits 등으로 PWA 제대로 최적화하여 기사를 올리고 싶습니다.
아직 만지지는 않았지만, PWA에서도 store의 migration 등은 필요하게 된다고 생각합니다.
PC 대응은 자신에게 수요가 없기 때문에 후회합니다.

사용하는 것



Redux



필수.

FlowType



형식은 필수.

s2s



Action의 Type 쓴 순간에 Redux 구성과 reducer, action, Flow 형식화, 테스트 등을 순식간에 만들어 주기 때문에 신. 자신은 필수.

styled-components



필수.

깨끗하게 정리해 사용하지 않지만 최근에는 Component 파일내에 잡하게 살려 사용하고 있다.
htps : // 기주 b. 코 m/s s ct/b s ct/bぉb/마s r/src/코 m포넨 ts/S와 rys 1/in x. js

의사 클래스나 keyframe도 쓰기 쉽다.

redux-persist



필수.

2 갈 정도로 Store 영속화 할 수 있다. after REHYDRATE 로 Action 부르는 기능을 갖고 싶다.

material-ui



h tp // w w. 마테리아 음. 이 m/#/
구성 요소 그룹 라이브러리. 특히 고집 없이 적당히 선택했다.

디버그 시스템



Redux DevTool Extension



필수


StoryBook





가로 폭 full 의 컴퍼넌트를 위한 Wrap 를 갖고 싶다.

배포



react-create-app



발달을 위한 script (react-scripts)를 가진.
service worker 나 manifest.json 등 일대로 디폴트로 붙이기 때문에 좋다.react-scripts reject 가 있는 것이 역시 좋아.

gh-pages



이번에는 GitHub Pages에 올리고 있다. gh-pages는 dist 용의 브랜치 관리해 push 해 준다.
그래서 gh-pages 커맨드로 한발.

매우 평범한 것뿐이지만이 근처에서 이상입니다.

React Native는 집착하는 곳이 많거나 개발이 안정되지 않았기 때문에 잠시 쓰지 않을까 생각합니다.
Redux + Flow의 현재 구성이 너무 오고 코드를 작성하는 것이 즐거운 시기입니다.

Redux는 아직 건에는 효과가 없지만 그 중 효과가 있게 된다.

좋은 웹페이지 즐겨찾기